使用HTML5可以輕鬆地將聲音和音樂添加到網頁中。 實際上，要做的最難的事情就是創建所需的多個源，以確保您的聲音文件可以在各種瀏覽器上播放。
使用HTML5的好處是您可以通過使用幾個標籤來嵌入聲音。 然後，瀏覽器播放聲音，就像使用IMG元素時顯示圖像一樣。
如何將聲音添加到HTML5網頁
您需要一個HTML編輯器 ，一個聲音文件（最好以MP3格式）和一個聲音文件轉換器。
- 首先，你需要一個聲音文件。 最好將該文件記錄為MP3（ .mp3 ），因為它具有很高的音質，並且受到大多數瀏覽器（Android 2.3+，Chrome 6+，IE 9+，iOS 3+和Safari 5+）的支持。
- 將您的文件轉換為Vorbis格式（ .ogg ）以添加Firefox 3.6+和Opera 10.5+支持。 您可以使用Vorbis.com上的轉換器。 您還可以將MP3轉換為WAV文件格式（ .wav ）以獲得Firefox和Opera的支持。 為了安全起見，我建議您將文件張貼在所有三種類型中，但最需要的是MP3和另一種類型。
- 將所有音頻文件上傳到您的網絡服務器，並記下您存儲它們的目錄。將它們放在僅用於音頻文件的子目錄中是個好主意，就像大多數設計師將圖像保存在圖像目錄中一樣。
- 將AUDIO元素添加到您希望顯示聲音文件控件的HTML文件中。 <音頻控制>
- 在AUDIO元素中放置每個上傳的音頻文件的SOURCE元素：
-
- AUDIO元素內的任何HTML都將用作不支持AUDIO元素的瀏覽器的後備。 所以添加一些HTML。 最簡單的方法是添加HTML以讓它們下載文件，但您也可以使用HTML 4.01嵌入方法播放聲音。 以下是一個簡單的回退：
您的瀏覽器不支持音頻回放，請下載文件：
- 您需要做的最後一件事是關閉您的AUDIO元素：
- 完成後，您的HTML應如下所示：
其他技巧
- 一定要使用HTML5的doctype（），以便您的HTML將被驗證
- 查看元素的可用屬性，查看可以添加到元素的其他選項。
- 請注意，我們將HTML設置為默認包含控件，並關閉自動播放功能。 當然，您可以改變這種情況，但請記住，許多人會發現自動啟動的聲音/他們無法控制的煩人的聲音，並且通常會在發生此情況時離開頁面。