HTML5 音訊

在網頁上播放聲音的方法有很多種。

在 HTML 文件中嵌入音訊

將聲音插入網頁並不容易，因為瀏覽器沒有統一的標準來定義嵌入的媒體檔案。

在本章中，我們將演示在網頁中嵌入聲音的一些方法，從使用簡單連結到使用最新的 HTML5 <audio> 元素。

使用 HTML5 音訊元素

新推出的 HTML5 <audio> 元素提供了一種在網頁中嵌入音訊的標準方法。但是，音訊元素相對較新，但它適用於大多數現代 Web 瀏覽器。以下示例僅使用瀏覽器預設控制元件集將音訊插入 HTML5 文件，並使用一個源。

<audio controls="controls" src="birds.mp3">
    Your browser does not support the HTML5 Audio element.
</audio>

使用瀏覽器預設控制元件集的音訊和其他來源。

<audio controls="controls">
    <source src="birds.mp3" type="audio/mpeg">
    <source src="birds.ogg" type="audio/ogg">
    Your browser does not support the HTML5 Audio element.
</audio>

上述示例中的 ogg 軌道適用於 Firefox，Opera 和 Chrome，同時新增了 mp3 格式的相同軌道，以使音訊在 Internet Explorer 和 Safari 中執行。

連結音訊檔案

你可以連結到你的音訊檔案，並通過勾選它們來支付。

<a href="sea.mp3">Track 1</a>
<a href="wind.mp3">Track 2</a>

使用 object 元素

<object> 元素用於將不同型別的媒體檔案嵌入到 HTML 文件中。最初，此元素用於插入 ActiveX 控制元件，但根據規範，物件可以是任何媒體物件，如視訊、音訊、Java 小程式、ActiveX、文件（HTML、PDF、Word 等）、Flash 動畫或甚至影象。這是一個例子：

<object data="sea.mp3" width="200px" height="50px"></object>
<object data="sea.ogg" width="200px" height="50px"></object>

警告： <object> 元素不受廣泛支援，並且在很大程度上取決於要嵌入的物件的型別。在許多情況下，HTML5 <audio> 元素或 Google MP3 播放器等其他方法可能是更好的選擇。

使用嵌入元素

<embed> 元素用於將多媒體內容嵌入到 HTML 文件中。

以下程式碼片段將音訊檔案嵌入到網頁中。

<embed src="wind.mp3" width="200px" height="50px">
<embed src="wind.ogg" width="200px" height="50px">

警告： 但是，<embed> 元素在當前瀏覽器中得到了很好的支援，並在 HTML5 中被定義為標準，但由於缺少對該檔案格式的瀏覽器支援或外掛不可用，你的音訊可能無法播放。