如何在网站中嵌入音频？

Question

我一直在寻找答案,我似乎无法找到我需要的东西.

我从未编写任何与音频内容相关的内容.

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

如何编写这些自定义按钮以使它们都正常工作？

我只需要编写HTML和CSS代码(php,java等留给其他人).为了在模板上创建此功能,您建议我做什么？

谢谢=)

PS

我必须使用XHTML 1.0 Transitional

Answer 1

你可以使用很多东西.

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

• 或者,如果您想支持旧版浏览器,您可以使用许多免费的音频闪存播放器.如:

  • Dewplayer
  • MP3播放器(无聊的名字......对吧？:))
  • 网站音乐播放器(更无聊......对吧？)
  • Zanorg球员

注意:我不确定哪个是最好的,因为我从未使用过(还有).

更新:如另一个答案的评论所述,您正在使用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:要自定义的控件,您可以使用像这样.