使用HTML在网站中嵌入媒体播放器

时间:2012-04-06 09:41:04

标签: html embed audio-player

我想要做的是在网站中嵌入音乐文件(在网站上有一些小小的MP3播放器)。我希望观众能够通过使用定制的控制器来播放,停止等歌曲。

如何对这些自定义按钮进行编码,以便它们都能正常工作?

6 个答案:

答案 0 :(得分:28)

你可以使用很多东西。

  • 如果您是标准迷,可以使用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>

jsFiddle here.

注意:我不确定哪些最好,因为我从未使用过()。


更新:正如另一个答案的评论所述,您使用的是XHTML 1.0 Transitional。您可以让<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之类的内容。

答案 1 :(得分:4)

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/

答案 2 :(得分:1)

通过W3C Web Audio API,这是一个使用有效xHTML 和非侵入式javascript制作无障碍音频播放器的解决方案:

怎么做:

  1. 如果浏览器能够阅读,那么我们会显示控件
  2. 如果浏览器无法阅读,我们只需呈现文件链接
  3. 首先,我们检查浏览器是否实现了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();

    我做了一个小小的JQuery插件,我打电话给nanodio进行测试。

    您可以查看my demo page的工作原理(对不起,但文字是法语:p)

    只需点击要播放的链接,然后再次点击即可暂停。如果浏览器可以原生地读取它,它会。如果不能,则应下载该文件。

    这只是一个小例子,但您可以改进它以使用您网页的任何元素作为控制按钮或使用javascript动态生成...无论您想要什么。

答案 3 :(得分:1)

<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>

答案 4 :(得分:0)

如果您使用的是HTML 5,则会有<audio>元素。

MDN上:

  

audio元素用于在HTML或XHTML文档中嵌入声音内容。音频元素是作为HTML5的一部分添加的。


更新

为了在5之前的HTML版本(包括XHTML)中在浏览器中播放音频,您需要使用众多闪存音频播放器之一。

答案 5 :(得分:0)

我发现大多数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>

在我尝试的浏览器中为我工作,但此时我没有一些旧版本。