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

 

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

 

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

 

    总之，这是一个有点乱。

 

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

 

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

 

    HTML5音频元素

 

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

 

    //www.heatpress123.net

 

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

 

    跨浏览器支持

 

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

 

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

 

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

 

    浏览器。MP3。OGG的。wav

 

    火狐4没有是是

 

    Safari5的是没有是

 

    Chrome8的是是是

 

    Opera11没有是是

 

    IE9是没有是

 

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

 

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

 

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

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg">

 

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

 

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

 

    自动播放声音

 

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

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg">

 

    //www.software8.co/wzjs添加播放器控制

 

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

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg">

 

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

 

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

 

    循环播放

 

    添加的循环属性的标签的导致要播放的音频不休：

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg">

 

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

 

    预载提示

 

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

 

    此属性的值是：

 

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

 

    例如：

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg">

 

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

 

    用JavaScript的播放控制

 

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

 

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

 

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

 

    <sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg"><button>PlayMusic</button><button>PauseMusic</button><button>StopMusic</button>支持较旧版本的InternetExplorer

 

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

 

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

 

    <divid="content"><divstyle="margin-bottom:20px;"><buttonid="playButton">PlayMusic</button><buttonid="pauseButton">PauseMusic</button><buttonid="stopButton">StopMusic</button></div><sourcesrc="WhiteChristmas.mp3"><sourcesrc="WhiteChristmas.ogg"><!--[ifltIE9]><objectid="myTuneObj"type="audio/x-mpeg"data="WhiteChristmas.mp3"autoplay="false"height="45"><paramname="src"value="WhiteChristmas.mp3"/><paramname="controller"value="true"/><paramname="autoplay"value="false"/><paramname="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。