用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播放声音的几种技巧方法的文章就介绍到这了,更多相关CSS播放声音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！