作者：AlvaroMontoro译文：Crazytechgeek原文：https://css-tricks.com/playin...未经授权严禁转载CSS是样式、布局和展示的领域。它充满了颜色、大小和动画。但是你知道吗，它还可以控制网页上声音的播放。本文介绍了一些技巧。实际上它并不是真正的hack，而是对HTML和CSS的严格实现。但老实说，它仍然是一个hack。我不建议在生产中使用它，因为音频也可能由元素或JavaScript控制。使用CSS播放声音的方法有多种，但基本思想是相同的：将音频文件作为隐藏对象或文档插入网页中，并在动作发生时显示它。像这样：PlaySound查看demo这段代码使用了标签，也可以使用获得类似的结果：关于这个演示和相关技术的快速说明。大约一年前，我使用这种技术仅使用HTML和CSS开发了一架CodePen婴儿钢琴。效果很好，但从那以后情况发生了变化，该演示不再适用于CodePen。最大的变化与安全有关。由于它使用嵌入或对象而不是音频，因此导入的文件将受到更严格的安全检查。跨源访问控制策略(CORS)强制音频文件与导入文件的页面使用相同的协议和域。即使将声音放在base64中也将不再有效。此外，您（和用户）可能需要在他们的浏览器设置上激活自动播放才能使这个技巧起作用。另一个变化是浏览器现在只播放一次声音。我发誓过去的浏览器每次都会播放声音。但这似乎不再有效，这极大地限制了该技术的范围（并使这个钢琴演示几乎毫无用处）。如果您可以控制服务器和文件，则可以解决CORS问题，但禁用自动播放是每个用户都无法控制的。查看演示为什么这有效这种行为背后的理论可以在embed标签的定义中找到：每当一个非潜在活动的嵌入元素成为潜在活动的，并且每个元素仍然潜在活动，并且它的src属性或type属性要设置、更改或删除，用户代理必须使用嵌入任务源来排队任务以运行嵌入元素设置步骤。对象标签的定义也是如此：每当发生以下情况之一时：[...]元素从呈现变为未呈现，反之亦然，[...]用户代理必须将任务排队以运行以下步骤，以（重新）确定对象t元素代表什么。[最后处理并运行它]虽然我们有一个更清晰的对象机制（文件处理并在渲染上运行），但对于嵌入，有了“潜在活动”的概念，这似乎有点复杂。它在初始渲染上运行，类似于对象的处理方式，尽管还有一些其他条件。如您所见，从技术上讲，这根本不是一个技巧，但并非所有浏览器都以这种方式运行。浏览器支持与许多类似的hack一样，对该功能的支持不是很好，并且因浏览器而异。在Opera和Chrome浏览器上它可以工作。但是，对其他基于Chromium的浏览器几乎没有支持。例如，Mac上的Edge可以正确播放音频，而Brave浏览器则不能，除非你有最新版本。在Safari中不起作用，Windows上的InternetExplorer或Edge也不起作用。这些浏览器都不起作用。Firefox在页面加载后立即播放所有声音，但在隐藏并再次显示后，它们不再播放。当声音试图“在没有用户交互的情况下”播放时，它会在控制台中触发安全警告，除非用户首先批准该站点，否则它们将被阻止。?总的来说，这是一个有趣的CSS技巧，但有点像“不要在发布中使用它”之类的东西......？
CSS可以播放声音吗？相关文章
