12

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

我如何对那些定制的按钮进行编码，以便它们都能正常工作？

4

6 回答 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>使用一些 hack。

更新 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：要自定义控件，您可以使用类似这样的东西。

于 2012-04-06T10:11:06.127 回答
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/

于 2012-04-06T10:11:30.307 回答
1

借助W3C Web Audio API ，这是一个使用有效 xHTML和非侵入式 javascript制作可访问音频播放器的解决方案：

该怎么办 ：

  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();

我已经完成了一个名为nanodio的小型 JQuery 插件来测试它。

您可以在我的演示页面上查看它是如何工作的（对不起，文本是法语：p）

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

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

于 2012-11-23T14:02:41.623 回答
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>

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

于 2013-12-30T16:06:30.807 回答
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>
于 2014-11-17T22:31:59.270 回答
0

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

在MDN上：

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

更新：

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

于 2012-04-06T09:44:38.043 回答