如何用JavaScript实现一个音乐播放器_如何控制音频播放和时间轴？

JavaScript原生实现音乐播放器需控制audio元素：1.点击按钮切换播放/暂停；2.拖动进度条实时跳转时间；3.监听timeupdate更新UI；4.监听loadedmetadata确保元数据加载后设置duration；5.格式化时间显示为mm:ss。

用 JavaScript 实现一个基础音乐播放器，核心是控制 <audio></audio> 元素的行为——播放/暂停、跳转时间、监听进度、同步时间轴 UI。不需要框架，原生 API 就够用，关键是理清几个关键点。

1. 搭建音频容器和基础控制按钮

先在 HTML 中放一个 <audio></audio> 标签（可隐藏）和几个按钮 + 进度条：

<audio id="player" src="song.mp3"></audio>
<button id="playBtn">播放</button>
<input type="range" id="progress" min="0" max="100">
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>

登录后复制

JavaScript 里获取元素并绑定点击事件：

const audio = document.getElementById('player');
const playBtn = document.getElementById('playBtn');
const progress = document.getElementById('progress');
<p>playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(e => console.warn('播放被阻止：', e));
} else {
audio.pause();
}
});

登录后复制

注意：audio.play() 可能被浏览器静音策略拒绝（尤其自动调用），务必由用户手势（如 click）触发。

立即学习“Java免费学习笔记（深入）”；

2. 控制播放时间与拖动进度条

要让进度条拖动时跳转到对应时间，需把 input[type="range"] 的值映射为秒数：

• 监听 progress 的 input 事件（实时拖动），而非 change（松手才触发）
• 用 audio.duration 计算目标时间：audio.currentTime = progress.value / 100 * audio.duration
• 确保 audio.duration 已加载完成（监听 loadedmetadata 或检查是否为有限值）

示例代码：

标签： javascript java html 浏览器 音乐 音乐播放器 点击事件