|
每日前端夜话0xF1
每日前端夜话，陪你聊前端。
每日夜晚18:00准时推送。
正文共：3969 字
预计阅读时间：10 分钟
翻译：疯狂的技术宅
作者：Alvaro Montoro
源自：css-tricks
CSS 是样式、布局和暗示的行业。它充斥着颜色、体积和动画。然则你晓得吗，它还能够在网页上掌控播放声音。
本文介绍了有些技巧。实质上它并不是真正的 hack，而是针对 HTML 和 CSS 的严格实现。不外说实话，这仍然是一种 hack。我不意见在生产中运用它，由于音频可能还会被 <audio> 元素或 JavaScript 进行掌控。
窍门
用 CSS 播放声音有好几种办法，然则其基本思想是相同的：将音频文件做为网页中的隐匿对象或文档插进，并在有操作出现时表示它。像这般： 1<style>2 embed { display
: none; } 3 button:active + embed { display
: block; } 4
</style>56<button>Play Sound</button>7<embed src="path-to-audio-file.mp3" />
这段代码运用了 <embed> 标签，亦能够运用 <object> 得到类似的结果： 1<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)亦是如此：
每当显现以下状况之一：
[…]
元素从正在渲染(https://html.spec.whatwg.org/multipage/rendering.html#being-rendered)变为未渲染，反之也然，
[…] user agent 必须将任务排队才可运行以下过程，来（重新）确定 object t元素表率什么。[并且最后处理并运行它]
尽管咱们对 object（文件已处理并在渲染上运行）的处理机制更清楚，但针对 embed，拥有“潜在活动”的概念，这似乎有些繁杂。尽管还有有些其他的要求，但它会在初始渲染上运行，这与处理 object 的方式类似。
如你所见，从技术上讲，这基本不是一个把戏，然则并非所有浏览器的行径方式都是如此。
浏览器支持
与许多类似的 hack 技巧同样，这个功能的支持亦不是很好，并且随浏览器的区别而有很大差异。
在 Opera 和 Chrome 浏览器上，它能够工作。然则，针对其他基于 Chromium 的浏览器，该支持很少。例如，Mac 上的 Edge 能够正确播放音频，而 Brave 浏览器则不会正确播放音频，除非你有最新版本。
在 Safari 中没法运用，针对 Windows 上的 Internet Explorer 或 Edge 来讲亦是如此。在这些浏览器中都没法运用。
Firefox 会在页面加载时立即播放所有声音，然则在隐匿并再次表示后，将再也不播放。当声音试图“无用户交互”地播放时，它会在掌控台中触发安全警告，除非用户首要准许该站点，否则它们将被阻止。
| 
发表于