HTML5多媒体组件（音频的使用）

必备知识：熟悉 HTML

用户级别：中级

范例文件：HTML5Audio.zip (125 KB)

在这个”使用HTML5组件工作”三部曲的HTML 5多媒体组件（视频的使用）中，我主要讲解了有关用HTML5在网页中嵌入视频的内容。当然，大部分视频中包含了音频，所以如果你想把音频文件嵌入到你的网页中，同样用HTML5能够很容易地实现。

在这篇教程中，我会讲解audio元素，它的属性，以及HTML5能够使用的不同类型的音频文件。许多在第一部分中提及 的视频概念和技术，同样适用于音频。所以如果你已经阅读过第一部分，你会注意到在第二部分中有一些相似之处。如果你还没有读过第一部分，并且你只对 HTML5音频感兴趣，那么这篇文章有你启程所需要的全部知识。

注意: 你可以通过下载和深入研究该示例文件，来研究一些示例代码和文章中所阐述的许多概念。

提供音频文件的支持：两种技术的快速对比

在HTML5出现前，如果你想要在你的网页中嵌入音频文件，必须使用第三方插件，比如Flash Player。

例如，要在你的网页中嵌入一个MP3音频文件，并使它可通过Flash Player使用。你或许要用到以下的代码：

       
 
 
    
        
  
  
  1. 
        
  
  
  2. data="player.swf?audioURL=myAudio.mp3&autoPlay=true" height="27" width="320">   
    3. 
        
  
  
  3.    
    4. 
        
  
  
  4.   
    5.

使用HTML5，你能更加简洁地实现：

       
 
 
    
        
  
  
  1.  
    2.

这些HTML5代码片段和那些为Flash Player提供的更加冗长的代码实现了相同的结果：在网页中嵌入一个能自动播放的音频文件。你可以看到HTML5代码有多么的简单整洁。

音频编解码器

在该系列的第一部分中我谈到了视频编解码器。那同样要介绍许多音频编解码器的思想也不足为奇了。HTML5规范最初也为Ogg Vorbis编解码器受托者提供支持，但来自苹果和诺基亚的挑战使其终止了该支持。如今的浏览器，相比于支持视频编解码器而言，能支持更多的音频编解码 器，所以当你抉择于该使用哪种音频编解码器时，你会有更多的选择：

火狐支持Ogg Vorbis 和 WAV.

Safari支持 MP3, AAC, WAV, 以及 MP4.

Internet Explorer 9 支持 MP3, AAC, 和 MP4.

Opera 支持 Ogg Vorbis 和 WAV.

Chrome支持以上所有格式.

要覆盖所有支持HTML5音频的浏览器，你只能用两种不同的格式服务你的音频：Ogg Vorbis 和MP3。

由于WAV文件格式不能压缩得很好因此文件大小会相当大，不建议使用该格式。

audio元素

正如你所见，audio元素用作在网页中嵌入音频文件。像video元素一样，它有许多的属性，表1中列出了其中的部分属性：

表1. Audio元素属性

属性 描述
src 提供音频文件URL路径
autoplay 表明如果可能，应使音频自动播放
controls 告知浏览器显示其默认的音频控制设置
muted 设置音频的初始状态为muted
（当前一些浏览器不支持该属性）
loop 表明应使音频循环连续播放
(Firefox当前不支持该属性)
preload

暗示浏览器应该怎样尝试预加载音频文件。有三种可用值：

  • none:不执行任何预加载
  • metadata: 只加载视频元数据，例如，持续时间
  • auto: 让浏览器自己决定（这是默认设置）

例如，利用audio元素和它的属性，你可以使用以下代码来嵌入一个MP3音频文件，该文件可在加载时开始播放，拥有默认的控制设置，并能反复循环播放。

       
 
 
    
        
  
  
  1.  
    2.

我必须指出，你的用户可能会相当讨厌该示例。自动播放一个循环音频文件通常被认作是恶劣的因特网规范。

使用source元素

就像我先前提醒的，你需要为音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5的浏览器。如同对视频元素的处理一样，你需要使用source元素来实现该功能。

一个audio元素能包含多种source元素，因此你能为你的音频提供多种格式支持。扩展先前的示例，你可以像下面这样为相同的音频内容指定两种source, Ogg Vorbis和MP3。

       
 
 
    
        
  
  
  1.    
    2. 
        
  
  
  2.    
    3. 
        
  
  
  3.    
    4. 
        
  
  
  4.   
    5.

