UDN-企业互联网技术人气社区

板块导航

浏览  : 1193
回复  : 4

[HTML5] HTML5音频:嵌入简单的声音提示技巧

[复制链接]
友美的小妹的头像 楼主
发表于 2015-7-24 14:07:48 | 显示全部楼层 |阅读模式
本帖最后由 友美的小妹 于 2015-8-10 20:06 编辑

了解如何使用HTML音频元素嵌入在网页中的声音容易。在本教程中都包含大量的代码示例。


截至目前,在Web浏览器中的音频播放一直是位一个黑色的艺术。传统上,有几种方法可以嵌入在网页中的声音 -一些比别人更好的工作,和许多人只工作,如果你碰巧使用正确的浏览器,用正确的插件。


无处不在的Flash插件已经在很大程度上帮助,因为Flash可以很容易地嵌入音频的方式,与大多数浏览器。然而,这并不能帮助iPhone和iPad不支持Flash的浏览器,如Safari。


总之,这是一个有点乱。


幸运的是,HTML5看起来使生活更容易为我们的开发人员,由于其音频元素。这个元素可以让你在网页中嵌入音频文件,以及控制播放的声音使用JavaScript。更重要的是,它并不需要任何插件工作,并支持几乎所有现代的Web浏览器。(我们会回来的浏览器支持!)


在本教程中,我将向您展示如何在一个页面中的音频元素嵌入声音。我们也来看看如何触发和停止通过JavaScript的音频,以及如何确保我们的音频可以播放许多Web浏览器可能。


HTML5 音频元素


基本的音频元素是很容易使用。由于这是本赛季是快乐的-和欧洲超过其公平份额的雪-让我们的嵌入短的MP3片段的平克劳斯贝的“白色圣诞”



  1. <audio src="WhiteChristmas.mp3"> </audio> //www.heatpress123.net
复制代码


没有太多的解释,需要在这里!,就像<IMG>标签可以让你在一个页面中包括一个图像文件,<AUDIO>标签包括一个音频文件。


跨浏览器支持


虽然简单,但是上面的例子中,它在许多浏览器将无法正常工作。这是音频文件格式热转印机器。


有些浏览器可以播放MP3文件,但不OGG文件,而其他浏览器可以播放OGG格式的文件,但没有。MP3。大多数浏览器都可以播放WAV文件,WAV文件被解压缩,导致大文件的大小,这是不切实际的短音频片段以外的任何东西。


以下简要介绍了当前的浏览器支持多种音频格式:



浏览器。MP3。OGG的。wav
火狐4没有
Safari 5的没有
Chrome 8的
Opera 11没有
IE9没有


您的浏览器支持哪些音频格式。


从表中可以看到,唯一可行的方法,提供跨浏览器支持音频播放服务的浏览器,可以播放MP3文件,和OGG文件到其他。


要做到这一点,你可以添加多个的<source>元素的<AUDIO>元素指定相同的多种格式的声音文件。然后,浏览器会玩的第一个文件,它能够播放。下面是一个例子:


  1. <AUDIO>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg">
复制代码


当然,这并不意味着你需要创建。MP3和OGG版本的声音文件(如Audacity的工具是方便),但它会给你良好的跨浏览器支持。



旧版本的Internet Explorer -也就是版本7和8 -甚至不支持的音频元素。但是,我们将看看如何支持这些浏览器在本文的后面。


自动播放声音


虽然上面的代码中嵌入的声音文件,它并没有真正发挥它,所以它没有多大用处,对自己的。如果我们想在页面加载时自动播放声音,然后我们就可以添加一个自动播放属性的元素:



  1. <audio autoplay>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg">
复制代码


虽然自动播放有时可能是有用的,也可以是恼人的声音或音乐开始播放,只要你查看的页面。一个更好的方法是将控件添加到音频元素,使用户可以启动和停止自己的音频:



  1. <audio controls>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>
复制代码


通常情况下,这增加了水平控制栏播放/暂停按钮,可拖动播放头一个时间表,以及音量控制,就像你看到了YouTube视频底部。



这是值得铭记的控件将看 - 而且有时表现 - 在每个浏览器不同。例如,有没有在iPhone上的音量控制,因为用户可以只使用硬件音量按钮。



