html5音频的相关实例介绍

HTML5 提供了播放音频文件的标准。

 <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
            src="http://demo.mimvp测试数据/html5/take_you_fly.mp3">
      你的浏览器不支持audio标签
</audio> 

<audio controls>
    <source src=”http://demo.mimvp测试数据/html5/take_you_fly.ogg” />
    <source src=”http://demo.mimvp测试数据/html5/take_you_fly.mp3″ />
    <source src=”http://demo.mimvp测试数据/html5/take_you_fly.wav” />
</audio> 

无论访问者使用什么浏览器，它都将自动选择所读取的第一个文件类型，并为您播放声音。

浏览器音频控件：没有两个是完全相同的

一旦您决定要在网站上提供音频，将面临一个有趣的设计选择。每个浏览器都有与众不同的外观，看起来像是有意识地故意使其与众不同。下面的图 1 展示了这些浏览器控件的外观。

图1：不同浏览器上的音频控件

除了 Chrome 浏览器外，所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件，还显示声音文件的总秒数。使用HTML5 标准和浏览器支持，开发人员可以相信用户将拥有与 HTML5 音频类似的体验，因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件，但是对于不同的用户，体验可能会有所不同。

某些浏览器（如 IE9）甚至有自己的声音控制条，在浏览器本身之外运行。用户打开有声音的任何网站时，他们可以从 Windows 任务栏控制声音，并能够预览当前正在播放的声音。

html代码(隐藏播放控件)

 <audio autoplay="autoplay">
<source src="demo.mimvp测试数据/html5/take_you_fly.mp3" type="audio/mpeg">
</audio> 

代码演示(隐藏播放控件)

 <audio autoplay="autoplay" controls="controls">
<source src="demo.mimvp测试数据/html5/take_you_fly.mp3" type="audio/mpeg">
</audio> 

以上就是html5音频的相关实例介绍的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于html5音频的相关实例介绍的详细内容...