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

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

竅門

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

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

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

這段代碼使用了 <embed> 標(biāo)簽，也可以使用 <object> 得到類似的結(jié)果：

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

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

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

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

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

這為什么有效

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

每當(dāng)非潛在活動的 embed 元素變?yōu)闈撛诨顒訝顟B(tài)，并且每一個(gè)仍處于處于潛在活動狀態(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，具有“潛在活動”的概念，這似乎有些復(fù)雜。盡管還有一些其他的條件，但它會在初始渲染上運(yùn)行，這與處理 object 的方式類似。

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

瀏覽器支持

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

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

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

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

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

到此這篇關(guān)于用CSS播放聲音的幾種技巧方法的文章就介紹到這了,更多相關(guān)CSS播放聲音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論