循环播放


添加的循环属性的<AUDIO>标签的导致要播放的音频不休:



  1. <audio loop>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>
复制代码


这可能是有用的事情,比如在游戏中的背景音乐和声音效果。


预载提示


您可以选择使用的预紧属性,浏览器提示是否,以及如何,它应该在页面加载时预加载的音频文件。预加载的音频文件,当用户点击“播放”按钮,这是一个更好的用户体验,它可以起到瞬间。



此属性的值是:



没有预加载的音频文件,浏览器不应该打扰。使用此设置时,你不要指望大多数用户来说,或当你想保护你的服务器的带宽尽可能多的音频播放。元数据这是没有,除非你告诉浏览器这是确定加载的音频文件的元数据,如它的持续时间。不过,浏览器未预装实际的音频数据。汽车这是OK为预加载整个音频文件的浏览器,如果它想。


例如:



  1. <audio preload="metadata">   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>
复制代码


请记住,预紧只是一个提示。浏览器可以选择忽略它,做它想做的事情!


用JavaScript的播放控制


关于HTML5的音频元素的好东西之一是,他们很容易控制使用JavaScript。音频元素提供了许多有用的属性和方法-这里有几个:


play()在当前播放位置开始播放pause()暂停播放,如果当前正在播放的声音canPlayType(类型)确定浏览器可以播放特定的媒体类型或不 duration声音片段的长度,在几秒钟内currentTime当前播放位置,在几秒钟内。您也可以将此属性设置为移动播放位置。


使用上述的一些属性和方法,我们可以创建一些基本的按钮来播放,暂停,停止我们的音乐:



  1. <audio id="myTune">    <source src="WhiteChristmas.mp3">    <source src="WhiteChristmas.ogg">  </audio>  <button>Play Music</button>  <button>Pause Music</button>  <button>Stop Music</button>支持较旧版本的Internet Explorer
复制代码


到目前为止,我们已经假定我们的用户的浏览器支持HTML5 音频元素。可悲的是,Internet Explorer 7和8不!(IE9的,令人欣慰的。)这将是很好的为这些用户使用IE7或IE8提供某种回退。



一个简单但有效的方式做到这一点是使用条件的意见,挑出这些浏览器,并提出他们的声音文件指向的对象元素。然后,浏览器通常会显示一个嵌入式控制器,允许用户播放,暂停和倒带的音乐很像HTML5控制器。下面是一个例子:



  1. <div id="content">  <div style="margin-bottom: 20px;">    <button id="playButton">Play Music</button>    <button id="pauseButton">Pause Music</button>    <button id="stopButton">Stop Music</button>  </div>  <audio id="myTune" controls>    <source src="WhiteChristmas.mp3">    <source src="WhiteChristmas.ogg">  </audio><!--[if lt IE 9]>  <object id="myTuneObj" type="audio/x-mpeg" data="WhiteChristmas.mp3" autoplay="false" height="45">    <param name="src" value="WhiteChristmas.mp3" />    <param name="controller" value="true" />    <param name="autoplay" value="false" />    <param name="autostart" value="0" />  </object>  <script>    document.getElementById('playButton').onclick = function() { document.getElementById('myTuneObj').play() };    document.getElementById('pauseButton').onclick = function() { document.getElementById('myTuneObj').pause() };    document.getElementById('stopButton').onclick = function() { document.getElementById('myTuneObj').stop() };  </script><![endif]--></div>
复制代码


上面的例子将在所有的浏览器支持HTML5音频,IE7和8 回落的对象的方法。在有条件的意见,我也重新映射的点击事件处理程序为播放/暂停/停止“按钮,这样,他们可以控制在IE7 / 8(音频对象,轻而易举地,提供的play() ,pause()和stop( )methods)。


另一种方法是,避免重新回到到一个闪存音乐播放器,IE7 / 8。


相关帖子

发表于 2015-8-10 20:52:10 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2015-8-14 16:37:53 | 显示全部楼层
貌似看过类似的文章
使用道具 举报

回复

发表于 2015-8-14 23:42:52 | 显示全部楼层
总觉得哪里有点问题啊
使用道具 举报

回复

发表于 2015-11-13 08:28:02 | 显示全部楼层
给力啊,文章整理的很好
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部