使用Web Audio API decodeAudioData和外部二进制数据 [英] Using Web Audio API decodeAudioData with external binary data

查看:1469
本文介绍了使用Web Audio API decodeAudioData和外部二进制数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我搜索了相关问题,但无法找到任何相关信息。

I've searched related questions but wasn't able to find any relevant info.

我正在尝试让Web Audio API播放mp3文件这是在另一个文件容器中编码的,所以我到目前为止所做的是解析所述容器,并将结果二进制数据(arraybuffer)提供给audioContext.decodeAudioData方法,该方法应该接受包含音频数据的任何类型的arraybuffer。但是,它总是抛出错误回调。

I'm trying to get the Web Audio API to play an mp3 file which is encoded in another file container, so what I'm doing so far is parsing said container, and feeding the result binary data (arraybuffer) to the audioContext.decodeAudioData method, which supposedly accepts any kind of arraybuffer containing audio data. However, it always throws the error callback.

我对我正在做的事情只有微弱的把握,所以可能整个方法都是错误的。或者也许这是不可能的。

I only have a faint grasp of what I'm doing so probably the whole approach is wrong. Or maybe it's just not possible.

你们有没有尝试过这样的事情?任何帮助表示赞赏!

Has any of you tried something like this before? Any help is appreciated!

以下是一些试图更好地说明这一点的代码。以下只存储arraybuffer:

Here's some of the code to try to illustrate this better. The following just stores the arraybuffer:

newFile: function(filename){
    var that=this;
    var oReq = new XMLHttpRequest();
    oReq.open("GET", filename, true);
    oReq.responseType = "arraybuffer";
    oReq.onload = function (oEvent) {
      var arrayBuffer = oReq.response; // 
      if (arrayBuffer) {
        that.arrayBuffer=arrayBuffer;
        that.parsed=true;
      }
    };
    oReq.send(null);

这就是我在解码部分所做的事情:

And this is what I'm doing in the decoding part:

newTrack: function(tracknumber){
    var that=this;
    var arraybuffer=Parser.arrayBuffer;
    that.audioContext.decodeAudioData(arraybuffer,function(buffer){
        var track={};
        track.trackBuffer=buffer;
        track.isLoaded=true;
        track.trackSource=null;
        track.gainNode=that.audioContext.createGainNode(); 
        that.tracklist.push(track);

        },alert('error'));

其中Parser是我用来解析和存储arraybuffer的对象文字(具有newFile函数)

Where Parser is an object literal that I've used to parse and store the arraybuffer (which has the newFile function)

所以,总而言之,我不知道我做错了什么或者根本无法做到。

So, to sum up, I don't know if I'm doing something wrong or it simply cannot be done.

推荐答案

没有容器,我不确定 decodeAudioData 如何知道它是一个MP3。或者比特率是多少。或者它有多少个频道。或许多其他非常重要的信息。基本上,你需要告诉 decodeAudioData 如何解释那个ArrayBuffer。

Without the container, I'm not sure how decodeAudioData would know that it's an MP3. Or what the bitrate is. Or how many channels it has. Or a lot of other pretty important information. Basically, you need to tell decodeAudioData how to interpret that ArrayBuffer.

我唯一想到的就是客户端正在尝试使用Blob。您基本上必须自己编写标题,然后 readAsArrayBuffer ,然后将其传递给 decodeAudioData

The only thing I could think of on the client side is trying to use a Blob. You'd basically have to write the header yourself, and then readAsArrayBuffer before passing it in to decodeAudioData.

如果你有兴趣试试这个,这里有一个规格:
http://www.mpgedit.org/mpgedit/mpeg_format/mpeghdr.htm

If you're interested in trying that out, here's a spec: http://www.mpgedit.org/mpgedit/mpeg_format/mpeghdr.htm

这里是RecorderJS,会告诉你如何创建Blob(尽管它写的是RIFF / WAV标题而不是MP3):

And here's RecorderJS, which would show you how to create the Blob (although it writes RIFF/WAV headers instead of MP3):

https://github.com/mattdiamond/Recorderjs/blob/master/recorderWorker.js

你想看看 encodeWAV 方法。

无论如何,我强烈推荐如果可以的话,在服务器上整理出来。

Anyway, I would strongly recommend getting this sorted out on the server instead, if you can.

这篇关于使用Web Audio API decodeAudioData和外部二进制数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