javascript - 网络音频 API : Troubles appending JS audio object to html5 player in Firefox

Question

我最近制作了一个 3D 可视化工具，但在让我的音频代码在 Firefox 中运行时遇到了一些问题。

我设置了我的 AudioContext:

audioContextSetup: function () {
  try {
    Sound.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  } catch(e) {
    alert('Web Audio API is not supported in this browser');
  }
},

我创建了一个音频对象:

createAudioObject: function () {
  Sound.audio0 = new Audio();
  Sound.audio0.src = '/audio/MakeYouWanna.mp3';
  Sound.audio0.controls = true;
  Sound.audio0.autoplay = false;
  Sound.audio0.loop = true;
},

我设置了我的音频节点:

setupAudioNodes: function () {
  Sound.sourceNode = Sound.audioContext.createMediaElementSource(Sound.audio0);
  Sound.analyserNode = Sound.audioContext.createAnalyser();
  Sound.analyserNode.fftSize = 1024,
  Sound.frequencyArray = new Uint8Array(Sound.analyserNode.frequencyBinCount);
  Sound.timeDomainArray = new Uint8Array(Sound.analyserNode.frequencyBinCount);
},

我连接我的音频节点:

connectAudioNodes: function () {
  Sound.sourceNode.connect(Sound.analyserNode);
  Sound.analyserNode.connect(Sound.audioContext.destination);
},

然后，我运行这条在 Chrome 中完美运行的神奇代码:(请注意#player 是一个空的 div。)

$('#player').append(Sound.sourceNode.mediaElement);

但在 Firefox 中，我得不到爱。我最近了解到 mp3 在 Firefox 中不起作用(lame)，但播放器应该仍会显示，对吗？

我有一个文件拖放功能，它也使用上面的 .append() 行，我尝试了一个 .wav 文件，但也没有用。

网站:http://tadx-3dsound.herokuapp.com/Github repo :https://github.com/aldhsu/TeamDNM

非常感谢，桑·洛佩兹。

Answer 1

问题是:

$('#player').append(Sound.sourceNode.mediaElement);

MediaElementAudioSourceNode的 mediaElement property 已经被弃用了一段时间。它不会在 Chrome 中长期受支持(或者它可能已经被删除，不确定)，并且在 Firefox 中从未存在过(因为我们在它被删除后开始实现 Web Audio API)。

你需要自己做映射(简单地保留一个 MediaElementAudioSourceNode <-> <audio> 映射)，或者简单地做:

$('#player').append(Sound.audio0);

针对您的具体情况。

此外，Firefox 现在已经在所有平台上支持 mp3 很长一段时间了。