与CSS一起播放声音

CSS擅长于样式，布局和视觉演示，并充满颜色，尺寸和动画。但是您知道它也可以在网页上巧妙地控制音频播放吗？

本文揭示了一种聪明的技术 - 比真正的黑客更精确地应用了HTML和CSS的精确应用，尽管肯定是在一个方面接壤。但是，对于生产环境，强烈建议使用本机音频元素和/或JavaScript进行音频控制。

技术

CSS驱动的声音播放存在几种方法，但是核心原理保持一致：将音频文件嵌入页面中的隐藏元素并揭示其触发播放。这是一个例子：

<style>
  embed { display: none; }
  button:active   embed { display: block; }
</style>
<button>播放声音</button>
<embed src="path-to-audio-file.mp3"></embed>

这利用了<embed></embed>标签。这<object></object>标签提供类似的功能：

<object data="path-to-audio-file.mp3"></object>

重要考虑因素：

先前的代码钢钢琴项目证明了这一技术的有效性。但是，最近的浏览器更新引入了局限性：

• 安全限制：使用<embed></embed>或者<object></object>将音频文件对其进行更严格的安全检查。 CORS策略必须将音频文件驻留在与网页相同的协议和域上。基本64编码不会绕过这一点。可能需要在浏览器设置中明确启用自动播放。

• 单次播放：与以前的浏览器行为不同，现在听起来通常只播放一次。这大大限制了该技术的适用性。

尽管服务器端控件可以减轻CORS问题，但自动播放限制仍然取决于用户，并且超出了我们的控制。

为什么有效

基本机制在规格中详细介绍<embed></embed>和<object></object>标签：浏览器处理并在元素变为“潜在活动”或改变渲染状态的元素上渲染嵌入式音频。虽然从技术上讲不是黑客攻击，但存在浏览器不一致之处。

浏览器兼容性

跨浏览器的支持不一致：

• Opera和Chrome：出色的兼容性。

• 基于铬的浏览器：支持各不相同； MacOS上的Edge可靠地工作，而Brave可能需要最新版本。

• Safari，Internet Explorer，Edge（Windows）：通常不支持。

• Firefox：在页面加载时立即播放所有声音，然后由于有关用户互动的安全警告而阻止随后的播放。

这种CSS技巧虽然娱乐，但最好将其视为“在家不要尝试此”技术，除非，除非，除非您是渴望探索其怪癖的软件开发人员。

以上是与CSS一起播放声音的详细内容。更多信息请关注PHP中文网其他相关文章！