js播放wav文件(源码)

下面是使用JavaScript播放WAV文件的攻略及示例：

前置条件

播放WAV文件需要浏览器支持Web Audio API，因此在进行下一步操作的前提条件是您的浏览器支持Web Audio API。

步骤一：创建一个AudioContext对象

在使用Web Audio API播放声音之前，必须先创建一个AudioContext对象。代码如下：

let context = new (window.AudioContext || window.webkitAudioContext)();

步骤二：获取WAV文件并解码

通过XHR请求获取WAV文件并解码为音频数据。代码如下：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'example.wav', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
  context.decodeAudioData(xhr.response, function (buffer) {
    playSound(buffer);
  });
};
xhr.send();

在上述代码中，我们使用XMLHttpRequest获取example.wav文件，并将responseType设置为arraybuffer，以便XHR返回二进制数据。XHR的onload事件触发后，我们调用AudioContext的decodeAudioData方法将返回的数据解码为音频数据。

步骤三：播放声音

一旦我们解码了音频数据，就可以创建一个AudioBufferSourceNode和GainNode来播放声音。代码如下：

function playSound(buffer) {
  let source = context.createBufferSource();
  let gainNode = context.createGain();
  source.buffer = buffer;
  source.connect(gainNode);
  gainNode.gain.value = 1;
  gainNode.connect(context.destination);
  source.start(0);
}

在上述代码中，我们创建了一个BufferSourceNode，并将解码后的音频数据保存在buffer属性中。然后我们创建一个GainNode，将BufferSourceNode连接到GainNode，再将GainNode连接到AudioContext的destination节点。设置GainNode的gain属性值为1，表示音量为100%。最后，我们调用BufferSourceNode的start方法播放声音。

示例一：播放本地WAV文件

以下是一个简单示例，演示如何播放本地WAV文件：

<a href="example.wav" id="playButton">Play</a>
<script>
  let context = new (window.AudioContext || window.webkitAudioContext)();
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'example.wav', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    context.decodeAudioData(xhr.response, function (buffer) {
      let source = context.createBufferSource();
      let gainNode = context.createGain();
      source.buffer = buffer;
      source.connect(gainNode);
      gainNode.gain.value = 1;
      gainNode.connect(context.destination);
      document.getElementById('playButton').addEventListener('click', function () {
        source.start(0);
      });
    });
  };
  xhr.send();
</script>

在此示例中，我们使用XMLHttpRequest获取名为example.wav的本地文件，并创建一个HTML链接元素“Play”，当用户点击此链接时，我们才播放声音。

示例二：播放远程WAV文件

以下是一个演示如何播放远程文件的示例：

<a href="#" id="playButton">Play</a>
<script>
  let context = new (window.AudioContext || window.webkitAudioContext)();
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://example.com/example.wav', true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    context.decodeAudioData(xhr.response, function (buffer) {
      let source = context.createBufferSource();
      let gainNode = context.createGain();
      source.buffer = buffer;
      source.connect(gainNode);
      gainNode.gain.value = 1;
      gainNode.connect(context.destination);
      document.getElementById('playButton').addEventListener('click', function () {
        source.start(0);
      });
    });
  };
  xhr.send();
</script>

在此示例中，我们使用XMLHttpRequest获取名为example.wav的远程文件，并创建一个HTML链接元素“Play”，当用户点击此链接时，我们才播放声音。

以上是使用JavaScript播放WAV文件的攻略及示例。