⽤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）强制⾳频⽂件与导⼊⽂件的页⾯位于相同的协议和域上。即使将声⾳放到 ba64 中也将不再起作⽤。此外，你（和⽤户）可能需要在其浏览器设置上激活⾃动播放功能，此技巧才能起作⽤。
另⼀个变化是，浏览器现在只播放⼀次声⾳。我会发誓过去的浏览器每次都会播放声⾳。但现在似乎不再⾏得通了，这⼤⼤限制了技巧的范围（并且使这个钢琴演⽰⼏乎毫⽆⽤处）。
高中生入团申请书如果你可以控制服务器和⽂件，则可以解决 CORS 问题，但是禁⽤的⾃动播放是每个⽤户都⽆法控制的事情。
这为什么有效
可以在 embed 标签的定义中发现这种⾏为背后的理论：
每当⾮潜在活动的 embed 元素变为潜在活动状态，并且每⼀个仍处于处于潜在活动状态，且其 src 属性或 type 属性被设置、更改或删的设置，⽤户代理必须使⽤ embed 任务源将任务排队来运⾏ embed元素设置步骤。
object 标记的定义也是如此：
短缺英语每当出现以下情况之⼀：
除湿空调[...]
元素从正在渲染变为未渲染，反之亦然，
[...] ur agent 必须将任务排队才能运⾏以下步骤，来（重新）确定 object t元素代表什么。 [并且最终处理并运⾏它]
尽管我们对 object（⽂件已处理并在渲染上运⾏）的处理机制更清楚，但对于 embed，具有“潜在活动”的概念，这似乎有些复杂。尽管还有⼀些其他的条件，但它会在初始渲染上运⾏，这与处理 object 的⽅式类似。
如你所见，从技术上讲，这根本不是⼀个把戏，但是并⾮所有浏览器的⾏为⽅式都是如此。
浏览器⽀持
鸡蛋英文怎么读与许多类似的 hack 技巧⼀样，这个功能的⽀持也不是很好，并且随浏览器的不同⽽有很⼤差异。
在 Opera 和 Chrome 浏览器上，它能够⼯作。但是，对于其他基于 Chromium 的浏览器，该⽀持很少。例如，Mac 上的Edge 可以正确播放⾳频，⽽ Brave 浏览器则不会正确播放⾳频，除⾮你有最新版本。
在 Safari 中⽆法使⽤，对于 Windows 上的 Internet Explorer 或 Edge 来说也是如此。在这些浏览器中都⽆法使⽤。
Firefox 会在页⾯加载时⽴即播放所有声⾳，但是在隐藏并再次显⽰后，将不再播放。当声⾳试图“⽆⽤户交互”地播放时，它会
在控制台中触发安全警告，除⾮⽤户⾸先批准该站点，否则它们将被阻⽌。
总的来说，这是有趣的 CSS 技巧，不过却是⼀种“不要⽤在发布的产品中”的事情……
到此这篇关于⽤CSS播放声⾳的⼏种技巧⽅法的⽂章就介绍到这了，更多相关CSS播放声⾳内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！
