logo标签列表

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

htmlembedaudio-player
12
我想做的是在网站中嵌入音乐文件（类似于小型 mp3 播放器）。我希望听众能够使用自定义控制器播放、停止等歌曲。如何编写这些自定义按钮的代码，以便它们都能正常工作？
6个回答
29

您可以使用很多东西。

  • 如果您是标准控，可以使用HTML5的<audio>标签：

这里是官方的W3C音频标签规范。

用法：

<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在这里。

注意：我不确定哪些才是最好的，因为我从未使用过其中之一（至今）。

更新：如另一个答案的评论中所提到的，您正在使用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);

这是我对另一个问题的回答。

更新 3：若要自定义控件，请使用类似这样的方法。

你知道我怎么可以自定义控制器按钮吗？附言：我觉得“MP3播放器”这个名字比“网站音乐播放器”无聊多了 :-P - Vetaxili
1
@Vetaxili 这个问题可能会对你有所帮助：https://dev59.com/_Wsz5IYBdhLWcg3w0rRC - Anish Gupta
我相信你的答案是我正在寻找并且会起作用的。我现在必须出门，但我一定会让你知道它是否解决了我的问题。 :-) - Vetaxili
@Vetaxili 哪种方法有效？ - Anish Gupta
更新2可能完全符合标准，但在Chrome中无法播放。 - quillbreaker
@AnishGupta 你不知道，但你拯救了很多人的生命。 - Nagri
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的四月开发比赛就是关于这个元素的，所以这可能会提供大量关于如何充分利用这个元素的优秀示例： http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/
1
如果您想自定义播放器的控件，可以查看如何进行操作的说明此处。 - txominpelu
1

这里有一个解决方案，可以使用有效的xHTML和非侵入式JavaScript来制作可访问的音频播放器，感谢W3C Web Audio API：

该怎么做：

  1. 如果浏览器能够读取，则显示控件
  2. 如果浏览器无法读取，则只呈现文件链接

首先，我们检查浏览器是否实现了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来测试它。

您可以在我的演示页面上检查它的工作方式（抱歉，但文本是法语:p）

只需单击链接播放，再次单击暂停。如果浏览器可以本地读取它，它将会播放。如果不能，则应下载文件。

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

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>
1
我发现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>

在我尝试的浏览器中可以使用，但此时我没有一些旧版本的浏览器。
0
如果您正在使用HTML 5，则有<audio>元素。
在MDN上：

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

更新：

为了在 HTML 5 之前的版本（包括 XHTML）中在浏览器中播放音频，您需要使用众多的 Flash 音频播放器之一。

抱歉，我忘了提到。我必须使用XHTML 1.0 Transitional。你知道我该如何编写控制器吗？这样自定义的控制器就可以代替默认的控制器了吗？ - Vetaxili
@Vetaxili - 微小的细节，嗯？请“编辑”您的问题并添加此细节。 - Oded
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接