使用 HTML 在网站中嵌入媒体播放器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10041723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Embedding a media player in a website using HTML
提问by Vetaxili
What I want to do is to embed music files within a website (Have something a'la little mp3 player on the site). I want the audience to be able to play, stop etc the songs by using custom made controllers.
我想要做的是在网站中嵌入音乐文件（网站上有一些小 mp3 播放器）。我希望观众能够使用定制的控制器播放、停止等歌曲。
How do I code those custom made buttons so that they all work fine?
我如何编码那些定制的按钮，以便它们都能正常工作？
回答by Anish Gupta
You can use plenty of things.
你可以使用很多东西。
- If you're a standards junkie, you can use the HTML5
<audio>tag:
- 如果您是标准迷，您可以使用 HTML5
<audio>标签：
Here is the official W3C specification for the audio tag.
Usage:
用法：
<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>
Or, if you want to support older browsers, you can use many of the free audio flash players available.Such as:
- Dewplayer
- MP3 Player(boring name... right? :) )
- Website Music Player(even more boring... right?)
- Zanorg Player
或者，如果您想支持较旧的浏览器，您可以使用许多可用的免费音频 Flash 播放器。如：
Note:I'm not sure which are the bestones, as I have never used one (yet).
注意：我不确定哪些是最好的，因为我从未使用过（还）。
UPDATE:As mentioned in another answer's comment, you are using XHTML 1.0 Transitional. You might be able to get <audio>to work with some hack.
更新：如另一个答案的评论中所述，您使用的是 XHTML 1.0 Transitional。您也许可以开始<audio>使用一些 hack。
UPDATE 2:I just remembered another way to do play audio. This willwork in XHTML!!! This is fully standards-compliant.
更新 2：我只记得另一种播放音频的方法。这将在 XHTML 中工作！！！这完全符合标准。
You use this JavaScript:
你使用这个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.
UPDATE 3:To customise the controls, you can use something like this.
更新 3：要自定义控件，您可以使用类似这样的东西。
回答by txominpelu
Definitely the HTML5 element is the way to go. There's at least basic support for it in the most recent versions of almost all browsers:
毫无疑问，HTML5 元素是要走的路。在几乎所有浏览器的最新版本中，至少有基本的支持：
http://caniuse.com/#feat=audio
http://caniuse.com/#feat=audio
And it allows to specify what to do when the element is not supported by the browser. For example you could add a link to a file by doing:
它允许指定当浏览器不支持元素时要做什么。例如，您可以通过执行以下操作添加指向文件的链接：
<audio controls src="intro.mp3">
<a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>
You can find this examples and more information about the audio element in the following link:
您可以在以下链接中找到此示例以及有关音频元素的更多信息：
http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/
http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/
Finally, the good news are that mozilla's April's dev Derby is about this element so that's probably going to provide loads of great examples of how to make the most out of this element:
最后，好消息是 mozilla 4 月的 dev Derby 是关于这个元素的，所以它可能会提供大量关于如何充分利用这个元素的很好的例子：
http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/
http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/
回答by Charles-édouard Coste
Here is a solution to make an accessible audio player with valid xHTMLand non-intrusive javascript thanks to W3C Web Audio API:
由于W3C Web Audio API，这是一个使用有效 xHTML和非侵入式 javascript制作可访问音频播放器的解决方案：
What to do :
该怎么办 ：
- If the browser is able to read, then we display controls
- If the browser is not able to read, we just render a link to the file
- 如果浏览器能够读取，那么我们显示控件
- 如果浏览器无法读取，我们只需呈现文件的链接
First of all, we check if the browser implements Web Audio API:
首先，我们检查浏览器是否实现了 Web Audio API：
if (typeof Audio === 'undefined') {
// abort
}
Then we instanciate an Audioobject:
然后我们实例化一个Audio对象：
var player = new Audio('mysong.ogg');
Then we can check if the browser is able to decode this type of file :
然后我们可以检查浏览器是否能够解码这种类型的文件：
if(!player.canPlayType('audio/ogg')) {
// abort
}
Or even if it can play the codec :
或者即使它可以播放编解码器：
if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
// abort
}
Then we can use player.play(), player.pause();
然后我们可以使用player.play(), player.pause();
I have done a tiny JQuery plugin that I called nanodioto test this.
我做了一个名为nanodio的小型 JQuery 插件来测试这个。
You can check how it works on my demo page(sorry, but text is in french :p )
你可以在我的演示页面上查看它是如何工作的（对不起，但文本是法语 :p ）
Just click on a link to play, and click again to pause. If the browser can read it natively, it will. If it can't, it should download the file.
只需单击链接即可播放，再次单击可暂停。如果浏览器可以本机读取它，它会。如果不能，它应该下载文件。
This is just a little example, but you can improve it to use any element of your page as a control button or generate ones on the fly with javascript... Whatever you want.
这只是一个小例子，但您可以改进它，将页面的任何元素用作控制按钮，或使用 javascript 即时生成……任何您想要的。
回答by Karl Henselin
I found the that either IE or Chrome choked on most of these, or they required external libraries. I just wanted to play an MP3, and I found the page http://www.w3schools.com/html/html_sounds.aspvery helpful.
我发现 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>
Worked for me in the browsers I tried, but I didn't have some of the old ones around at this time.
在我尝试过的浏览器中为我工作，但此时我没有一些旧的浏览器。
回答by Qais Yousuf
<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>
回答by Oded
If you are using HTML 5, there is the <audio>element.
如果您使用的是 HTML 5，则有<audio>元素。
On MDN:
在MDN 上：
The
audioelement is used to embed sound content in an HTML or XHTML document. The audio element was added as part of HTML5.
该
audio元素用于在 HTML 或 XHTML 文档中嵌入声音内容。音频元素是作为 HTML5 的一部分添加的。
Update:
更新：
In order to play audio in the browser in HTML versions before 5 (including XHTML), you need to use one of the many flash audio players.
为了在浏览器中播放 5 之前的 HTML 版本（包括 XHTML）中的音频，您需要使用众多 Flash 音频播放器之一。
