與CSS一起播放聲音

CSS擅長於樣式，佈局和視覺演示，並充滿顏色，尺寸和動畫。但是您知道它也可以在網頁上巧妙地控制音頻播放嗎？

本文揭示了一種聰明的技術 - 比真正的黑客更精確地應用了HTML和CSS的精確應用，儘管肯定是在一個方面接壤。但是，對於生產環境，強烈建議使用本機音頻元素和/或JavaScript進行音頻控制。

技術

CSS驅動的聲音播放存在幾種方法，但是核心原理保持一致：將音頻文件嵌入頁面中的隱藏元素並揭示其觸發播放。這是一個例子：

<style>
  embed { display: none; }
  button:active   embed { display: block; }
</style>
<button>播放聲音</button>
<embed src="path-to-audio-file.mp3"></embed>

這利用了<embed></embed>標籤。這<object></object>標籤提供類似的功能：

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

重要考慮因素：

先前的代碼鋼鋼琴項目證明了這一技術的有效性。但是，最近的瀏覽器更新引入了局限性：

• 安全限制：使用<embed></embed>或者<object></object>將音頻文件對其進行更嚴格的安全檢查。 CORS策略必須將音頻文件駐留在與網頁相同的協議和域上。基本64編碼不會繞過這一點。可能需要在瀏覽器設置中明確啟用自動播放。

• 單次播放：與以前的瀏覽器行為不同，現在聽起來通常只播放一次。這大大限制了該技術的適用性。

儘管服務器端控件可以減輕CORS問題，但自動播放限制仍然取決於用戶，並且超出了我們的控制。

為什麼有效

基本機制在規格中詳細介紹<embed></embed>和<object></object>標籤：瀏覽器處理並在元素變為“潛在活動”或改變渲染狀態的元素上渲染嵌入式音頻。雖然從技術上講不是黑客攻擊，但存在瀏覽器不一致之處。

瀏覽器兼容性

跨瀏覽器的支持不一致：

• Opera和Chrome：出色的兼容性。

• 基於鉻的瀏覽器：支持各不相同； MacOS上的Edge可靠地工作，而Brave可能需要最新版本。

• Safari，Internet Explorer，Edge（Windows）：通常不支持。

• Firefox：在頁面加載時立即播放所有聲音，然後由於有關用戶互動的安全警告而阻止隨後的播放。

這種CSS技巧雖然娛樂，但最好將其視為“在家不要嘗試此”技術，除非，除非，除非您是渴望探索其怪癖的軟件開發人員。

以上是與CSS一起播放聲音的詳細內容。更多資訊請關注PHP中文網其他相關文章！