当前位置：首页 > JavaScript

js实现音频播放

2026-03-01 06:21:43JavaScript

使用HTML5 Audio API播放音频

HTML5提供了<audio>元素和对应的JavaScript API，可以直接在网页中播放音频文件。以下是基本实现方法：

// 创建Audio对象
const audio = new Audio('path/to/audio.mp3');

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

// 暂停音频
audio.pause();

// 设置音量（0-1）
audio.volume = 0.5;

// 跳转到特定时间（秒）
audio.currentTime = 30;

监听音频事件

可以监听各种音频事件来实现更复杂的交互：

audio.addEventListener('loadeddata', () => {
  console.log('音频已加载');
});

audio.addEventListener('ended', () => {
  console.log('播放结束');
});

audio.addEventListener('timeupdate', () => {
  console.log('当前播放位置:', audio.currentTime);
});

使用Web Audio API处理音频

对于更高级的音频处理，可以使用Web Audio API：

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

// 加载音频文件
fetch('path/to/audio.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    // 创建音频源节点
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;

    // 连接到输出
    source.connect(audioContext.destination);

    // 开始播放
    source.start();
  });

实现播放列表

创建一个简单的音频播放列表：

const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;
const audio = new Audio();

function playTrack(index) {
  audio.src = playlist[index];
  audio.play();
}

audio.addEventListener('ended', () => {
  currentTrack = (currentTrack + 1) % playlist.length;
  playTrack(currentTrack);
});

// 开始播放第一首
playTrack(0);

添加可视化效果

结合Canvas实现音频可视化：

const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');
const audioContext = new AudioContext();
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.clearRect(0, 0, canvas.width, canvas.height);
  const barWidth = canvas.width / bufferLength;

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

draw();

跨浏览器兼容性处理

不同浏览器对音频API的支持可能不同，需要做兼容处理：

// 检测浏览器是否支持Web Audio API
if (!window.AudioContext && !window.webkitAudioContext) {
  alert('您的浏览器不支持Web Audio API');
}

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

这些方法涵盖了从基础到进阶的JavaScript音频播放实现，可以根据具体需求选择合适的方案。

js实现音频播放