整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
音在HTML中可以以不同的方式播放.
問題以及解決方法
在 HTML 中播放音頻并不容易！
您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。
在這W3CSchool 為您總結(jié)了問題和解決方法。
使用插件
瀏覽器插件是一種擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的小型計(jì)算機(jī)程序。
插件可以使用 <object> 標(biāo)簽 或者 <embed> 標(biāo)簽添加在頁面上.
這些標(biāo)簽定義資源（通常非 HTML 資源）的容器，根據(jù)類型，它們即會(huì)由瀏覽器顯示，也會(huì)由外部插件顯示。
使用 <embed> 元素
<embed>標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個(gè) HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。
下面的代碼片段能夠顯示嵌入網(wǎng)頁中的 MP3 文件：
實(shí)例
<embed height="50" width="100" src="horse.mp3">
問題:
<embed> 標(biāo)簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗(yàn)證。
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計(jì)算機(jī)未安裝插件，無法播放音頻。
如果把該文件轉(zhuǎn)換為其他格式，仍然無法在所有瀏覽器中播放。
使用 <object> 元素
<object tag> 標(biāo)簽也可以定義外部（非 HTML）內(nèi)容的容器。
下面的代碼片段能夠顯示嵌入網(wǎng)頁中的 MP3 文件：
實(shí)例
<object height="50" width="100" data="horse.mp3"></object>
問題:
不同的瀏覽器對音頻格式的支持也不同。
如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
如果用戶的計(jì)算機(jī)未安裝插件，無法播放音頻。
如果把該文件轉(zhuǎn)換為其他格式，仍然無法在所有瀏覽器中播放。
使用 HTML5 <audio> 元素
HTML5 <audio> 元素是一個(gè) HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。
The <audio> element works in all modern browsers.
以下我們將使用 <audio> 標(biāo)簽來描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同樣添加了一個(gè) OGG 類型文件(Firefox 和 Opera瀏覽器中有效).如果失敗，它會(huì)顯示一個(gè)錯(cuò)誤文本信息:
實(shí)例
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
問題:
<audio> 標(biāo)簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗(yàn)證。
您必須把音頻文件轉(zhuǎn)換為不同的格式。
<audio> 元素在老式瀏覽器中不起作用。
最好的 HTML 解決方法
下面的例子使用了兩個(gè)不同的音頻格式。HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。
實(shí)例
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
問題:
您必須把音頻轉(zhuǎn)換為不同的格式。
<embed> 元素?zé)o法回退來顯示錯(cuò)誤消息。
雅虎媒體播放器 - 一個(gè)簡單的添加音頻到你網(wǎng)站上的方式
使用雅虎播放器是免費(fèi)的。如需使用它，您需要把這段 JavaScript 插入網(wǎng)頁底部：
雅虎播放器可以播放MP3以及其他各種格式。你只需添加一行代碼到你的頁面或 博客中就可以輕松地將您的HTML頁面制作成 專業(yè)的播放列表：
實(shí)例
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>
如果你要使用它，您需要把這段 JavaScript 插入網(wǎng)頁底部：
<script src="http://mediaplayer.yahoo.com/latest"></script>
然后只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會(huì)自動(dòng)地為每首歌創(chuàng)建播放按鈕：
<a href="song1.mp3">Play Song 1</a>
<a href="song2.wav">Play Song 2</a>
...
...
雅虎媒體播放器為您的用戶提供的是一個(gè)小型的播放按鈕，而不是完整的播放器。不過，當(dāng)您點(diǎn)擊該按鈕，會(huì)彈出完整的播放器。
請注意，這個(gè)播放器始終?？吭诖翱虻撞俊Ｖ恍椟c(diǎn)擊它，就可將其滑出。
使用超鏈接
如果網(wǎng)頁包含指向媒體文件的超鏈接，大多數(shù)瀏覽器會(huì)使用"輔助應(yīng)用程序"來播放文件。
以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點(diǎn)擊該鏈接，瀏覽器會(huì)啟動(dòng)"輔助應(yīng)用程序"來播放該文件：
實(shí)例
<a href="horse.mp3">Play the sound</a>
內(nèi)聯(lián)的聲音說明
當(dāng)您在網(wǎng)頁中包含聲音，或者作為網(wǎng)頁的組成部分時(shí)，它被稱為內(nèi)聯(lián)聲音。
如果您打算在 web 應(yīng)用程序中使用內(nèi)聯(lián)聲音，您需要意識(shí)到很多人都覺得內(nèi)聯(lián)聲音令人惱火。同時(shí)請注意，用戶可能已經(jīng)關(guān)閉了瀏覽器中的內(nèi)聯(lián)聲音選項(xiàng)。
我們最好的建議是只在用戶希望聽到內(nèi)聯(lián)聲音的地方包含它們。一個(gè)正面的例子是，在用戶需要聽到錄音并點(diǎn)擊某個(gè)鏈接時(shí)，會(huì)打開頁面然后播放錄音。
HTML 多媒體標(biāo)簽
New : HTML5 新標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <embed> | 定義內(nèi)嵌對象。HTML4 中不贊成，HTML5 中允許。 |
| <object> | 定義內(nèi)嵌對象。 |
| <param> | 定義對象的參數(shù)。 |
| <audio>New | 定義了聲音內(nèi)容 |
| <video>New | 定義一個(gè)視頻或者影片 |
| <source>New | 定義了media元素的多媒體資源(<video> 和 <audio>) |
| <track>New | 規(guī)定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
切圖網(wǎng)一個(gè)客戶項(xiàng)目中，用到了背景音樂，采用了html5 audio標(biāo)簽， 并且設(shè)置了 autoplay 自動(dòng)播放，在PC上正常，但是一到手機(jī)下就無法自動(dòng)播放。
即便使用JS ,調(diào)用audio 對象的播放方法 play() 也不能自動(dòng)播放！ 這是為什么呢？
于是打破砂鍋問到底的決心，做了好多種demo，例子
http://m.slicy.cn/bg-music.html
測試，蘋果、安卓還是不行，最后發(fā)現(xiàn)真相的我，眼淚掉下來 。 原因在這：
為了防止不必要的自動(dòng)播放浪費(fèi)流量，手機(jī)網(wǎng)頁訪問帶有audio的頁面是不會(huì)自動(dòng)播放的。
Safari屏蔽了autoplay，必須由用戶交互事件觸發(fā)，因?yàn)閍utoplay在移動(dòng)網(wǎng)絡(luò)環(huán)境下可能會(huì)造成用戶流量費(fèi)劇增
下面是引自Safari Reference
In Safari on iPhone OS (for all devices, including iPad), where theuser may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.
家好，今天給大家介紹一款，調(diào)用酷狗搜索音樂播放API實(shí)例html頁面源碼（圖1），實(shí)現(xiàn)搜索和音樂播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學(xué)習(xí)
圖1
搜索結(jié)構(gòu)顯示后，點(diǎn)擊播放按鈕即可播放，同時(shí)會(huì)顯示歌詞，歌詞可以關(guān)閉，同時(shí)可以控制播放模式（圖2）
圖2
本模板編碼：10107，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10107，即可獲取。
就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
