使用HTML5的Audio標簽打造WEB音頻播放器_html/css

來源：懂視網責編：小采時間：2020-11-27 16:15:59

使用HTML5的Audio標簽打造WEB音頻播放器_html/css

使用HTML5的Audio標簽打造WEB音頻播放器_html/css_WEB-ITnose:目前，WEB頁面上沒有標準的方式來播放音頻文件，大多數的音頻文件是使用插件來播放，而眾多瀏覽器都使用了不同的插件。而HTML5的到來，給我們提供了一個標準的方式來播放WEB中的音頻文件，用戶不再為瀏覽器升級諸如Adobe Flash、Apple QuickTime

推薦度：

點擊下載本文 文檔為doc格式

導讀使用HTML5的Audio標簽打造WEB音頻播放器_html/css_WEB-ITnose:目前，WEB頁面上沒有標準的方式來播放音頻文件，大多數的音頻文件是使用插件來播放，而眾多瀏覽器都使用了不同的插件。而HTML5的到來，給我們提供了一個標準的方式來播放WEB中的音頻文件，用戶不再為瀏覽器升級諸如Adobe Flash、Apple QuickTime

目前，WEB頁面上沒有標準的方式來播放音頻文件，大多數的音頻文件是使用插件來播放，而眾多瀏覽器都使用了不同的插件。而HTML5的到來，給我們提供了一個標準的方式來播放WEB中的音頻文件，用戶不再為瀏覽器升級諸如Adobe Flash、Apple QuickTime等播放插件，只需使用現代瀏覽器就可以聆聽任何可以發出聲音的WEB網站。

WEB中的Audio標簽

HTML5定義了一個新的元素用來指定標準的方式來插入音頻文件到web頁面中：標簽。使用audio標簽可以控制音頻的播放與停止，循環播放與播放次數設置，以及播放位置等等，詳情請看下表。

屬性	值	描述
autoplay	true \| false	如果是 true，則音頻在就緒后馬上播放。
controls	true \| false	如果是 true，則向用戶顯示控件，比如播放按鈕。
end	numeric value	定義播放器在音頻流中的何處停止播放。默認地，聲音會播放到結尾。
loopend	numeric value	定義在音頻流中循環播放停止的位置，默認是 end 屬性的值。
loopstart	numeric value	定義在音頻流中循環播放的開始位置。默認是 start 屬性的值。
playcount	numeric value	定義音頻片斷播放多少次。默認是 1。
src	url	所播放音頻的 url。
start	numeric value	定義播放器在音頻流中開始播放的位置。默認地，聲音在開頭進行播放。

目前支持audio標簽的瀏覽器有：

IE9，Firefox， Opera，Chrome和Safari都支持標簽。

注意：IE8和更早的版本，不支持標簽。

如何使用Audio

要在HTML5中播放音頻，需要在body中插入以下代碼：

你可以在和標簽之間插入文字內容，這樣如果瀏覽器不支持audio，那么會顯示這些文字。

也許你會問auto中怎么會包含3個source標簽呢？這是為了瀏覽器和音頻格式的兼容性，瀏覽器制造商并非都同意使用某一種音頻文件格式。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件，這是一種使用非壓縮格式且正在衰敗的標準。我們將每個視頻文件名放在單獨的標簽里，并且音頻容器中的所有源標簽都由構成，如下所示。那么，無論訪問者使用什么瀏覽器，它都將自動選擇所讀取的第一個文件類型，并為您播放聲音。

HTML5瀏覽器和音頻格式兼容性

音頻格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支持