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" />
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法
(详细的前端项目实战教学视频, PDF)
这段代码使用了 <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 技巧, 不过却是一种 "不要用在发布的产品中" 的事情......
来源: http://www.jianshu.com/p/5f59f57cdaac