用CSS播发响声的几种技能方式

日期:2021-02-27 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

CSS 是款式、合理布局和表明的行业。它泛滥着色调、尺寸和动漫。可是你了解吗,它还能够在网页页面上操纵播发响声。

本文详细介绍了1些技能。具体上它其实不是真实的 hack,而是对于 HTML 和 CSS 的严苛完成。但是说真话,这依然是1种 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>

有关这个演试和有关技术性的迅速表明。大概1年前,我用这类技术性开发设计了1种仅应用 HTML 和 CSS 的 CodePen 小型钢琴。实际效果很好,可是从那之后,状况产生了转变,该演试在 CodePen 上已不起功效。

最大的转变与安全性性相关。因为它用的是 embed 或 object 而并不是 audio,因此导入的文档可能遭受更严苛的安全性查验。跨域浏览操纵对策(CORS)强制性声频文档与导入文档的网页页面坐落于同样的协议书和域上。即便将响声放到 base64 中也将已不起功效。 另外,你(和客户)将会必须在其访问器设定上激活全自动播发作用,此技能才可以起功效。

另外一个转变是,访问器如今只播发1次响声。我会立誓以往的访问器每次都会播发响声。但如今好像已不行得通了,这大大限定了技能的范畴(而且使这个钢琴演试基本上没什么用途)。

假如你能够操纵服务器和文档,则能够处理 CORS 难题,可是禁用的全自动播发是每一个客户都没法操纵的事儿。

这为何合理

能够在 embed 标识的界定中发现这类个人行为身后的基础理论:

每当非潜伏主题活动的 embed 元素变成潜伏主题活动情况,而且每个仍处在处在潜伏主题活动情况,且其 src 特性或 type 特性被设定、变更或删的设定,客户代理商务必应用 embed 每日任务源将每日任务排长队来运作 embed元素设定流程。

object 标识的界定也是这般:

每当出現下列状况之1:

[...]

元素从正在3D渲染变成未3D渲染,反之亦然,

[...] user agent 务必将每日任务排长队才可以运作下列流程,来(再次)明确 object t元素意味着甚么。 [而且最后解决并运作它]

虽然大家对 object(文档已解决并在3D渲染上运作)的解决体制更清晰,但针对 embed,具备“潜伏主题活动”的定义,这好像一些繁杂。虽然也有1些别的的标准,但它会在原始3D渲染上运作,这与解决 object 的方法相近。

如你所见,从技术性上讲,这压根并不是1个伎俩,可是并不是全部访问器的个人行为方法全是这般。

访问器适用

与很多相近的 hack 技能1样,这个作用的适用也并不是很好,而且随访问器的不一样而有很大差别。

在 Opera 和 Chrome 访问器上,它可以工作中。可是,针对别的根据 Chromium 的访问器,该适用非常少。比如,Mac 上的 Edge 能够正确播发声频,而 Brave 访问器则不容易正确播发声频,除非你有全新版本号。

在 Safari 中没法应用,针对 Windows 上的 Internet Explorer 或 Edge 来讲也是这般。在这些访问器中都没法应用。

Firefox 会在网页页面载入时马上播发全部响声,可是在掩藏并再度显示信息后,将已不播发。当响声尝试“无客户互动”地播发时,它会在操纵台中开启安全性警示,除非客户最先准许该站点,不然它们将被阻拦。

总的来讲,这是趣味的 CSS 技能,但是确是1种“不必用在公布的商品中”的事儿……

到此这篇有关用CSS播发响声的几种技能方式的文章内容就详细介绍到这了,更多有关CSS播发响声內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!

上一篇:css中1些常见的font 返回下一篇:没有了