DDR爱好者之家

用CSS播放声音的几种技巧方法
站长资源 2024/11/24 佚名
66 1538
DDR爱好者之家 Design By 杰米

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）强制音频文件与导入文件的页面位于相同的协议和域上。即使将声音放到 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 技巧，不过却是一种“不要用在发布的产品中”的事情……

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米