当前位置：首页 > JavaScript

js实现音乐

2026-04-06 14:52:31JavaScript

使用Web Audio API播放音乐

Web Audio API是浏览器原生支持的音频处理接口，适合需要精细控制音频的场景（如音效、可视化等）。

基础播放示例：

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

// 加载音频文件
fetch('music.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); // 立即播放
  });

关键功能扩展：

控制播放/暂停：通过audioContext.suspend()和audioContext.resume()管理状态。
音量调节：添加GainNode节点控制音量。
可视化：通过AnalyserNode获取音频数据，结合Canvas绘制频谱。

使用HTML5 `<audio>`标签

适合简单播放需求，无需复杂控制，兼容性更好。

基础实现：

<audio id="player" controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<script>
  const player = document.getElementById('player');
  player.play(); // 程序触发播放
</script>

常用操作：

循环播放：设置loop属性为true。
事件监听：通过ended、timeupdate等事件实现交互逻辑。
自定义UI：隐藏原生控件（controls），通过JavaScript自定义按钮。

第三方库推荐

若需高级功能（如歌词同步、多轨混音），可考虑以下库：

js实现音乐

Howler.js：轻量级，支持Web Audio和HTML5回退，提供跨浏览器兼容性。
```
const sound = new Howl({ src: ['music.mp3'] });
sound.play();
```
Tone.js：专注于音乐创作，支持合成器、节拍器等专业功能。