這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS播放聲音，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

超過10余年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：成都網(wǎng)站制作、做網(wǎng)站，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，微信小程序開發(fā)，微信開發(fā)，重慶APP軟件開發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

CSS 是樣式、布局和表示的領(lǐng)域。它充斥著顏色、大小和動(dòng)畫。但是你知道嗎，它還可以在網(wǎng)頁上控制播放聲音。

本文介紹了一些技巧。實(shí)際上它并不是真正的 hack，而是針對 HTML 和 CSS 的嚴(yán)格實(shí)現(xiàn)。不過說實(shí)話，這仍然是一種 hack。我不建議在生產(chǎn)中使用它，因?yàn)橐纛l可能還會(huì)被

用 CSS 播放聲音有好幾種方法，但是其基本思想是相同的：將音頻文件作為網(wǎng)頁中的隱藏對象或文檔插入，并在有操作發(fā)生時(shí)顯示它。像這樣：

Play Sound

這段代碼使用了 標(biāo)簽，也可以使用

關(guān)于這個(gè)演示和相關(guān)技術(shù)的快速說明。大約一年前，我用這種技術(shù)開發(fā)了一種僅使用 HTML 和 CSS 的 CodePen 小型鋼琴。效果很好，但是從那以后，情況發(fā)生了變化，該演示在 CodePen 上不再起作用。

最大的變化與安全性有關(guān)。由于它用的是 embed 或 object 而不是 audio，所以導(dǎo)入的文件將會(huì)受到更嚴(yán)格的安全檢查。跨域訪問控制策略（CORS）強(qiáng)制音頻文件與導(dǎo)入文件的頁面位于相同的協(xié)議和域上。即使將聲音放到 base64 中也將不再起作用。 此外，你（和用戶）可能需要在其瀏覽器設(shè)置上激活自動(dòng)播放功能，此技巧才能起作用。

另一個(gè)變化是，瀏覽器現(xiàn)在只播放一次聲音。我會(huì)發(fā)誓過去的瀏覽器每次都會(huì)播放聲音。但現(xiàn)在似乎不再行得通了，這大大限制了技巧的范圍（并且使這個(gè)鋼琴演示幾乎毫無用處）。

如果你可以控制服務(wù)器和文件，則可以解決 CORS 問題，但是禁用的自動(dòng)播放是每個(gè)用戶都無法控制的事情。

這為什么有效

可以在 embed 標(biāo)簽的定義中發(fā)現(xiàn)這種行為背后的理論：

每當(dāng)非潛在活動(dòng)的 embed 元素變?yōu)闈撛诨顒?dòng)狀態(tài)，并且每一個(gè)仍處于處于潛在活動(dòng)狀態(tài)，且其 src 屬性或 type 屬性被設(shè)置、更改或刪的設(shè)置，用戶代理必須使用 embed 任務(wù)源將任務(wù)排隊(duì)來運(yùn)行 embed元素設(shè)置步驟。

object 標(biāo)記的定義也是如此：

每當(dāng)出現(xiàn)以下情況之一：

[...]

元素從正在渲染變?yōu)槲翠秩?，反之亦然?/p>

[...] user agent 必須將任務(wù)排隊(duì)才能運(yùn)行以下步驟，來（重新）確定 object t元素代表什么。 [并且最終處理并運(yùn)行它]

盡管我們對 object（文件已處理并在渲染上運(yùn)行）的處理機(jī)制更清楚，但對于 embed，具有“潛在活動(dòng)”的概念，這似乎有些復(fù)雜。盡管還有一些其他的條件，但它會(huì)在初始渲染上運(yùn)行，這與處理 object 的方式類似。

如你所見，從技術(shù)上講，這根本不是一個(gè)把戲，但是并非所有瀏覽器的行為方式都是如此。

瀏覽器支持

與許多類似的 hack 技巧一樣，這個(gè)功能的支持也不是很好，并且隨瀏覽器的不同而有很大差異。

在 Opera 和 Chrome 瀏覽器上，它能夠工作。但是，對于其他基于 Chromium 的瀏覽器，該支持很少。例如，Mac 上的 Edge 可以正確播放音頻，而 Brave 瀏覽器則不會(huì)正確播放音頻，除非你有最新版本。

在 Safari 中無法使用，對于 Windows 上的 Internet Explorer 或 Edge 來說也是如此。在這些瀏覽器中都無法使用。

Firefox 會(huì)在頁面加載時(shí)立即播放所有聲音，但是在隱藏并再次顯示后，將不再播放。當(dāng)聲音試圖“無用戶交互”地播放時(shí)，它會(huì)在控制臺(tái)中觸發(fā)安全警告，除非用戶首先批準(zhǔn)該站點(diǎn)，否則它們將被阻止。

總的來說，這是有趣的 CSS 技巧，不過卻是一種“不要用在發(fā)布的產(chǎn)品中”的事情。

關(guān)于“如何使用CSS播放聲音”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。