CSS-Audio
什么是CSS-Audio？
CSS-Audio是一种可将音频播放和控制添加到Web文档中的元素的附加机制。
尽管作者在内部软件项目中具有特定用途，但它在很大程度上是一种好奇心，因为它可以创建。鼓励增强，改写或重新想象。
它如何工作？
CSS-Audio通过使用带有JavaScript的CSS自定义属性来管理这些属性的更改。
一个简短的例子，将声音添加到触发单击时的按钮中，将是：
button {
--audio-src: url(\'click.ogg\');
}
button:active {
--audio-state: playing;
}
基本用法
将以下内容添加到您的html <head> ：
<script type ='text/javascript'src ='// kettek.net/s/css-audio/css-audio-latest.min.js'> </script>
<script type ='text/javascript'> window.addeventlistener（'load'，function（）{ktk.cssa.init（）;}）</script>>
此后，您可以将样式表添加到文档的头部，以定义您的音频属性以及随附的HTML元素到文档主体。
音频属性
CSS-Audio提供的自定义CSS属性如下。
--audio-src
--audio-src属性在元素上设置一个或多个音频源。
句法
每个音频源指定为url(...)值。
要指定多个音频源，请提供由逗号分隔的多个值：
--audio-src:
url(audio1.ogg),
url(audio2.ogg);
值
- <url>
- 是表示使用音频源的<URL>。可以有几个被逗号隔开。
--audio-state
--audio-state属性设置了音频的所需状态。
通过选择器或其他更改（例如样式，类或ID）对此属性的更改将导致音频的状态更改。
句法
每个音频源的状态被指定为字符串值。
要指定多个音频源的状态，请提供由逗号分隔的多个值：
--audio-state:
playing,
default;
值
- 默认
- 音频状态应保持在已经存在的任何状态。
- 玩
- 音频应该播放。
- 暂停
- 音频应暂停其播放。
- 停止默认值
- 音频应停止播放。
--audio-volume
--audio-volume属性将音频量从0设置为1％。
句法
音频量指定为0到100的值，代表以减少或增加的百分比。
--audio-playback
--audio-playback属性设置了音频应如何管理播放。
句法
每个音频源的播放方法被指定为字符串值。
要指定多个音频源的播放方法，请提供由逗号分隔的多个值：
--audio-playback:
playthrough,
cease;
值
- 播放
- 音频应继续播放，直到 – 如果
--audio-state更改为非播放值。
- 音频应继续播放，直到 – 如果
- 停止默认
- 音频应该改变其状态以匹配
--audio-state。
- 音频应该改变其状态以匹配
--audio-loop
--audio-loop属性设置了音频应如何循环。
句法
每个音频源的循环规则被指定为数字或infinite值。
要指定多个音频源的循环规则，请提供由逗号分隔的多个值：
--audio-loop:
infinite,
2;
值
- 无限
- 音频应在播放完成后恢复
--audio-offset的播放。
- 音频应在播放完成后恢复
- <Integer>
- 音频应循环供应次数。默认为“ 1”
--audio-ontrigger
--audio-ontrigger属性设置了音频源更新时播放应如何表现。
句法
每个音频源的触发规则被指定为字符串值。
要指定多个音频源的触发规则，请提供由逗号分隔的多个值：
--audio-trigger:
reset,
multi;
值
- 继续默认
- 如果音频仍在播放，音频应继续播放。
- 重置
- 音频应立即重置为偏移和播放的开始。
- 多
- 音频应创建一个新的音频播放源，该播放源复制其规则并开始播放。
--audio-offset
--audio-offset属性设置了音频源启动的播放偏移量。
句法
每个音频源的偏移规则被指定为<time>值。
指定多个音频源的偏移规则，提供由逗号分隔的多个值：
--audio-offset:
0.1s,
500ms;
值
- <Time>
- 是表示音频偏移的<time>。可以有几个被逗号隔开。默认为“ 0”
--audio-hold-navigation
--audio-hold-navigation属性可防止元素导航浏览器，直到元素上的任何播放音频都完成播放为止。
句法
--audio-hold-navigation: finished;
值
- 完成的
- 该元素被阻止导航页面，直到元素的音频播放完成为止。
高级用法
初始化选项
CSS-Audio可以通过init()调用传递一个配置对象，从而更改CSS-Audio的一些核心功能以满足您的需求。
这些选项及其影响是：
| 选项 | 描述 | 值 | 默认值 |
|---|---|---|---|
| 过程 | 应该在Init上处理DOM吗？ | 是/错误 | 真的 |
| 观察到 | 是否应该观察到添加元素的DOM？ | 是/错误 | 真的 |
| Observenodeconfig | 突变observer.Observe节点上使用的选项 | 请参阅突变观察者 | { attributeFilter: ['style', 'class', 'id'] } |
| 观察到了 | 突变observer.Observe在DOM上使用的选项 | 请参阅突变观察者 | {childlist：true} |
| 选择器 | CSS选择器应触发节点的手工静脉 | 弦数 | ['Active'，“悬停”，“焦点”，“检查”] |
当前限制
- 当父母变化时，没有适当的触发孩子。
- 观看元素有效性的内部解析需要指定完整类名称，ID和标签名称的过度规则。此外，复杂的伪级选择器也不会注册。
<div class=\'button\' id=\'unique\'>click</div>
div.button#unique:active:hover {
/* NO MATCH */
}
div.button#unique:active {
/* MATCH */
}
div.button:active {
/* NO MATCH */
}
div:active {
/* NO MATCH */*
}
