【发布时间】：2012-04-19 23:13:15
【问题描述】：
我想做的是在网站中嵌入音乐文件（在网站上有一些小 mp3 播放器）。我希望观众能够通过使用定制的控制器来播放、停止等歌曲。
如何对这些自定义按钮进行编码以使它们都能正常工作？
【问题讨论】：
标签： html embed audio-player
【发布时间】：2012-04-19 23:13:15
【问题描述】：
如果您使用的是 HTML 5，则有 <audio> 元素。
开启MDN：
audio元素用于在 HTML 或 XHTML 文档中嵌入声音内容。音频元素是作为 HTML5 的一部分添加的。
更新：
为了在 5 之前的 HTML 版本（包括 XHTML）的浏览器中播放音频，您需要使用众多 flash 音频播放器之一。
【讨论】：
-
对不起，我忘了提。我必须使用 XHTML 1.0 过渡。你知道我将如何编写控制器代码吗？这样可以使用自定义的而不是默认的吗？
-
@Vetaxili - 小细节，嗯？请编辑您的问题并添加此详细信息。
你可以使用很多东西。
- 如果您是标准迷，可以使用 HTML5
<audio>标签：
Here is the official W3C specification for the audio tag.
用法：
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
type='audio/mp4'>
<!-- The next two lines are only executed if the browser doesn't support MP4 files -->
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
type='audio/ogg; codecs=vorbis'>
<!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
-
或者，如果你想支持老版本的浏览器，可以使用many of the free audio flash players available.如：
- Dewplayer
- MP3 Player（无聊的名字……对吧？:)）
- Website Music Player（更无聊……对吧？）
- Zanorg Player
注意：我不确定哪些是最好的，因为我从未使用过（还）。
更新： 正如另一个答案的评论中提到的，您使用的是 XHTML 1.0 过渡。您也许可以让<audio> 进行一些黑客攻击。
更新 2：我刚刚想起了另一种播放音频的方法。这将在 XHTML 中工作！！！这完全符合标准。
你使用这个 JavaScript：
var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);
This is my answer to another question.
更新 3：要自定义控件，您可以使用 this 之类的东西。
【讨论】：
-
您知道如何自定义控制器按钮吗？附言我认为“MP3 播放器”的名称比“网站音乐播放器”更无聊：-P
-
@Vetaxili 这个问题可能对你有帮助：stackoverflow.com/questions/7638754/…
-
我相信您的答案是我正在寻找的答案，并且会奏效。我现在必须出去，但我一定会让你知道它是否解决了我的问题。 :-)
-
@Vetaxili 哪种方法有效？
-
Update 2 可能完全符合标准，无论其价值如何，但它无法在 Chrome 中运行。
HTML5 元素无疑是要走的路。在几乎所有浏览器的最新版本中至少有基本的支持：
http://caniuse.com/#feat=audio
它允许指定当浏览器不支持该元素时要做什么。例如，您可以通过以下方式添加指向文件的链接：
<audio controls src="intro.mp3">
<a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>
您可以在以下链接中找到此示例以及有关音频元素的更多信息：
http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/
最后，好消息是 Mozilla 的 April's dev Derby 就是关于这个元素的，所以这可能会提供大量很好的例子来说明如何充分利用这个元素：
http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/
【讨论】：
-
如果您想自定义播放器的控件，您可以查看有关如何操作的说明here
感谢W3C Web Audio API，这是一个使用有效的xHTML和非侵入式javascript制作可访问的音频播放器的解决方案：
做什么：
- 如果浏览器能够读取，则显示控件
- 如果浏览器无法读取，我们只需渲染文件的链接
首先，我们检查浏览器是否实现了Web Audio API：
if (typeof Audio === 'undefined') {
// abort
}
然后我们实例化一个Audio 对象：
var player = new Audio('mysong.ogg');
然后我们可以检查浏览器是否能够解码这种类型的文件：
if(!player.canPlayType('audio/ogg')) {
// abort
}
或者即使它可以播放编解码器：
if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
// abort
}
那么我们可以使用player.play(),player.pause();
我已经完成了一个名为 nanodio 的小型 JQuery 插件来测试它。
您可以在my demo page 上查看它的工作原理（抱歉，文本是法语：p）
只需单击一个链接即可播放，再次单击可暂停。如果浏览器可以本地读取它，它会。如果不能，它应该下载文件。
这只是一个小例子，但您可以改进它以将页面的任何元素用作控制按钮或使用 javascript 即时生成...随您的便。
【讨论】：
我发现 IE 或 Chrome 中的大多数都卡住了，或者它们需要外部库。我只是想播放 MP3，发现 http://www.w3schools.com/html/html_sounds.asp 页面很有帮助。
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<embed height="50" width="100" src="horse.mp3">
</audio>
在我尝试过的浏览器中为我工作，但当时我没有一些旧的。
【讨论】：
<html>
<head>
<H1>
Automatically play music files on your website when a page loads
</H1>
</head>
<body>
<embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0">
</embed>
</body>
</html>
【讨论】：