当前位置：首页 > JavaScript

js 实现音频

2026-04-07 03:30:22JavaScript

使用 Web Audio API 播放音频

Web Audio API 提供了强大的音频处理能力，适合需要精细控制的场景。以下是一个基础示例：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioElement = new Audio('audio-file.mp3');
const source = audioContext.createMediaElementSource(audioElement);

// 连接音频节点
source.connect(audioContext.destination);

// 播放
audioElement.play();

使用 HTML5 Audio 元素实现简单播放

对于基础需求，HTML5 <audio> 元素是最简单的实现方式：

<audio id="myAudio" controls>
  <source src="sound.mp3" type="audio/mpeg">
</audio>

<script>
  const audio = document.getElementById('myAudio');
  audio.play(); // 播放
  audio.pause(); // 暂停
</script>

实现音频可视化

结合 Canvas 可以创建音频可视化效果：

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;

// 获取音频数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);

  // 使用 Canvas 绘制波形
  canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
  for(let i = 0; i < bufferLength; i++) {
    canvasCtx.fillRect(i * 2, canvas.height - dataArray[i], 2, dataArray[i]);
  }
}

处理音频流

从麦克风获取音频流并处理：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    const audioContext = new AudioContext();
    const source = audioContext.createMediaStreamSource(stream);
    const processor = audioContext.createScriptProcessor(1024, 1, 1);

    source.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = function(e) {
      const input = e.inputBuffer.getChannelData(0);
      // 处理音频数据
    };
  });

音频特效处理

添加音频特效（如回声）：

js 实现音频

const audioCtx = new AudioContext();
const source = audioCtx.createBufferSource();
const delay = audioCtx.createDelay();
const gain = audioCtx.createGain();

delay.delayTime.value = 0.5;
gain.gain.value = 0.5;

source.connect(audioCtx.destination);
source.connect(delay);
delay.connect(gain);
gain.connect(audioCtx.destination);