建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

HTML5多媒体组件的使用——第二部分:音频

更新时间:2017-04-12整理编辑:建站学习网阅读:0

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

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

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

 

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

 

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

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

 

 

	
  1. <object type="application/x-shockwave-flash"  
  2. data="player.swf?audioURL=myAudio.mp3&autoPlay=true" height="27" width="320">  
  3. <param name="movie" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">  
  4. </object> 

 

使用HTML5,你能更加简洁地实现:

 

 

	
  1. <audio src="myAudio.mp3" controls autoplay></audio> 

 

这些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. <audio src="myAudio.mp3" autoplay controls loop></audio> 

 

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

 

使用source元素

 

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

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

 

 

	
  1. <audio autoplay controls>  
  2. <source src="myAudio.ogg" type="audio/ogg">  
  3. <source src="myAudio.mp3" type="audio/mp3">  
  4. </audio> 

 

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

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

 

指定编解码器

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

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

 

 

	
  1. <audio autoplay controls> 
  2. <source src="myAudio.ogg" type='audio/ogg; codec="vorbis"'> 
  3. </audio> 

 

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

 

回归传统

 

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

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

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

 

 

	
  1. <audio autoplay controls>  
  2. <source src="myAudio.ogg" type="audio/ogg">  
  3. <source src="myAudio.mp3" type="audio/mp3">  
  4. <a href="myAudio.mp3">Download the audio file</a>  
  5. </audio> 

 

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

要通过FlashPlayer添加fallback支持(和添加下载链接一样),你需要使用以下代码:

 

 

	
  1. <audio autoplay controls>  
  2. <source src="myAudio.ogg" type="audio/ogg">  
  3. <source src="myAudio.mp3" type="audio/mp3">  
  4. <object type="application/x-shockwave-flash" data="player.swf?audioUrl=myAudio.mp3&autoPlay=true"> 
  5. <param name="movie" value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">  
  6. </object>  
  7. <a href="myAudio.mp3">Download the audio file</a>  
  8. </audio> 

 

旧版浏览器会显示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音频并不适合你。

本系列的第三部分,小编会介绍HTML5多媒体元素的自定义控制。

本文网址:https://www.dedexuexi.com/wysj/html5/2831.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
HTML网页基本组成概述
« 上一篇2017年04月12日
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2017年04月12日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录