让音频元素唱起来 —— 使用 AudioContext.resume() 恢复音频播放

2024-02-17 10:29:15







## 前言

在编写使用 HTML5 音频的应用程序时，经常会遇到需要暂停或停止音频播放的情况。此时，如果需要恢复播放，则可以使用 AudioContext.resume() 方法。该方法可以恢复因调用 AudioContext.suspend() 方法而暂停的音频播放，也可以恢复因调用 AudioBufferSourceNode.stop() 方法而停止的音频播放。

## 问题复现

为了演示 AudioContext.resume() 方法的用法，我们创建一个简单的 HTML 页面，其中包含两个按钮（一个播放按钮，一个暂停按钮）和一个选择文件的 input。

```html
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="file" id="audio-file-input" accept="audio/*">
  <button id="play-button">播放</button>
  <button id="pause-button">暂停</button>

  <script>
    const audioContext = new AudioContext();
    const audioFileInputElement = document.getElementById('audio-file-input');
    const playButton = document.getElementById('play-button');
    const pauseButton = document.getElementById('pause-button');

    let audioBuffer;
    let audioBufferSourceNode;

    // Load the audio file
    audioFileInputElement.addEventListener('change', function() {
      const file = this.files[0];
      const reader = new FileReader();

      reader.onload = function() {
        audioContext.decodeAudioData(reader.result, function(buffer) {
          audioBuffer = buffer;
        });
      };

      reader.readAsArrayBuffer(file);
    });

    // Play the audio file
    playButton.addEventListener('click', function() {
      if (audioBufferSourceNode) {
        audioBufferSourceNode.stop();
      }

      audioBufferSourceNode = audioContext.createBufferSource();
      audioBufferSourceNode.buffer = audioBuffer;
      audioBufferSourceNode.connect(audioContext.destination);
      audioBufferSourceNode.start();
    });

    // Pause the audio file
    pauseButton.addEventListener('click', function() {
      audioBufferSourceNode.stop();
    });
  </script>
</body>
</html>

当用户选择一个音频文件并点击播放按钮时，该音频文件将开始播放。当用户点击暂停按钮时，音频播放将暂停。此时，如果用户再次点击播放按钮，音频播放将从暂停处继续播放。

原理分析

AudioContext.resume() 方法的工作原理如下：

当调用 AudioContext.suspend() 方法时，音频播放将暂停，并且所有音频节点（包括 AudioBufferSourceNode）将停止处理音频数据。
当调用 AudioContext.resume() 方法时，音频播放将恢复，并且所有音频节点（包括 AudioBufferSourceNode）将继续处理音频数据。

需要注意的是，AudioContext.resume() 方法只能恢复因调用 AudioContext.suspend() 方法而暂停的音频播放，或者因调用 AudioBufferSourceNode.stop() 方法而停止的音频播放。如果音频播放因其他原因（例如，浏览器标签被切换到后台）而中断，则无法使用 AudioContext.resume() 方法恢复播放。