如何在 JavaScript 中录制和播放音频？

在现代浏览器中，我们可以使用 JavaScript 通过 Web API 来录制和播放音频。本文将介绍如何在 JavaScript 中使用 Web Audio API 和 MediaDevices API 来实现录制和播放音频。

实现步骤

录制音频

1. 使用 MediaDevices API 获取到音频流。可以使用 navigator.mediaDevices.getUserMedia() 方法来请求获取音频流，该方法返回一个 Promise 对象，可以使用 then() 方法来获取到 MediaStream 对象。

navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => {
    // 处理音频流
  })
  .catch(error => {
    // 处理获取音频流失败的情况
  });

2. 如果要实时播放录制的音频，需要使用 Web Audio API 中的 MediaStreamSource 对象。使用 Web Audio API 的 createMediaStreamSource() 方法来创建该对象。

const audioContext = new window.AudioContext();
const mediaStreamSource = audioContext.createMediaStreamSource(stream);

3. 创建一个 MediaRecorder 对象来录制音频。可以使用 MediaRecorder 对象的 start() 和 stop() 方法来开始和停止录制。录制结束后，会触发 dataavailable 事件，事件中的 data 属性就是录制的音频数据。

const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', event => {
  // 处理录制的音频数据
});

// 触发开始录制
mediaRecorder.start();

// 触发停止录制
setTimeout(() => {
  mediaRecorder.stop();
}, 5000);

播放音频

1. 使用 Web Audio API 中的 AudioContext 对象来创建一个音频上下文。

const audioContext = new window.AudioContext();

2. 使用 XMLHttpRequest 来获取音频数据。可以使用 XMLHttpRequest 的 responseType 属性来设置响应类型为 arraybuffer，响应数据以二进制数组的形式返回。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'audio.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = event => {
  // 处理获取到的响应数据
};
xhr.send();

3. 使用 Web Audio API 中的 AudioContext.decodeAudioData() 方法将二进制数组转换成可播放的 AudioBuffer 对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'audio.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = event => {
  const audioData = event.target.response;
  audioContext.decodeAudioData(audioData, audioBuffer => {
    // 处理解码后的音频数据
  });
};
xhr.send();

4. 创建一个 AudioBufferSourceNode 对象来播放音频。使用 AudioBufferSourceNode 对象的 buffer 属性来设置要播放的音频数据，使用 start() 方法来开始播放。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'audio.mp3', true);
xhr.responseType = 'arraybuffer';
xhr.onload = event => {
  const audioData = event.target.response;
  audioContext.decodeAudioData(audioData, audioBuffer => {
    const audioBufferSource = audioContext.createBufferSource();
    audioBufferSource.buffer = audioBuffer;
    audioBufferSource.connect(audioContext.destination);
    audioBufferSource.start();
  });
};
xhr.send();

总结

本文介绍了如何使用 JavaScript 中的 Web API 实现录制和播放音频。通过 MediaDevices API 获取音频流，使用 MediaRecorder API 录制音频，通过 Web Audio API 播放音频。这些 API 可以帮助我们在浏览器中实现基本的音频功能。