3.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7789367417b2b2512aa4	使用 audio 元素提高音频内容的可访问性	0	https://scrimba.com/c/cVJVkcZ	301014	improve-accessibility-of-audio-content-with-the-audio-element

--description--

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。可以在 audio 上下文中为音频内容添加描述文字或字幕链接，使听觉障碍用户也能获取音频中的信息。

audio 支持 controls 属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件，而且还支持键盘操作。controls 属性是一个布尔属性，即不需要提供属性值。只要这个属性出现在 audio 标签中，浏览器就会开启播放控件。

举个例子：

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>

**注意：**多媒体内容通常同时包含音频与视频部分，它需要同步的字幕与逐字稿，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。

--instructions--

是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验屏幕阅读器的朗读效果，请在 p 标签之后添加一个具有 controls 属性的 audio 标签。然后在 audio 标签内添加一个 source 标签并设置 src 属性值为 "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3"。同时，请将 source 的 type 属性值设置为 "audio/mpeg"。

**注意：**音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。

--hints--

应该包含一个 audio 标签。

assert($('audio').length === 1);

确保 audio 元素有结束标签。

assert(
  code.match(/<\/audio>/g).length === 1 &&
    code.match(/<audio.*>[\s\S]*<\/audio>/g)
);

audio 标签应存在 controls 属性。

assert($('audio').attr('controls'));

代码中应存在 source 标签。

assert($('source').length === 1);

source 标签应位于 audio 标签中。

assert($('audio').children('source').length === 1);

source 标签中 src 的属性值应该与教程中的链接一致。

assert(
  $('source').attr('src') ===
    'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
);

source 标签中应具有 type 属性，其属性值应为 audio/mpeg。

assert($('source').attr('type') === 'audio/mpeg');

--seed--

--seed-contents--

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>



  </main>
</body>

--solutions--

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>
    <audio controls>
      <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
    </audio>
  </main>
</body>

3.2 KiB Raw Blame History