JS音频处理|极客笔记

JS音频处理

在 Web 开发中，音频处理是一个常见的需求，比如播放音频、录制音频、处理音频等。JavaScript 提供了一些 API 用于实现音频处理，本文将介绍一些常见的音频处理技术和实践。

1. 播放音频

要在网页上播放音频文件，可以使用 HTML5 中的 <audio> 元素。通过 JavaScript 控制 <audio> 元素的属性和方法，可以实现音频的播放、暂停、音量调节等功能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Player</title>
</head>
<body>
<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
<script>
  const audio = document.getElementById('myAudio');
  audio.play();
</script>
</body>
</html>

在上面的示例中，首先创建了一个 <audio> 元素，然后通过 JavaScript 获取到该元素并调用了 play() 方法播放音频。

2. 音频可视化

通过 Web Audio API，我们可以实现音频的可视化效果。Web Audio API 提供了分析音频数据及实时处理音频数据的功能，我们可以将音频数据转换为频谱图、波形图等形式展示出来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Visualizer</title>
</head>
<body>
<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
<canvas id="myCanvas"></canvas>
<script>
  const audio = document.getElementById('myAudio');
  const ctx = document.getElementById('myCanvas').getContext('2d');
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const analyser = audioContext.createAnalyser();
  const source = audioContext.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(audioContext.destination);
  analyser.fftSize = 256;

  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    const barWidth = ctx.canvas.width / bufferLength;
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
      const barHeight = dataArray[i];
      ctx.fillStyle = `rgb(${barHeight}, 0, 0)`;
      ctx.fillRect(x, ctx.canvas.height - barHeight, barWidth, barHeight);
      x += barWidth;
    }
  }

  draw();
</script>
</body>
</html>

上面的示例中，我们创建了一个 <canvas> 元素，用于绘制音频的可视化效果。通过 Web Audio API 创建音频上下文、分析器，并且将 <audio> 元素连接到分析器，实时获取音频数据并绘制频谱图。

3. 录制音频

要在网页上录制音频，可以使用 MediaDevices API。MediaDevices API 提供了 getUserMedia() 方法用于获取用户的媒体输入（比如摄像头、麦克风），我们可以使用该方法获取用户的麦克风输入并录制音频。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Recorder</title>
</head>
<body>
<button id="recordButton">Record</button>
<button id="stopButton">Stop</button>
<audio id="audioPlayer" controls></audio>
<script>
  const recordButton = document.getElementById('recordButton');
  const stopButton = document.getElementById('stopButton');
  const audioPlayer = document.getElementById('audioPlayer');
  let mediaRecorder;
  let chunks = [];

  recordButton.onclick = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = (e) => {
      if (e.data.size > 0){
        chunks.push(e.data);
      }
    };
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(chunks, {type: 'audio/wav'});
      audioPlayer.src = URL.createObjectURL(audioBlob);
    };
    mediaRecorder.start();
  };

  stopButton.onclick = () => {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
      mediaRecorder.stop();
    }
  };
</script>
</body>
</html>

在上面的示例中，我们创建了一个录制按钮和一个停止按钮，当用户点击录制按钮时，调用 getUserMedia() 方法获取音频输入流，并创建 MediaRecorder 对象进行录制；当用户点击停止按钮时，停止录制并将录制好的音频文件用 <audio> 元素播放。

4. 音频处理

通过 Web Audio API，我们还可以实现对音频的实时处理，比如添加音效、混音等。Web Audio API 提供了各种节点用于处理音频数据，我们可以通过连接这些节点实现各种音频效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio Effects</title>
</head>
<body>
<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
<script>
  const audio = document.getElementById('myAudio');
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaElementSource(audio);
  const gainNode = audioContext.createGain();
  const filterNode = audioContext.createBiquadFilter();

  source.connect(filterNode);
  filterNode.connect(gainNode);
  gainNode.connect(audioContext.destination);

  filterNode.type = 'lowpass';
  filterNode.frequency.value = 1000;

  gainNode.gain.value = 0.5;
</script>
</body>
</html>

在上面的示例中，我们通过 Web Audio API 创建了一个音频上下文、音频源、增益节点和滤波器节点，然后将它们连接在一起。通过调整滤波器节点的参数和增益节点的音量值，可以实现对音频的实时处理。