极客教程CSS 声音媒体
可以通过语音合成器呈现网页文档。CSS2允许您将特定的声音样式特性附加到特定的文档元素上。
文档的声音呈现主要用于视力障碍者。以下是可以通过声音呈现而不是视觉呈现访问文档的一些情况。
- 学习阅读
- 培训
- 车辆中的网络访问
- 家庭娱乐
- 工业文档
- 医疗文件
使用声音属性时，画布由三维物理空间（声音环绕）和时间空间（可以指定在其他声音之前、期间和之后的声音）组成。
CSS属性还允许您改变合成语音的质量（语音类型、频率、抑扬等）。
这是一个例子−
<html>
<head>
<style type = "text/css">
h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("../audio/pop.au");
}
p {
azimuth:center-right;
}
</style>
</head>
<body>
<h1>Deepinout.com</h1>
<h2>Deepinout.com</h2>
<h3>Deepinout.com</h3>
<h4>Deepinout.com</h4>
<h5>Deepinout.com</h5>
<h6>Deepinout.com</h6>
<p>Deepinout.com</p>
</body>
</html>
它将产生以下结果：
它将引导语音合成器以一种称为”paul”的声音（一种音频字体），以平稳的音调，但声音非常浓郁地朗读标题。在朗读标题之前，将从给定的URL播放一个声音样本。
具有类名‘heidi’的段落将呈现出来自前左方（如果音响系统能够实现空间音频），而具有类名‘peter’的段落则来自右方。
现在我们将看到与声音媒体相关的各种属性。
- 方位角（azimuth） 属性设置声音水平方向来自何处。
-
仰角（elevation） 属性设置声音垂直方向来自何处。
-
cue-after 属性指定在说出元素内容后播放的声音，以将其与其他内容区分开。
-
cue-before 属性指定在说出元素内容之前播放的声音，以将其与其他内容区分开。
-
cue 是一个用于设置cue-before和cue-after的速记属性。
-
pause-after 属性指定在说出元素内容后要观察的暂停时间。
-
pause-before 属性指定在说出元素内容之前要观察的暂停时间。
-
pause 是一个用于设置pause-before和pause-after的速记属性。
-
pitch 属性指定说话声音的平均音调（频率）。
-
pitch-range 属性指定平均音调的变化范围。
-
play-during 属性指定在说出元素内容时作为背景播放的声音。
-
richness 属性指定说话声音的丰富度或明亮度。
-
speak 属性指定文本是否以及以何种方式用声音呈现。
-
speak-numeral 属性控制如何朗读数字。
-
speak-punctuation 属性指定如何朗读标点符号。
-
speech-rate 属性指定说话速率。
-
stress 属性指定声音的音调轮廓中的“局部峰值”高度。
-
voice-family 属性指定优先列表中的声音家族名称。
-
volume 属性是指声音的中位音量。
方位角（azimuth）属性
方位角属性设置声音水平方向来自何处。可能的取值如下所示−
- angle − 位置是根据一个角度来描述的，角度范围为-360deg到360deg。值0deg表示位于声音舞台中心正前方。90deg表示右侧，180deg表示后方，270deg（或等效且更方便的是-90deg）表示左侧。
-
left-side − 等同于’270deg’。与’behind’，’270deg’一样。
-
far-left − 等同于’300deg’。与’behind’，’240deg’一样。
-
left − 等同于’320deg’。与’behind’，’220deg’一样。
-
center-left − 等同于’340deg’。与’behind’，’200deg’一样。
-
center − 等同于’0deg’。与’behind’，’180deg’一样。
-
center-right − 等同于’20deg’。与’behind’，’160deg’一样。
-
right − 等同于’40deg’。与’behind’，’140deg’一样。
-
far-right − 等同于’60deg’。与’behind’，’120deg’一样。
-
right-side − 等同于’90deg’。与’behind’，’90deg’一样。
-
leftwards − 将声音向左移动，相对于当前角度。更准确地说，减去20度。
-
rightwards − 将声音向右移动，相对于当前角度。更准确地说，加上20度。
这是一个例子-
<style type = "text/css">
<!--
h1 { azimuth: 30deg }
td.a { azimuth: far-right } /* 60deg */
#12 { azimuth: behind far-right } /* 120deg */
p.comment { azimuth: behind } /* 180deg */
-->
</style>
elevation 属性
elevation 属性设置声音从垂直方向来的位置。可能的值如下所示-
- angle - 指定角度作为升高度，介于 -90deg 和 90deg 之间。0deg 表示在前方地平线上，大致表示与听众水平。90deg 表示正上方，-90deg 表示正下方。
-
below - 与 ‘-90deg’ 相同。
-
level - 与 ‘0deg’ 相同。
-
above - 与 ’90deg’ 相同。
-
higher - 将升高度增加 10 度。
-
lower - 从当前升高度减去 10 度。
以下是一个示例 –
<style type = "text/css">
<!--
h1 { elevation: above }
tr.a { elevation: 60deg }
tr.b { elevation: 30deg }
tr.c { elevation: level }
-->
</style>
cue-after 属性
cue-after 属性指定在朗读元素内容后播放的声音，以将其与其他内容分开。可能的值包括：
- url - 播放的声音文件的 URL。
-
none - 不播放任何声音。
以下是一个示例：
<style type = "text/css">
<!--
a {cue-after: url("dong.wav");}
h1 {cue-after: url("pop.au"); }
-->
</style>
cue-before属性
此属性指定在朗读元素内容之前播放的声音，以将其与其他内容区分开来。可能的取值有：
- url - 要播放的声音文件的URL。
-
none - 不播放任何内容。
以下是一个示例：
<style type = "text/css">
<!--
a {cue-before: url("bell.aiff");}
h1 {cue-before: url("pop.au"); }
-->
</style>
cue属性
cue属性是设置cue-before和cue-after的速记方式。如果给出两个值，则第一个值是cue-before，第二个值是cue-after。如果只给出一个值，则应用于两个属性。
例如，以下两个规则等效：
<style type = "text/css">
<!--
h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
h1 {cue: url("pop.au") }
-->
</style>
pause-after属性
该属性指定在元素内容朗读完后应该暂停的时间。可能的值包括：
- time - 以绝对时间单位（秒和毫秒）表示的暂停时间。
-
percentage - 指的是speech-rate属性值的倒数。例如，如果speech-rate是每分钟120个单词（即一个单词需要半秒钟，或500毫秒），那么pause-after为100%意味着暂停500毫秒，pause-after为20%意味着暂停100毫秒。
pause-before属性
该属性指定在元素内容朗读前应该暂停的时间。可能的值包括：
- time - 以绝对时间单位（秒和毫秒）表示的暂停时间。
-
percentage - 指的是speech-rate属性值的倒数。例如，如果speech-rate是每分钟120个单词（即一个单词需要半秒钟，或500毫秒），那么pause-before为100%意味着暂停500毫秒，pause-before为20%意味着暂停100毫秒。
pause属性
该属性是设置pause-before和pause-after的速记方式。如果给出两个值，则第一个值为pause-before，第二个值为pause-after。
以下是一个示例：
<style type = "text/css">
<!--
/* pause-before: 20ms; pause-after: 20ms */
h1 { pause : 20ms }
/* pause-before: 30ms; pause-after: 40ms */
h2{ pause : 30ms 40ms }
/* pause-before: ?; pause-after: 10ms */
h3 { pause-after : 10ms }
-->
</style>
pitch属性
该属性指定了语音的平均音调（频率）。语音的平均音调取决于语音家族。例如，标准男性声音的平均音调大约为120Hz，而女性声音的平均音调大约为210Hz。可能的值为-
- frequency - 指定以赫兹（Hz）为单位的语音平均音调。
-
x-low, low, medium, high, x-high - 这些值不对应绝对频率，因为这些值取决于语音家族。
pitch-range属性
该属性指定了平均音调的变化范围。可能的值为-
- number - 一个介于’0’和’100’之间的值。音调范围为’0’时产生平板的单调声音。音调范围为50时产生正常的抑扬顿挫。音调范围大于50时产生动画声音。
play-during属性
该属性指定在元素内容被朗读时播放背景声音。可能的值可以是以下任一项-
- URI - 播放由
<uri>指定的声音作为背景声音。 -
mix - 当存在时，表示从父元素的play-during属性继续播放的声音与由uri指定的声音混合在一起。如果未指定mix，则元素的背景声音替换父元素的声音。
-
repeat - 当存在时，表示如果声音太短无法填充元素的整个持续时间，则声音将重复播放。否则，声音只播放一次然后停止。
-
auto - 父元素的声音继续播放。
-
none - 这个关键字表示静音。
下面是一个例子-
<style type = "text/css">
<!--
blockquote.sad { play-during: url("violins.aiff") }
blockquote q { play-during: url("harp.wav") mix }
span.quiet { play-during: none }
-->
</style>
richness属性
此属性指定说话声音的丰富度或亮度。可能的值为 –
- number - 介于 ‘0’ 和 ‘100’ 之间的值。值越高，声音越大。较低的值会产生柔和、悦耳的声音。
speak属性
此属性指定文本是否以何种方式被声音呈现。可能的值为 –
- none - 抑制声音呈现，使元素不需要时间进行呈现。
-
normal - 使用与语言相关的发音规则来呈现元素及其子元素。
-
spell-out - 逐个字母拼写文本。
请注意，具有值为 ‘silent’ 的 ‘volume’ 属性的元素和具有值为 ‘none’ 的 ‘speak’ 属性的元素之间的区别。前者占用与发音相同的时间，包括元素前后的任何暂停，但不会产生声音。后者不需要时间，也不会被呈现。
speak-numeral 属性
此属性控制数字的发音方式。可能的值为 –
- digits - 按个别数字发音。因此，“237”发音为“Two Three Seven”。
-
continuous - 将数字作为完整数字发音。因此，“237”发音为“Two hundred thirty seven”。单词的表示形式取决于语言。
speak-punctuation 属性
此属性指定标点符号的发音方式。可能的值为 –
- code - 分号、括号等标点符号将按照字面意义发音。
-
none - 不会发音标点符号，而是自然地呈现为各种停顿。
speech-rate属性
此属性指定发音速率。注意，绝对和相对关键词值都是允许的。可能的值为 –
- number − 指定每分钟单词的朗读速率。
-
x-slow − 等同于每分钟80个单词。
-
slow − 等同于每分钟120个单词。
-
medium − 等同于每分钟180-200个单词。
-
fast − 等同于每分钟300个单词。
-
x-fast − 等同于每分钟500个单词。
-
faster − 现有朗读速率每分钟增加40个单词。
-
slower − 现有朗读速率每分钟减少40个单词。
stress属性
该属性指定语音音调中“局部高峰”的高度。英语是一种重音语言，句子的不同部分被赋予主要、次要或三级重音。可能的值为−
- number − 值介于’0’和’100’之间。值的含义取决于所讲的语言。例如，标准的英语男性声音（平均频率=122Hz）的水平为’50’，以正常的语调和重音来说，与意大利语音的’50’的含义不同。
voice-family属性
该值是以逗号分隔的，优先级排序的语音系列名称列表。可能的值为−
- generic-voice − 值是语音系列。可能的值有’male’、’female’和’child’。
-
specific-voice − 值是具体的实例（例如，喜剧演员、三合一、卡洛斯、拉尼）。
这是一个例子−
<style type = "text/css">
<!--
h1 { voice-family: announcer, male }
p.part.romeo { voice-family: romeo, male }
p.part.juliet { voice-family: juliet, female }
-->
</style>
volume 属性
音量（volume）是指声音的中等音量。它可以有以下数值−
- numbers − 介于 ‘0’ 和 ‘100’ 之间的任何数字。’0′ 表示最小可听音量级别，100 对应最大舒适级别。
-
percentage − 这些值是相对于继承值计算的，然后剪裁到 ‘0’ 至 ‘100’ 的范围内。
-
silent − 完全没有声音。值 ‘0’ 不表示同 “silent”。
-
x-soft − 同 “0”。
-
soft − 同 “25”。
-
medium − 同 “50”。
-
loud − 同 “75”。
-
x-loud − 同 “100”。
以下是一个示例−
<style type = "text/css">
<!--
P.goat { volume: x-soft }
-->
</style>
带有类名goat的段落将会非常柔软。