当浏览器解析音频元素时，它将通过source元素列表循序地查找直到找到一个它能播放的文件格式。一旦找到后，就播放该文件并忽略随后的其它元素。

既然如此，Firefox 和 Opera 会播放 Ogg 文件。 Chrome 也会播放 Ogg 文件, 即使它也能播放MP3文件。 Safari 和 Internet Explorer 9 会播放MP3 文件。

指定编解码器

你也可以指定用来编码音频文件的确切的解码器。这能帮助浏览器决定它是否能播放该内容。由于你常常不知道究竟用什么解码器，只简单地提供类型并让浏览器自己做决定，通常是一个更好的主意。

如果你想引用某解码器，你可以照下面这样做：

       
 
 
    
        
  
  
  1.   
    2. 
        
  
  
  2.   
    3. 
        
  
  
  3.   
    4.

注意解码器是如何添加到type属性中去的，特别要注意用到的引号，以及type和codec之间用分号隔开了。像指定视频解码器那样，这里很容易犯下会使音频不播放的格式化错误。因此，如果你要明确地指定解码器，一定要注意语法问题。

回归传统

并不是每个人都使用支持HTML5的浏览器。例如，Internet Explorer的老版本（IE8或者更低）仍然相当流行。

为了支持正在用这些浏览器的用户，你需要使用一个第三方插件比如Flash Player来嵌入音频文件。正如在HTML5和本地多媒体到来前你需要做的那样。

浏览器会无视它们不理解的信息，所以你的HTML5音频和source元素会被例如IE8这样的旧版浏览器完全忽略。举例来说，你可能会使用以下代码来给音频文件添加链接：

       
 
 
    
        
  
  
  1.    
    2. 
        
  
  
  2.    
    3. 
        
  
  
  3.    
    4. 
        
  
  
  4. Download the audio file   
    5. 
        
  
  
  5.   
    6.

旧版浏览器会简单的显示“Download the audio file”链接，而忽视其它内容。

要通过FlashPlayer添加fallback支持（和添加下载链接一样），你需要使用以下代码：

       
 
 
    
        
  
  
  1.    
    2. 
        
  
  
  2.    
    3. 
        
  
  
  3.    
    4. 
        
  
  
  4.   
    5. 
        
  
  
  5.    
    6. 
        
  
  
  6.    
    7. 
        
  
  
  7. Download the audio file   
    8. 
        
  
  
  8.   
    9.

旧版浏览器会显示Flash Player和下载链接，因此用户可以选择怎样访问音频。如果用户没有安装Flash player，他们仍然可以通过下载链接访问到你的音频。注意，你可以使用与Flash Player相同的MP3音频文件，因为它完全有能力播放MP3文件。

数字版权管理

正如我在第一部分中提醒的，HTML5当前不支持数字版权管理（DRM）。因此，如果你不想让用户下载你的音频文件，那么对你而言，或许HTML5音频不是一个正确的解决方案。HTML5会暴露你的音频文件链接，所以它们是公开地提供给用户访问的内容。

目前还没有方法阻止用户下载HTML5音频内容，虽然将来可能会有这样的方法。要获得更多有关HTML5和DRM的信息，请参阅W3C’s HTML FAQs on this topic。（这是一个有关HTML5视频的讨论，但其概念同样适用于音频内容）。

下一步阅读方向

如你所见，使用HTML5在你的网站中加入音频是很简单的。你确实需要意识到一些浏览器是不支持HTML5的，因此一定要提供一个备用机制，以确保所有用户都可以访问到你的音频内容。

同样记牢，任何你通过HTML5服务的音频文件也能被任何人下载使用。因此，如果你想避免你的文件被下载及分享，那么HTML5音频并不适合你。

责任编辑：张伟
来源： HTML5China HTML5

当前题目：HTML5多媒体组件（音频的使用）
URL分享：http://www.shufengxianlan.com/qtweb/news26/476726.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制开发知识

分类信息网

安卓开发　　 　手机APP开发　　 　光华服务器托管　　 　温江做网站　　 　手机网站建设　　 　成都微信开发　　 　手机网站建设套餐　　 　移动手机网站制作　　 　成都网络推广　　 　移动服务器托管　　 　大英网站建设　　 　成都西信服务器托管　　 　教育建设方案　　 　成都装饰装修　　 　重庆网站建设网络公司　　 　成都茶叶销售　　 　成都网站设计公司　　 　广汉做网站　　 　成都发电机维修　　 　重庆机房托管