本篇內(nèi)容主要講解“HTML5中audio標(biāo)簽的使用方式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5中audio標(biāo)簽的使用方式”吧!

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、息縣ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的息縣網(wǎng)站制作公司

在HTML5標(biāo)準(zhǔn)網(wǎng)頁里面，我們可以運(yùn)用audio標(biāo)簽來完成我們對聲音的調(diào)用及播放。以下是最經(jīng)常見到的運(yùn)用HTML5三種基本格式：

1.最少的代碼

代碼如下:

2.帶有不兼容提醒的代碼

代碼如下:

3.盡量兼容瀏覽器的寫法

代碼如下:

瀏覽器和音頻兼容性

瀏覽器制造商并非都同意使用某種音頻文件格式。對于圖像，PNG、JPEG 或 GIF 格式的文件在任何瀏覽器上都能加載到您的網(wǎng)頁里。遺憾的是，音頻文件并非如此。表 1 展示了網(wǎng)頁中可以使用的音頻文件格式，但是并非所有格式都能用于所有瀏覽器。例如，Chrome、Internet Explorer 9 (IE9) 和 Safari 瀏覽器不支持 WAV 文件，這是一種使用非壓縮格式且正在衰敗的標(biāo)準(zhǔn)。

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

沒有一種通用的文件格式讓每個(gè)瀏覽器都使用單個(gè)文件格式意味著至少有 2/5 的瀏覽器無法播放某些聲音。這不是無法在單一音頻標(biāo)準(zhǔn)中達(dá)成一致的瀏覽器制造商不妥協(xié)的問題，而是涉及專利權(quán)和特許權(quán)使用費(fèi)的法律和財(cái)務(wù)問題。不受軟件專利限制的 OGG 格式旨在一勞永逸地解決這個(gè)問題。然而，在撰寫本文時(shí)，Opera 和 Safari 都不支持 OGG。與 OGG 格式的文件相比，可用的 WAV 和 MP3 文件數(shù)量要更多，因此毫無疑問，瀏覽器制造商考慮到了這一點(diǎn)。MP3 作為事實(shí)的標(biāo)準(zhǔn)是個(gè)很好的解決方案。

解決方案：使用三種文件類型和

鑒于目前的狀況，您可能認(rèn)為目前還不是在 HTML5 頁面上使用音頻的黃金時(shí)刻。在某些方面可能的確如此，但是 HTML5 提供了一個(gè)解決方案，使您喜歡的瀏覽器能夠找到一種兼容的格式。

與

代碼如下:

無論訪問者使用什么瀏覽器，它都將自動選擇所讀取的第一個(gè)文件類型，并為您播放聲音。
瀏覽器音頻控件：沒有兩個(gè)是完全相同的

一旦您決定要在網(wǎng)站上提供音頻，將面臨一個(gè)有趣的設(shè)計(jì)選擇。每個(gè)瀏覽器都有與眾不同的外觀，看起來像是有意識地故意使其與眾不同。

除了 Chrome 瀏覽器外，所有瀏覽器都有開始/暫停控件、進(jìn)度條、滑塊、播放秒數(shù)、音量/靜音控件，還顯示聲音文件的總秒數(shù)。使用HTML5 標(biāo)準(zhǔn)和瀏覽器支持，開發(fā)人員可以相信用戶將擁有與 HTML5 音頻類似的體驗(yàn)，因?yàn)闉g覽器控件是類似的。您還可以使用 Flash 和 Silverlight 等插件創(chuàng)建控件，但是對于不同的用戶，體驗(yàn)可能會有所不同。

某些瀏覽器（如 IE9）甚至有自己的聲音控制條，在瀏覽器本身之外運(yùn)行。用戶打開有聲音的任何網(wǎng)站時(shí)，他們可以從 Windows 任務(wù)欄控制聲音，并能夠預(yù)覽當(dāng)前正在播放的聲音。

html代碼 (隱藏播放控件)

代碼如下:

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

代碼如下:

到此，相信大家對“HTML5中audio標(biāo)簽的使用方式”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！