Question

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

CONTEXT：通过WebAudio API管理音频的Web应用程序; JavaScript + jQuery客户端; PHP5服务器端。（对不起，我不得不删掉下面的部分代码，以保持这篇文章简短易读）

1）我有一个使用文件读取器obj在本地读取的arraybuffer对象，并在本地存储在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，函数（缓冲区）{..}正确工作并提供正确的输出 ..到目前为止很好..

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函数导致错误＆＃34; Uncaught SyntaxError：无法执行＆＃39; decodeAudioData＆＃39; on＆＃39; AudioContext＆＃39;：audioData的无效ArrayBuffer。＆＃34;。在我的实验的最后一个版本下面。

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();

有任何线索吗？

___________回复noththeup：___________________

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?

Answer 1

OP在问题中发布的答案：

我继续使用相同的wave文件进行测试，因此服务器上的文件总是大小相同（11个字节）。这样我就没有意识到客户端从未发送过要转换的数据，而是字符串“aray buffer”。   在进一步挖掘之后，我注意到每当我尝试将数组缓冲区存储到数据集形式vis.js时，它就变成了它的描述：字符串“数组缓冲区”，实际上是11个字节！

解决方案：简单地说，根据我的说法，vis.js数据集不适合包含数组缓冲区。我使用了并行JavaScript数组，但它确实有效。

Webaudio API：将服务器上的arraybuffer存储为文件并在以后检索它？

1 个答案: