91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML5中audio標簽的使用方式

發布時間:2021-08-04 22:02:47 來源:億速云 閱讀:180 作者:chen 欄目:web開發

本篇內容主要講解“HTML5中audio標簽的使用方式”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“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瀏覽器和音頻格式兼容性
HTML5中audio標簽的使用方式

沒有一種通用的文件格式讓每個瀏覽器都使用單個文件格式意味著至少有 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&Prime; />
   <source src=”http://demo.mimvp.com/html5/take_you_fly.wav” />
</audio>

無論訪問者使用什么瀏覽器,它都將自動選擇所讀取的第一個文件類型,并為您播放聲音。
瀏覽器音頻控件:沒有兩個是完全相同的
HTML5中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>

到此,相信大家對“HTML5中audio標簽的使用方式”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

巨野县| 博兴县| 和田县| 兖州市| 油尖旺区| 山阴县| 华阴市| 崇仁县| 永清县| 新邵县| 高碑店市| 西乡县| 广灵县| 乡城县| 娄烦县| 洪江市| 格尔木市| 浦城县| 衡阳县| 青川县| 库尔勒市| 沛县| 赣州市| 阜阳市| 义乌市| 泗洪县| 洮南市| 嘉定区| 门源| 公主岭市| 卢湾区| 荃湾区| 伊川县| 密山市| 健康| 永川市| 长汀县| 双江| 饶平县| 景谷| 溧阳市|