在 HTML 音频播放器中切换播放/暂停按钮

Posted 2023-02-25

【中文标题】在 HTML 音频播放器中切换播放/暂停按钮

【英文标题】：Toggle Play / Pause Buttons in HTML Audio Player

【发布时间】：2013-10-30 17:19:23

【问题描述】：

我追求的是一个非常基础的音乐播放器，但是我现在有以下基础；

1) 如何将播放和暂停按钮合二为一？这首先显示为暂停，点击它会切换播放，再次点击它会切换暂停？

2) 还有是否要添加进度计数器？不是条形图，而是数字，即 0.3/4.0min

这里是小提琴：www.jsfiddle.net/tjHhY 这里也是代码：

var audio = new Audio("http://dp0169.free.fr/Musique/Air/Air%20-%20Talkie%20Walkie/02%20Cherry%20Blossom%20Girl.mp3");

$(".play").click(function () 
    audio.play();
)

$(".pause").click(function () 
    audio.pause();
)

【问题讨论】：

播放和暂停按钮也应该由 ID 而不是类引用。 IE。 $("#play").click....<input type="button" id="play" />

【参考方案1】：

我建议您使用 JQueryUI。它有各种各样的小部件来创建干净的界面:)

还可以查看demo，它显示了如何创建切换播放和暂停按钮。

希望对你有帮助。

【参考方案2】：

你为什么不检查这个Demo。希望对你有帮助:)