使用HTML5 <audio>标签配合JavaScript是实现基础音频播放器最简单高效的方式，通过调用play()、pause()等方法及监听timeupdate等事件即可完成播放控制与进度同步。
JavaScript 操作音频主要依靠 HTML5 的 <audio> 元素 和 Web Audio API。做简单播放器，用原生 <audio> 标签配合 JS 控制最直接、兼容性好、代码少。
用 <audio> 标签 + JavaScript 实现基础播放器
这是最快上手的方式：页面中放一个 <audio> 元素，用 JS 调用它的方法和监听事件即可控制播放、暂停、音量、进度等。
- 在 HTML 中写：<audio id="player" src="music.mp3" preload="metadata"></audio>（
preload="metadata"表示只预加载时长、封面等信息，不提前下载全部音频） - JS 获取元素：const audio = document.getElementById('player');
- 常用控制方法：
• audio.play() —— 播放（注意：多数浏览器要求用户手势触发，比如点击按钮）
• audio.pause() —— 暂停
• audio.currentTime = 30 —— 跳转到第 30 秒
• audio.volume = 0.7 —— 设置音量（0～1）
• audio.muted = true —— 静音
监听关键事件让播放器有反馈
光能播还不够，用户需要知道是否加载完成、是否在播放、进度如何变化。
-
loadedmetadata：元数据（时长、尺寸等）加载完成，此时
audio.duration才有效 -
timeupdate：播放过程中持续触发（约每 250ms 一次），适合更新进度条：
audio.addEventListener('timeupdate', () => { console.log(audio.currentTime); }); - play / pause：分别在开始播放、暂停时触发，可用来切换按钮文字（如“播放”→“暂停”）
- ended：播放结束自动触发，适合设置自动循环或下一曲
做一个带按钮和进度条的简易播放器
只需几行 HTML + JS 就能跑起来：
立即学习“Java免费学习笔记（深入）”；
- HTML 示例：
<audio id="player" src="song.mp3"></audio>
<button id="playBtn">播放</button>
<input type="range" id="progress" min="0" max="100"> - JS 绑定逻辑：
• 点击按钮调play()或pause()，同时改按钮文字
• 监听timeupdate，把currentTime / duration * 100同步到进度条的value
• 拖动进度条时，把input.value * audio.duration / 100赋给currentTime
什么时候该用 Web Audio API？
如果你的需求超出基础播放——比如实时音效处理（变声、混响）、精确定时播放、多音轨合成、可视化频谱图，那就得用 Web Audio API。它更底层、灵活度高，但学习成本明显上升。普通播放器完全不需要它。
