CSS cue-before 属性

cue-before 属性用于在媒体文件（如音频或视频）开头播放自定义声音。该属性需要和 cue-after 属性一起使用。

语法

selector {
    cue-before: <sound> | none | inherit;
}

• <sound>：自定义声音文件的 URL，可以是 wav、mp3、au 等格式。
• none：没有预定义的声音，不采用自定义声音。
• inherit：从父元素继承 cue-before 属性值。

示例

video::cue:before {
  content: url("alert.wav");
}

在上面的例子中，我们给视频元素的 cue-before 属性赋值了一个 URL 地址，该地址指向 alert.wav 音频文件。这意味着当视频播放时，会在开头播放自定义声音 alert.wav。

注意事项

• cue-before 和 cue-after 只有在媒体文件开头播放时才会生效，如果在文件中途想要插入声音，需要使用 JavaScript。
• 在某些浏览器中，cue-before 和 cue-after 属性可能不被支持，因此在设计网页时需要加以考虑。
• 需要注意的是，该属性不同于 ::before 伪元素，不要混淆使用。

兼容性

cue-before 属性的兼容性取决于浏览器，一些浏览器可能不支持该属性。

参考链接：

• MDN Web Docs