当前位置：首页 > JavaScript

js实现音频播放

2026-01-30 15:17:54JavaScript

使用HTML5 Audio元素

在HTML中创建一个<audio>元素，通过JavaScript控制播放。这是最简单且兼容性较好的方法。

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
function playAudio() {
  document.getElementById("myAudio").play();
}

function pauseAudio() {
  document.getElementById("myAudio").pause();
}
</script>

使用Web Audio API

Web Audio API提供更高级的音频处理能力，适合需要复杂音频操作的场景。

js实现音频播放

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

// 加载音频文件
fetch('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(0);
  });

使用第三方库

Howler.js是一个流行的音频库，简化了音频操作并提供了跨浏览器支持。

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script>
const sound = new Howl({
  src: ['audio.mp3']
});

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

// 暂停音频
sound.pause();
</script>

处理移动端自动播放限制

许多移动浏览器禁止自动播放音频，需要用户交互触发。

js实现音频播放

document.body.addEventListener('click', function() {
  const audio = document.getElementById('myAudio');
  audio.play();
}, { once: true });

音频可视化

结合Canvas可以实现音频可视化效果。

const audio = document.getElementById('myAudio');
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(audio);

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

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

// 使用Canvas绘制波形
function draw() {
  requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);
  // 绘制逻辑...
}

音频事件监听

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

const audio = document.getElementById('myAudio');

audio.addEventListener('play', () => {
  console.log('音频开始播放');
});

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

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