javascript如何操作音频_怎样创建简单的音频播放器-js教程-PHP中文网

javascript如何操作音频_怎样创建简单的音频播放器

狼影

发布： 2025-12-20 10:29:02

原创

331人浏览过

使用HTML5 标签配合JavaScript是实现基础音频播放器最简单高效的方式，通过调用play()、pause()等方法及监听timeupdate等事件即可完成播放控制与进度同步。

javascript如何操作音频_怎样创建简单的音频播放器

JavaScript 操作音频主要依靠 HTML5 的 和 Web Audio API。做简单播放器，用原生

这是最快上手的方式：页面中放一个

光能播还不够，用户需要知道是否加载完成、是否在播放、进度如何变化。

loadedmetadata：元数据（时长、尺寸等）加载完成，此时 audio.duration 才有效
timeupdate：播放过程中持续触发（约每 250ms 一次），适合更新进度条：
audio.addEventListener('timeupdate', () => { console.log(audio.currentTime); });
play / pause：分别在开始播放、暂停时触发，可用来切换按钮文字（如“播放”→“暂停”）
ended：播放结束自动触发，适合设置自动循环或下一曲

只需几行 HTML + JS 就能跑起来：

西语写作助手

西语助手旗下的AI智能写作平台，支持西语语法纠错润色、论文批改写作

HTML 示例：
JS 绑定逻辑：
• 点击按钮调 play() 或 pause()，同时改按钮文字
• 监听 timeupdate，把 currentTime / duration * 100 同步到进度条的 value
• 拖动进度条时，把 input.value * audio.duration / 100 赋给 currentTime