Webaudio API：将服务器上的arraybuffer存储为文件并稍后检索？答案

【问题标题】：Webaudio API: store arraybuffer on server as file and retrieve it later?Webaudio API：将服务器上的arraybuffer存储为文件并稍后检索？
【发布时间】：2015-12-16 03:38:27
【问题描述】：

我正在拼命寻找解决问题的方法。

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

1) 我有一个使用 filereader 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, function (buffer) {..} 正确工作并提供正确的输出 ..到目前为止一切顺利..

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 函数导致错误“未捕获的 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();

有什么线索吗？

___________回复 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?

【问题讨论】：

因为您将文件直接上传到服务器（不解码）。你能在你的服务器上检查文件没有损坏吗？您可以再次下载文件并在浏览器外播放吗？我猜它是使用x-www-form-urlencoded 内容类型传回的。不确定在 URL 中发送这么多数据是否是个好主意。
嗨，谢谢。请检查我对这篇文章的编辑。
nottheup，再次感谢。您的评论不是解决方案，但您为我指明了正确的方向。我继续使用相同的波形进行测试，因此服务器上的文件总是相同的大小..所以我没有意识到客户端一直没有发送要转换的数据，而是字符串“aray buffer "。
我找不到给你私信的方法。我正在做一个项目，它与您正在做的事情共享一些功能。您是否将数组缓冲区与客户端的相应文件准确匹配？ arraybuffers 是唯一的吗？如果是这样，那对我来说可能是一个重大突破。谢谢！

标签： javascript php web-audio-api vis.js

【解决方案1】：

OP 在问题中发布的答案：

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

解决方案：简单地说，在我看来，vis.js 数据集不适合包含数组缓冲区。我改用了一个并行的 JavaScript 数组，它确实有效。

【讨论】：