這篇文章將為大家詳細講解有關如何使用CSS播放聲音，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
CSS 是樣式、布局和表示的領域。它充斥著顏色、大小和動畫。但是你知道嗎，它還可以在網(wǎng)頁上控制播放聲音。
本文介紹了一些技巧。實際上它并不是真正的 hack，而是針對 HTML 和 CSS 的嚴格實現(xiàn)。不過說實話，這仍然是一種 hack。我不建議在生產(chǎn)中使用它，因為音頻可能還會被
用 CSS 播放聲音有好幾種方法，但是其基本思想是相同的：將音頻文件作為網(wǎng)頁中的隱藏對象或文檔插入，并在有操作發(fā)生時顯示它。像這樣：
這段代碼使用了
關于這個演示和相關技術的快速說明。大約一年前，我用這種技術開發(fā)了一種僅使用 HTML 和 CSS 的 CodePen 小型鋼琴。效果很好，但是從那以后，情況發(fā)生了變化，該演示在 CodePen 上不再起作用。
較大的變化與安全性有關。由于它用的是 embed 或 object 而不是 audio，所以導入的文件將會受到更嚴格的安全檢查?？缬蛟L問控制策略（CORS）強制音頻文件與導入文件的頁面位于相同的協(xié)議和域上。即使將聲音放到 base64 中也將不再起作用。 此外，你（和用戶）可能需要在其瀏覽器設置上激活自動播放功能，此技巧才能起作用。
另一個變化是，瀏覽器現(xiàn)在只播放一次聲音。我會發(fā)誓過去的瀏覽器每次都會播放聲音。但現(xiàn)在似乎不再行得通了，這大大限制了技巧的范圍（并且使這個鋼琴演示幾乎毫無用處）。
如果你可以控制服務器和文件，則可以解決 CORS 問題，但是禁用的自動播放是每個用戶都無法控制的事情。
這為什么有效
可以在 embed 標簽的定義中發(fā)現(xiàn)這種行為背后的理論：
每當非潛在活動的 embed 元素變?yōu)闈撛诨顒訝顟B(tài)，并且每一個仍處于處于潛在活動狀態(tài)，且其 src 屬性或 type 屬性被設置、更改或刪的設置，用戶代理必須使用 embed 任務源將任務排隊來運行 embed元素設置步驟。
object 標記的定義也是如此：
每當出現(xiàn)以下情況之一：
[...]
元素從正在渲染變?yōu)槲翠秩?，反之亦然?/p>
[...] user agent 必須將任務排隊才能運行以下步驟，來（重新）確定 object t元素代表什么。 [并且最終處理并運行它]
盡管我們對 object（文件已處理并在渲染上運行）的處理機制更清楚，但對于 embed，具有“潛在活動”的概念，這似乎有些復雜。盡管還有一些其他的條件，但它會在初始渲染上運行，這與處理 object 的方式類似。
如你所見，從技術上講，這根本不是一個把戲，但是并非所有瀏覽器的行為方式都是如此。
瀏覽器支持
與許多類似的 hack 技巧一樣，這個功能的支持也不是很好，并且隨瀏覽器的不同而有很大差異。
在 Opera 和 Chrome 瀏覽器上，它能夠工作。但是，對于其他基于 Chromium 的瀏覽器，該支持很少。例如，Mac 上的 Edge 可以正確播放音頻，而 Brave 瀏覽器則不會正確播放音頻，除非你有新版本。
在 Safari 中無法使用，對于 Windows 上的 Internet Explorer 或 Edge 來說也是如此。在這些瀏覽器中都無法使用。
Firefox 會在頁面加載時立即播放所有聲音，但是在隱藏并再次顯示后，將不再播放。當聲音試圖“無用戶交互”地播放時，它會在控制臺中觸發(fā)安全警告，除非用戶首先批準該站點，否則它們將被阻止。
總的來說，這是有趣的 CSS 技巧，不過卻是一種“不要用在發(fā)布的產(chǎn)品中”的事情。
關于“如何使用CSS播放聲音”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
