能用 CSS 能播放聲音嗎？

時間 2021-02-18

標籤 css html 前端程序員 web 面試 segmentfault api 跨域瀏覽器欄目 CSS 简体版

原文原文鏈接

做者：Alvaro Montoro
翻譯：瘋狂的技術宅css

原文：https://css-tricks.com/playin...html

未經容許嚴禁轉載前端

CSS 是樣式、佈局和表示的領域。它充斥着顏色、大小和動畫。可是你知道嗎，它還能夠在網頁上控制播放聲音。程序員

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

竅門

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

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

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

查看演示segmentfault

這段代碼使用了 <embed> 標籤，也可使用 <object> 獲得相似的結果：api

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

關於這個演示和相關技術的快速說明。大約一年前，我用這種技術開發了一種僅使用 HTML 和 CSS 的 CodePen 小型鋼琴。效果很好，可是從那之後，狀況發生了變化，該演示在 CodePen 上再也不起做用。跨域

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

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

若是你能夠控制服務器和文件，則能夠解決 CORS 問題，可是禁用的自動播放是每一個用戶都沒法控制的事情。

查看演示