掌握HTML5

由于互联网的连接快速足够去播放网站上的声音，Flash是任何人想在网站上播放的声音的首选工具。但HTML5是要改变这样的方式，开发人员可以在网上播放声音。在这篇文章中，我将深入展示如何使用<audio>的标签在你的网站上播放声音。

使用<audio>插入声音文件在你的网站上
这个是最基本的<audio>标签的使用方法：在这个例子中，加载一个MP3文件并播放。请注意自动播放属性是用来自动播放声音。但是，你不应该自动播放网站上的声音：对于游客来说，这是非常恼火的。

<audio src="sound.mp3" autoplay></audio>

循环播放声音
要循环声音？ loop属性可以为您提供帮助。但是，你不应该滥用自动播放和循环播放，如果你不想让游客过早地离开您的网站！

<audio src="sound.mp3" autoplay loop></audio>

显示浏览器控件
自动播放声音，这不是一种好的做法，而是你应该让浏览器显示，如音量控制，播放/暂停按钮。这可以很容易做到，只需通过添加控件的属性标签。

<audio src="sound.mp3" controls></audio>

多种文件格式
<audio>支持大多数现代浏览器，但问题是，不同的浏览器不支持相同的文件格式。Safari可以播放MP3，但Firefox无法播放Ogg文件，Safari不能播放Ogg文件…
对这个问题的解决方法是使用这两种格式，所以游客可以听到你的声音，无论他们使用什么浏览器。

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

指定MIME类型
当使用不同的文件格式，它是一个很好的做法，指定每个文件的MIME类型，以帮助文件支持他们的浏览器。它可以很容易做到，使用的文件类型属性。

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

应变旧的浏览器
如果访问者仍然使用IE6，或另一种陈腐的浏览器不支持<audio>标签。应变可以轻松实现：如下图所示，将显示一条浏览器不支持<audio>标签的消息。

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Your browser does not support the audio tag!
</audio>

缓冲区文件
当播放大文件，缓冲区文件是正确的好主意，要做到这一点，你可以使用预加载属性，它接受3个值：none （如果你不想要文件进行缓冲），auto （如果你想要浏览器自动去缓冲文件）和 metadata （缓冲区只有metadata当加载页面时）。

<audio controls>
  <source src="sound.mp3" preload="auto" >
</audio>

用JavaScript控制HTML5的<audio>
用JavaScript控制HTML5的音频播放器是非常容易的。下面的例子（从Jeremy Keith book HTML5 for WebDesigners）显示您可以如何搭建基本控制音频播放器（播放，暂停，音量，调低音量）使用HTML和JavaScript。

<audio id="player" src="sound.mp3"></audio>
<div>
 <button onclick="document.getElementById('player').play()">Play</button>
 <button onclick="document.getElementById('player').pause()">Pause</button>
 <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
 <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>