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

了解如何使用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

添加播放器控制

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

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

.//http://www.heatpress123.net

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

用JavaScript的播放控制

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

play（）

在当前播放位置开始播放

pause（）

暂停播放，如果当前正在播放的声音

canPlayType（类型）

确定浏览器可以播放特定的媒体类型或不

duration

声音片段的长度，在几秒钟内

currentTime

当前播放位置，在几秒钟内。您也可以将此属性设置为移动播放位置。

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

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

  <button οnclick="document.getElementById('myTune').play()">Play Music</button>
  <button οnclick="document.getElementById('myTune').pause()">Pause Music</button>
  <button οnclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">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" οnclick="document.getElementById('myTune').play()">Play Music</button>
    <button id="pauseButton" οnclick="document.getElementById('myTune').pause()">Pause Music</button>
    <button id="stopButton" οnclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">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。

更多的网站建设教程 转载请注明www.software8.co  

公司网站 http://www.heatpress123.net