能用 CSS 能播放声音吗？[每日前端夜话0xF1]

疯狂的技术宅

发布于 2019-12-11 02:54:58

2.4K00

代码可运行

文章被收录于专栏：京程一灯京程一灯

运行总次数：0

代码可运行

正文共：3969 字

预计阅读时间：10 分钟

翻译：疯狂的技术宅作者：Alvaro Montoro 来源：css-tricks

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 小型钢琴(https://codepen.io/alvaromontoro/pen/ejwXJm)。效果很好，但是从那以后，情况发生了变化，该演示在 CodePen 上不再起作用。

最大的变化与安全性有关。由于它用的是 embed 或 object 而不是 audio，所以导入的文件将会受到更严格的安全检查。跨域访问控制策略（CORS）强制音频文件与导入文件的页面位于相同的协议和域上。即使将声音放到 base64 中也将不再起作用。此外，你（和用户）可能需要在其浏览器设置上激活自动播放功能，此技巧才能起作用。

另一个变化是，浏览器现在只播放一次声音。我会发誓过去的浏览器每次都会播放声音。但现在似乎不再行得通了，这大大限制了技巧的范围（并且使这个钢琴演示几乎毫无用处）。

如果你可以控制服务器和文件，则可以解决 CORS 问题，但是禁用的自动播放是每个用户都无法控制的事情。

查看演示：https://codepen.io/alvaromontoro/full/bGGjNom

这为什么有效

可以在 embed 标签的定义(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element)中发现这种行为背后的理论：

每当非潜在活动(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#concept-embed-active)的 embed 元素变为潜在活动状态，并且每一个仍处于处于潜在活动状态，且其 src 属性或 type 属性被设置、更改或删的设置，用户代理必须使用 embed 任务源将任务排队(https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task)来运行 embed 元素设置步骤(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element-setup-steps)。

object 标记的定义(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element)也是如此：