html5中文学习网

您的位置: 首页 > html5教程 > 入门教程 » 正文

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

[ ] 已经帮助:人解决问题

了解如何使用HTML音频元素嵌入在网页中的声音容易。在本教程中都包含大量的代码示例。esuHTML5中文学习网 - HTML5先行者学习网

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

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

总之,这是一个有点乱。esuHTML5中文学习网 - HTML5先行者学习网

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

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

HTML5 音频元素esuHTML5中文学习网 - HTML5先行者学习网

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

<audio src="WhiteChristmas.mp3"> </audio> //www.heatpress123.netesuHTML5中文学习网 - HTML5先行者学习网

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

跨浏览器支持esuHTML5中文学习网 - HTML5先行者学习网

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

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

以下简要介绍了当前的浏览器支持多种音频格式:esuHTML5中文学习网 - HTML5先行者学习网

浏览器 。MP3 。OGG 的。wav
火狐4 没有
Safari 5的 没有
Chrome 8的
Opera 11 没有
IE9 没有
esuHTML5中文学习网 - HTML5先行者学习网

您的浏览器支持哪些音频格式。esuHTML5中文学习网 - HTML5先行者学习网

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

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

esuHTML5中文学习网 - HTML5先行者学习网
<AUDIO>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>esuHTML5中文学习网 - HTML5先行者学习网

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

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

自动播放声音esuHTML5中文学习网 - HTML5先行者学习网

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

<audio autoplay>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>esuHTML5中文学习网 - HTML5先行者学习网
//www.software8.co/wzjs添加播放器控制esuHTML5中文学习网 - HTML5先行者学习网

esuHTML5中文学习网 - HTML5先行者学习网
 esuHTML5中文学习网 - HTML5先行者学习网

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

<audio controls>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>esuHTML5中文学习网 - HTML5先行者学习网

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

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

循环播放esuHTML5中文学习网 - HTML5先行者学习网

添加的循环属性的<AUDIO>标签的导致要播放的音频不休:esuHTML5中文学习网 - HTML5先行者学习网

<audio loop>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>esuHTML5中文学习网 - HTML5先行者学习网

这可能是有用的事情,比如在游戏中的背景音乐和声音效果。esuHTML5中文学习网 - HTML5先行者学习网

预载提示esuHTML5中文学习网 - HTML5先行者学习网

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

此属性的值是:esuHTML5中文学习网 - HTML5先行者学习网

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

例如:esuHTML5中文学习网 - HTML5先行者学习网

<audio preload="metadata">   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>esuHTML5中文学习网 - HTML5先行者学习网

请记住,预紧只是一个提示。浏览器可以选择忽略它,做它想做的事情!esuHTML5中文学习网 - HTML5先行者学习网

用JavaScript的播放控制esuHTML5中文学习网 - HTML5先行者学习网

esuHTML5中文学习网 - HTML5先行者学习网
 esuHTML5中文学习网 - HTML5先行者学习网

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

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

使用上述的一些属性和方法,我们可以创建一些基本的按钮来播放,暂停,停止我们的音乐:esuHTML5中文学习网 - HTML5先行者学习网

<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 ExploreresuHTML5中文学习网 - HTML5先行者学习网

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

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

<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>esuHTML5中文学习网 - HTML5先行者学习网

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

另一种方法是,避免重新回到到一个闪存音乐播放器,IE7 / 8。esuHTML5中文学习网 - HTML5先行者学习网

(责任编辑:html5先行者
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助