DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 簡單介紹HTML5中audio標簽的使用
簡單介紹HTML5中audio標簽的使用
編輯:HTML5詳解     
這篇文章主要介紹了Html5中audio標簽的使用,在各浏覽器中添加音頻播放控件,需要的朋友可以參考下

在Html5標准網頁裡面,我們可以運用audio標簽來完成我們對聲音的調用及播放。以下是最經常見到的運用Html5三種基本格式:

1.最少的代碼

復制代碼代碼如下:
<audio src="song.ogg" controls="controls"></audio>
2.帶有不兼容提醒的代碼

復制代碼代碼如下:
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
3.盡量兼容浏覽器的寫法

復制代碼代碼如下:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

浏覽器和音頻兼容性

浏覽器制造商並非都同意使用某種音頻文件格式。對於圖像,PNG、JPEG 或 GIF 格式的文件在任何浏覽器上都能加載到您的網頁裡。遺憾的是,音頻文件並非如此。表 1 展示了網頁中可以使用的音頻文件格式,但是並非所有格式都能用於所有浏覽器。例如,Chrome、Internet Explorer 9 (IE9) 和 Safari 浏覽器不支持 WAV 文件,這是一種使用非壓縮格式且正在衰敗的標准。

Html5浏覽器和音頻格式兼容性

沒有一種通用的文件格式讓每個浏覽器都使用單個文件格式意味著至少有 2/5 的浏覽器無法播放某些聲音。這不是無法在單一音頻標准中達成一致的浏覽器制造商不妥協的問題,而是涉及專利權和特許權使用費的法律和財務問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個問題。然而,在撰寫本文時,Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比,可用的 WAV 和 MP3 文件數量要更多,因此毫無疑問,浏覽器制造商考慮到了這一點。MP3 作為事實的標准是個很好的解決方案。

解決方案:使用三種文件類型和<audio>標簽

鑒於目前的狀況,您可能認為目前還不是在 Html5 頁面上使用音頻的黃金時刻。在某些方面可能的確如此,但是 Html5 提供了一個解決方案,使您喜歡的浏覽器能夠找到一種兼容的格式。

與 <audio> 標簽結合使用時,<source> 標簽可以嵌套在 <audio> 容器內。假設您是一個瓦格納迷,想在 Html5 網頁上聽他的歌劇 Ride of the ValkyrIEs(《女武神》)。首先,您需要獲得三種文件類型的音樂,即 OGG、MP3 和 WAV。將這些音樂文件與 Html5 文件放在同一個文件夾內。然後,將每個文件名放在單獨的 <source> 標簽裡,並且音頻容器中的所有源標簽都由<audio></audio> 構成,如下所示。

復制代碼代碼如下:
<audio controls>
<source src=”http://demo.mimvp.com/Html5/take_you_fly.ogg” />
<source src=”http://demo.mimvp.com/Html5/take_you_fly.mp3″ />
<source src=”http://demo.mimvp.com/Html5/take_you_fly.wav” />
</audio>

無論訪問者使用什麼浏覽器,它都將自動選擇所讀取的第一個文件類型,並為您播放聲音。
浏覽器音頻控件:沒有兩個是完全相同的

一旦您決定要在網站上提供音頻,將面臨一個有趣的設計選擇。每個浏覽器都有與眾不同的外觀,看起來像是有意識地故意使其與眾不同。

除了 Chrome 浏覽器外,所有浏覽器都有開始/暫停控件、進度條、滑塊、播放秒數、音量/靜音控件,還顯示聲音文件的總秒數。使用Html5 標准和浏覽器支持,開發人員可以相信用戶將擁有與 Html5 音頻類似的體驗,因為浏覽器控件是類似的。您還可以使用 Flash 和 Silverlight 等插件創建控件,但是對於不同的用戶,體驗可能會有所不同。

某些浏覽器(如 IE9)甚至有自己的聲音控制條,在浏覽器本身之外運行。用戶打開有聲音的任何網站時,他們可以從 Windows 任務欄控制聲音,並能夠預覽當前正在播放的聲音。

Html代碼 (隱藏播放控件)

復制代碼代碼如下:
<audio autoplay="autoplay">
<source src="http://demo.mimvp.com/Html5/take_you_fly.mp3" type="audio/mpeg">
</audio>
 

代碼演示 (隱藏播放控件)

復制代碼代碼如下:
<audio autoplay="autoplay" controls="controls">
<source src="http://demo.mimvp.com/Html5/take_you_fly.mp3" type="audio/mpeg">
</audio>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved