清華大佬耗費(fèi)三個(gè)月吐血整理的幾百G的資源，免費(fèi)分享！....>>>

HTML 音頻(Audio)

聲音在HTML中可以以不同的方式播放.

問(wèn)題以及解決方法

在 HTML 中播放音頻并不容易！

您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。

在本章，W3CSchool 為您總結(jié)了問(wèn)題和解決方法。

使用插件

瀏覽器插件是一種擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的小型計(jì)算機(jī)程序。

插件可以使用 <object> 標(biāo)簽 或者 <embed> 標(biāo)簽添加在頁(yè)面上.?

這些標(biāo)簽定義資源（通常非 HTML 資源）的容器，根據(jù)類型，它們即會(huì)由瀏覽器顯示，也會(huì)由外部插件顯示。

使用 <embed> 元素

<embed>標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個(gè) HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。

下面的代碼片段能夠顯示嵌入網(wǎng)頁(yè)中的 MP3 文件：

問(wèn)題:

• <embed> 標(biāo)簽在 HTML 4 中是無(wú)效的。頁(yè)面無(wú)法通過(guò) HTML 4 驗(yàn)證。
• 不同的瀏覽器對(duì)音頻格式的支持也不同。
• 如果瀏覽器不支持該文件格式，沒(méi)有插件的話就無(wú)法播放該音頻。
• 如果用戶的計(jì)算機(jī)未安裝插件，無(wú)法播放音頻。
• 如果把該文件轉(zhuǎn)換為其他格式，仍然無(wú)法在所有瀏覽器中播放。

使用 <object> 元素

<object tag> 標(biāo)簽也可以定義外部（非 HTML）內(nèi)容的容器。

下面的代碼片段能夠顯示嵌入網(wǎng)頁(yè)中的 MP3 文件：

問(wèn)題:

• 不同的瀏覽器對(duì)音頻格式的支持也不同。
• 如果瀏覽器不支持該文件格式，沒(méi)有插件的話就無(wú)法播放該音頻。
• 如果用戶的計(jì)算機(jī)未安裝插件，無(wú)法播放音頻。
• 如果把該文件轉(zhuǎn)換為其他格式，仍然無(wú)法在所有瀏覽器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一個(gè) HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

The <audio> element works in all modern browsers.

以下我們將使用 <audio> 標(biāo)簽來(lái)描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個(gè) OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會(huì)顯示一個(gè)錯(cuò)誤文本信息:

問(wèn)題:

• <audio> 標(biāo)簽在 HTML 4 中是無(wú)效的。您的頁(yè)面無(wú)法通過(guò) HTML 4 驗(yàn)證。
• 您必須把音頻文件轉(zhuǎn)換為不同的格式。
• <audio> 元素在老式瀏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個(gè)不同的音頻格式。HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg 來(lái)播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

問(wèn)題:

• 您必須把音頻轉(zhuǎn)換為不同的格式。
• <embed> 元素?zé)o法回退來(lái)顯示錯(cuò)誤消息。

雅虎媒體播放器 - 一個(gè)簡(jiǎn)單的添加音頻到你網(wǎng)站上的方式

使用雅虎播放器是免費(fèi)的。如需使用它，您需要把這段 JavaScript 插入網(wǎng)頁(yè)底部：

雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁(yè)面或 博客中就可以輕松地將您的HTML頁(yè)面制作成 專業(yè)的播放列表：

如果你要使用它，您需要把這段 JavaScript 插入網(wǎng)頁(yè)底部：