能用 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 问题，可是禁用的自动播放是每一个用户都没法控制的事情。

查看演示

这为何有效

能够在 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 技巧，不过倒是一种“不要用在发布的产品中”的事情…… ?

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...