Question

我一直在尝试按照一些教程中的步骤，使用按钮使用Web Audio API播放一个简单的，编码的本地wav或mp3文件。我的代码如下（testAudioAPI.js）：

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var myBuffer;

clickme = document.getElementById('clickme');
clickme.addEventListener('click',clickHandler);

var request = new XMLHttpRequest();

request.open('GET', 'WoodeBlock_SMan_B.wav', true);

request.responseType = 'arraybuffer';

// Decode asynchronously
request.onload = function() {
  context.decodeAudioData(request.response, function(theBuffer) {
    myBuffer = theBuffer;
  }, onError);
}
request.send();

function playSound(buffer) {
  var source = context.createBufferSource(), g = context.createGain();
  source.buffer = buffer;
  source.start(0);
  g.gain.value = 0.5;
  source.connect(g);
  g.connect(context.destination);
}

function clickHandler(e) {
    playSound(myBuffer);
}

HTML文件看起来像这样：

    <!doctype html>
<html>
    <body>
        <button id="clickme">Play</button>
        <script src='testAudioAPI.js'></script>
    </body>
</html>

然而，没有任何声音可以实现。我已经尝试了几个片段，但我仍然无法弄明白。当我尝试通过创建振荡器节点来合成声音来生成声音时，我确实听到了声音，但是没有来自本地文件的缓冲区。这会是什么问题？谢谢你们。

Answer 1

本地文件，对吧？你只是从文件系统中抓取它们（例如＆＃34; file：//＆＃34;），还是运行本地Web服务器？

据我所知，直接从文件系统提供服务在大多数（所有？）浏览器中都违反了CORS - 这将阻止您的AJAX请求成功。

也许尝试使用python -m SimpleHTTPServer或类似内容投放该网页，然后在http://localhost:8000访问该网页。

据我所知，你的所有代码都很好。

Answer 2

您有onError的来电未定义。

除此之外它应该有效，但不适用于Chrome，因为Chrome会阻止所有XMLHttpRequest到本地文件。但是以Firefox为例，一旦你定义（或摆脱）对onError的调用，它就应该有效。

Answer 3

现代ES6的简约方法。

new AudioContext（）;
context.createBufferSource（）;
source.buffer = audioBuffer; audioBuffer通过提取请求ArrayBuffer数据，然后解码AudioData解码为AudioBuffer。
source.start（）

<button id="start">playSound</button>

const audioPlay = async url => {
  const context = new AudioContext();
  const source = context.createBufferSource();
  const audioBuffer = await fetch(url)
    .then(res => res.arrayBuffer())
    .then(ArrayBuffer => context.decodeAudioData(ArrayBuffer));

  source.buffer = audioBuffer;
  source.connect(context.destination);
  source.start();
};

document.querySelector('#start').onclick = () => audioPlay('music/music.mp3');

停止播放：source.stop();

Web Audio API无法自动播放，您需要通过事件触发。

用网络音频api播放简单的声音

3 个答案: