Question

我想用HTML播放mp3音频文件。我不想用Volume等控件显示整个播放器。我只需要一个播放/暂停按钮，由我设计，而不是某些播放器的核心设计，如雅虎播放器或谷歌播放器。

例如音频将自动播放。单击按钮（可能是图像）时，它将暂停，再次单击该图像时，音频将再次播放。

这里的例子很少：http://www.w3schools.com/html/html_sounds.asp

我可以控制其中任何一个来播放/停止JS代码吗？

Answer 1

您可以使用html5 audio tag。您可以指定自己的播放控件。

<audio preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.wav" /> <!-- fallback if no mp3 support in browser -->
</audio>

这是一个jQuery解决方案。

http://jsfiddle.net/QPW27/109/

这就是你的非jQuery解决方案的样子。

var foo = document.getElementById('player');
foo.pause();  //just bind play/pause to some onclick events on your page
foo.play();

不同的浏览器支持不同的音频格式。您可以指定后备音频版本。截至2011年7月，该网站有一个很好的chart of browser support。

Answer 2

希望在几年内，HTML5 audio API将在更多浏览器中得到支持，但目前，播放声音需要大量特定于浏览器的黑客才能使其正常运行，或者依赖于像flash这样的浏览器插件

与此同时，我推荐使用SoundManager2。使用起来相当容易，并且比自己动手更容易头痛。

Answer 3

Audio.js看起来它具有您正在寻找的播放器样式功能，如果浏览器不支持新的音频API，则会优雅地降级Flash。

Answer 4

您可以使用embed标签播放音频

<!DOCTYPE html>
<html>
<body>

<p><a href="horse.mp3">Play mp3</a></p>
<p><a href="liar.wav">Play wav</a></p>

<script src="http://mediaplayer.yahoo.com/js"></script>

</body>
</html>

以HTML格式播放音频

4 个答案: