使用 javascript onClick 播放 mp3 文件

Posted

技术标签:

【中文标题】使用 javascript onClick 播放 mp3 文件【英文标题】:Play mp3 file with javascript onClick 【发布时间】:2012-05-26 13:10:59 【问题描述】:

我正在播放 mp3 文件只是 javascript onClick。

下面是我的代码:

//Music File 1
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>

//Music File 2
<audio id="id2" src="02.mp3"></audio>
<button onClick="document.getElementById("id2").play()">Play</button>
<button onClick="document.getElementById("id2").pause()">Stop</button>

我的问题是,我正在播放音乐 01.mp3,如果我在音乐 02.mp3 上按下播放按钮,我希望它停止播放。

谁能给我一个比这更好的解决方案?总而言之,我想像 www.mp3skull.com 那样播放音乐,如果按其他文件播放则停止播放。

问候, 维拉克

【问题讨论】:

【参考方案1】:

除了标签错误(假设这只是本文中的一个错字),如果您想要一个更好的 Javascript 音频播放器,请查看http://jplayer.org/ - 它是一个开源、免费的播放器 API。

播放器可用的方法之一,.pauseOthers() 会暂停页面上除您运行该方法的播放器之外的所有播放器 - 在您的情况下很有用。

【讨论】:

【参考方案2】:

您遇到了 html/javascript 语法错误:

<button onClick="document.getElementById("id2").play()">Play</button>
                ^                        ^   ^        ^
                1                        2   3        4

quote #2 关闭引用 #1,因此您的 id2 在 onclick 之外,并且是按钮标签的一部分。 3 和 4 同上。将内引号改为 'id2'

【讨论】:

以上是关于使用 javascript onClick 播放 mp3 文件的主要内容,如果未能解决你的问题,请参考以下文章

按顺序播放多个音频文件(Javascript)

单击视频时,如何使用 Javascript 切换多个视频的播放/暂停?

在同一个 Img 上使用 onclick 播放和暂停

iDevice onclick 不使用当前代码播放视频

Youtube API - onclick 播放视频 - 跨浏览器

使用媒体播放器或声音池在片段内的 onClick 中播放声音