Webaudio API:将数组缓冲区作为文件存储在服务器上,稍后检索


Webaudio API: store arraybuffer on server as file and retrieve it later?

我拼命想找到解决问题的方法。

上下文:通过WebAudio API管理音频的web应用程序;JavaScript+jQuery客户端;PHP5服务器端。(很抱歉,为了保持这篇文章的简短可读性,我不得不剪掉下面的部分代码)

1) 我有一个arraybuffer对象,用filereader obj本地读取,并本地存储在vis.js数据集中(这就是它的作用),如下所示。。。

var reader = new FileReader();
reader.onload = function(ev) { 
            //this store the content into an "audiodata" property of an item part of a vis.js dataset whose name is "clips"
            songModule.createNewClip({  arrayBufferObj:ev.target.result }) 
        };
reader.readAsArrayBuffer(file); 

重要提示:在这个阶段,这个对象也被传递到audioContext.decodeAudioData(arrayBufferObj,function(buffer){..}THAt工作正常并给出正确的输出..到目前为止还不错。。

2) 我将对象上传到服务器,如下所示:

var formData  = new FormData(document.getElementById("temporaryForm"))
...
formData.append('audiodata', clips.get(localClipId).audiodata) 
        $.ajax({                                      
            type: 'POST',
            url: 'addUpdateClip.php',                  
            data:  formData ,                                     
            //dataType: 'json',    
            processData: false, //It’s imperative that you set the contentType option to false, forcing jQuery not to add a Content-Type header for you
            contentType: false,
            cache: false, 
            ...
)}

3) PHP页面addUpdateClip.PHP检索并存储到服务器上的文件数据:

... $myfile = fopen($uniqueFileName, "w");
if (!fwrite($myfile, getValueFromPostOrGet('audiodata')))  //=$_POST["audiodata"]
fclose($myfile);    

文件似乎正确写入服务器

4) 。。但是稍后直接在服务器上重试生成的文件,并将其传递给audioContext.decodeAudioData函数导致错误"Uncaught SyntaxError:未能对"audioContext"执行"decodeAudioData":audioData的ArrayBuffer无效。"。下面是我的实验的最后一个版本。

var xhr = new XMLHttpRequest();
                xhr.open('GET', Args.filename , true);
                xhr.responseType = 'arraybuffer';   
                xhr.onload = function(e) {
                  if (this.status == 200) {
                    var responseArrayBuffer=xhr.response
                    if (responseArrayBuffer){                           
                        var binary_string = ''
                        bytes = new Uint8Array(xhr.response);
                        for (var i = 0; i < bytes.byteLength; i++) {
                            binary_string += String.fromCharCode(bytes[i]);
                        }
                        base64_string = window.btoa(binary_string);
                        console.log(base64_string)
                        //var blob = new Blob([responseArrayBuffer], {type: "audio/wav"});
                        songModule.clipAudioDataReceived(newId, blob, Args.waveformDataURL )
                    }
                  }
                xhr.onreadystatechange=function(){console.log(xhr.readyState,xhr.status, xhr.responseText )}
                };
                xhr.send();         

有线索吗?

___________回复无提示:___________________

Request URL:http://XXXXXXX/addUpdateClip.php
Request Method:POST
Status Code:200 OK

Accept:`*/*`
Accept-Encoding:gzip,deflate
Accept-Language:it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4,en-GB;q=0.2,fr;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Content-Length:43324
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryaWagMNKe8hprn1pI
Cookie:PHPSESSID=m3okfanf1isbstueih9qq3k6r3
Host:onlinedaw
Origin:http://xxxxxxxxx
Pragma:no-cache
Referer:http://xxxxxxxxx/editSong.php?song_id=9
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="mode"
add
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="id"
7961f2b6-92cd-be59-f7a7-5c59f1c69fc5
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="song_id"
9
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="group"
13
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="start"
2010-01-01 00:02:58
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="startMs"
748
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="clipDurationMs"
8617
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="audiodata"
[object ArrayBuffer]
------WebKitFormBoundaryaWagMNKe8hprn1pI
Content-Disposition: form-data; name="extension"
wav
Do you see anything strange?

OP发布的问题答案:

我一直使用相同的wave文件进行测试,因此服务器上的文件总是相同的大小(11字节)。通过这种方式,我没有意识到客户端从未发送过要强制转换的数据,而是发送了字符串"aray-buffer"。经过进一步挖掘,我注意到,每当我试图将数组缓冲区存储到数据集形式vis.js中时,它都会变成它的描述:字符串"array buffer",实际上是11个字节!

解决方案:简单地说,根据我的说法,vis.js数据集不适合包含数组缓冲区。我使用了一个并行的JavaScript数组,它起了作用。