了解如何使用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>
請記住，預緊只是一個提示。瀏覽器可以選擇忽略它，做它想做的事情！
用JavaScript的播放控制
關于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。