专栏首页京程一灯能用 CSS 能播放声音吗?[每日前端夜话0xF1]

能用 CSS 能播放声音吗?[每日前端夜话0xF1]

正文共:3969 字

预计阅读时间:10 分钟

翻译:疯狂的技术宅 作者:Alvaro Montoro 来源:css-tricks

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 小型钢琴(https://codepen.io/alvaromontoro/pen/ejwXJm)。效果很好,但是从那以后,情况发生了变化,该演示在 CodePen 上不再起作用。

最大的变化与安全性有关。由于它用的是 embedobject 而不是 audio,所以导入的文件将会受到更严格的安全检查。跨域访问控制策略(CORS)强制音频文件与导入文件的页面位于相同的协议和域上。即使将声音放到 base64 中也将不再起作用。此外,你(和用户)可能需要在其浏览器设置上激活自动播放功能,此技巧才能起作用

另一个变化是,浏览器现在只播放一次声音。我会发誓过去的浏览器每次都会播放声音。但现在似乎不再行得通了,这大大限制了技巧的范围(并且使这个钢琴演示几乎毫无用处)。

如果你可以控制服务器和文件,则可以解决 CORS 问题,但是禁用的自动播放是每个用户都无法控制的事情。

查看演示:https://codepen.io/alvaromontoro/full/bGGjNom

这为什么有效

可以在 embed 标签的定义(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element)中发现这种行为背后的理论:

每当非潜在活动(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#concept-embed-active)的 embed 元素变为潜在活动状态,并且每一个仍处于处于潜在活动状态,且其 src 属性或 type 属性被设置、更改或删的设置,用户代理必须使用 embed 任务源将任务排队(https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task)来运行 embed 元素设置步骤(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element-setup-steps)。

object 标记的定义(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element)也是如此:

每当出现以下情况之一: […]

  • 元素从正在渲染(https://html.spec.whatwg.org/multipage/rendering.html#being-rendered)变为未渲染,反之亦然,

[…] user agent 必须将任务排队才能运行以下步骤,来(重新)确定 object t元素代表什么。[并且最终处理并运行它]

尽管我们对 object(文件已处理并在渲染上运行)的处理机制更清楚,但对于 embed,具有“潜在活动”的概念,这似乎有些复杂。尽管还有一些其他的条件,但它会在初始渲染上运行,这与处理 object 的方式类似。

如你所见,从技术上讲,这根本不是一个把戏,但是并非所有浏览器的行为方式都是如此。

浏览器支持

与许多类似的 hack 技巧一样,这个功能的支持也不是很好,并且随浏览器的不同而有很大差异。

在 Opera 和 Chrome 浏览器上,它能够工作。但是,对于其他基于 Chromium 的浏览器,该支持很少。例如,Mac 上的 Edge 可以正确播放音频,而 Brave 浏览器则不会正确播放音频,除非你有最新版本。

在 Safari 中无法使用,对于 Windows 上的 Internet Explorer 或 Edge 来说也是如此。在这些浏览器中都无法使用。

Firefox 会在页面加载时立即播放所有声音,但是在隐藏并再次显示后,将不再播放。当声音试图“无用户交互”地播放时,它会在控制台中触发安全警告,除非用户首先批准该站点,否则它们将被阻止。

?总的来说,这是有趣的 CSS 技巧,不过却是一种“不要用在发布的产品中”的事情…… ?

原文:https://css-tricks.com/playing-sounds-with-css/

在公众号内回复“体系”查看高清大图

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 11个最好的JavaScript动态效果库[每日前端夜话0x3E]

    当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。

    疯狂的技术宅
  • 每日脑洞——电脑数量

    疯狂的技术宅
  • Edge 拥抱 Chromium 对前端工程师意味着什么?[每日前端夜话0x54]

    翻译:疯狂的技术宅 原文:https://css-tricks.com/edge-goes-chromium-what-does-it-mean-for-fro...

    疯狂的技术宅
  • sql格式化并高亮

    演示地址: https://ryan-miao.github.io/sql-format-with-highlight/index.html

    Ryan-Miao
  • 浅谈警告即错误

      昨天,新来不久的同事调试一个准备上线的功能,可是怎么也调试不出来。当时刚好在喝水,看到他几百个警告。就和他说你还是处理一下编译警告吧。他一脸焦虑地说:没空弄...

    Qt君
  • requests-代理设置,超时设置,登陆验证,Prepared Requests

    对于某些网站,大规模频繁请求,网站可能会弹出验证码,或者跳转到登陆认证页面,甚至可能会被直接封客户端ip,导致短时间内无法访问,这个时候就需要用到代理ip。

    py3study
  • web开发快餐式入门指南 1.1 http

    由于web应用大多数都在浏览器中进行操作,所以我们有必要先了解一下浏览器里面到底发生了什么。简而言之,当你在浏览器的地址栏中输入网址并按下回车,或者点击了网页上...

    ApacheCN_飞龙
  • 【SAP MM系列】SAP同一公司不同工厂间物料转储方案比较

    同一公司不同工厂间物料调拨是实际业务中经常遇到的问题,对于如何解决不同工厂间调拨物料需求传递这个问题,SAP提供了两种解决方案:1)UB单--需求工厂向供给工厂...

    matinal
  • SAP同一公司不同工厂间物料转储方案比较

    同一公司不同工厂间物料调拨是实际业务中经常遇到的问题,对于如何解决不同工厂间调拨物料需求传递这个问题,SAP提供了两种解决方案:1)UB单--需求工厂向供给工厂...

    matinal
  • 图像标注工具

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    GavinZhou

扫码关注云+社区

领取腾讯云代金券