请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 396|回复: 8

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

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-18 22:54:48 | 显示全部楼层 |阅读模式

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

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

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

总之,这是一个有点乱。

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

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

HTML5 音频元素

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

<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>元素指定相同的多种格式的声音文件。然后,浏览器会玩的第一个文件,它能够播放。下面是一个例子:


<AUDIO>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

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

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

自动播放声音

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

<audio autoplay>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>
//www.software8.co/wzjs添加播放器控制

2013052617171533.jpg

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

<audio controls>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

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

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

循环播放

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

<audio loop>   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

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

预载提示

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

此属性的值是:

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

例如:

<audio preload="metadata">   <source src="WhiteChristmas.mp3">  <source src="WhiteChristmas.ogg"></audio>

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

用JavaScript的播放控制

2013052617171533.jpg

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

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

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

<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控制器。下面是一个例子:

<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。

回复

使用道具 举报

1

主题

345

帖子

364

积分

中级会员

Rank: 3Rank: 3

积分
364
QQ
发表于 2016-3-13 15:13:42 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

2

主题

939

帖子

108

积分

注册会员

Rank: 2

积分
108
发表于 2017-12-10 15:41:42 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

0

主题

590

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2018-4-5 18:11:28 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

0

主题

942

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2018-6-27 17:39:09 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

5

主题

492

帖子

73

积分

注册会员

Rank: 2

积分
73
发表于 2018-8-9 09:45:32 | 显示全部楼层
很不错的帖子,又学到了,力挺
回复 支持 反对

使用道具 举报

2

主题

945

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2018-9-16 11:06:25 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

2

主题

1048

帖子

156

积分

注册会员

Rank: 2

积分
156
发表于 2018-9-30 10:55:16 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

0

主题

879

帖子

10

积分

注册会员

Rank: 2

积分
10
发表于 2018-11-4 10:21:33 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

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

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 17:59 , Processed in 0.243403 second(s), 35 queries .

快速回复 返回顶部 返回列表