如何使用CSS播放聲音

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

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

本文介紹了一些技巧。實際上它并不是真正的 hack，而是針對 HTML 和 CSS 的嚴格實現。不過說實話，這仍然是一種 hack。我不建議在生產中使用它，因為音頻可能還會被 <audio> 元素或 JavaScript 進行控制。

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

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>

<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />

這段代碼使用了 <embed> 標簽，也可以使用 <object> 得到類似的結果：

<object data="path-to-audio-file.mp3"></object>

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

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

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

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

這為什么有效

可以在 embed 標簽的定義中發現這種行為背后的理論：

每當非潛在活動的 embed 元素變為潛在活動狀態，并且每一個仍處于處于潛在活動狀態，且其 src 屬性或 type 屬性被設置、更改或刪的設置，用戶代理必須使用 embed 任務源將任務排隊來運行 embed元素設置步驟。

object 標記的定義也是如此：

每當出現以下情況之一：

[...]

元素從正在渲染變為未渲染，反之亦然，

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

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

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

瀏覽器支持

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

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

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

Firefox 會在頁面加載時立即播放所有聲音，但是在隱藏并再次顯示后，將不再播放。當聲音試圖“無用戶交互”地播放時，它會在控制臺中觸發安全警告，除非用戶首先批準該站點，否則它們將被阻止。

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

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