js实现声音

使用 Web Audio API 播放声音

Web Audio API 是现代浏览器提供的强大音频处理接口，可以加载、解码和播放音频文件。

// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 加载音频文件
function playSound(url) {
  fetch(url)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
      const source = audioContext.createBufferSource();
      source.buffer = audioBuffer;
      source.connect(audioContext.destination);
      source.start();
    });
}

// 使用示例
playSound('sound.mp3');

使用 HTML5 Audio 元素

HTML5 的 <audio> 元素提供了更简单的音频播放方式，适合基础需求。

// 创建音频元素
const audio = new Audio('sound.mp3');

// 播放音频
audio.play();

// 控制方法
audio.pause();  // 暂停
audio.currentTime = 0;  // 重置播放位置
audio.volume = 0.5;  // 设置音量 (0-1)

生成合成音效

使用 Web Audio API 可以生成各种合成音效，无需加载外部文件。

// 生成正弦波音效
function playTone(frequency, duration) {
  const oscillator = audioContext.createOscillator();
  const gainNode = audioContext.createGain();

  oscillator.type = 'sine';
  oscillator.frequency.value = frequency;
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);

  gainNode.gain.setValueAtTime(1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);

  oscillator.start();
  oscillator.stop(audioContext.currentTime + duration);
}

// 使用示例 (440Hz, 持续1秒)
playTone(440, 1);

实现声音可视化

结合 Canvas 和 Web Audio API 可以创建音频可视化效果。

// 创建分析器节点
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;

// 连接音频源到分析器
source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取频率数据
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);
  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

  for(let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i];
    canvasCtx.fillStyle = `rgb(${barHeight+100},50,50)`;
    canvasCtx.fillRect(x, canvas.height-barHeight/2, barWidth, barHeight/2);
    x += barWidth + 1;
  }
}

draw();

处理跨浏览器兼容性

不同浏览器对音频API的支持存在差异，需要做兼容处理。

// 兼容性检查
if (!window.AudioContext) {
  if (!window.webkitAudioContext) {
    alert('您的浏览器不支持Web Audio API');
  }
  window.AudioContext = window.webkitAudioContext;
}

// 自动播放策略处理
document.addEventListener('click', () => {
  audioContext.resume().then(() => {
    console.log('音频已解锁');
  });
}, { once: true });

实现空间音频效果

使用 Web Audio API 的 PannerNode 可以创建3D音频效果。

function create3DSound() {
  const panner = audioContext.createPanner();
  panner.panningModel = 'HRTF';
  panner.distanceModel = 'inverse';
  panner.refDistance = 1;
  panner.maxDistance = 10000;
  panner.rolloffFactor = 1;
  panner.coneInnerAngle = 360;
  panner.coneOuterAngle = 0;
  panner.coneOuterGain = 0;

  // 设置声音位置
  panner.setPosition(1, 0, 0);

  source.connect(panner);
  panner.connect(audioContext.destination);
}

这些方法涵盖了从基础播放到高级音频处理的多种场景，可以根据具体需求选择适合的实现方式。