freeCodeCamp/improve-accessibility-of-audio-content-with-the-audio-element.md at dec409a4bd667e4979305cc1e86e0702bbc2c707

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

3.4 KiB

Raw Blame History

id, challengeType, videoUrl, forumTopicId, title

id	challengeType	videoUrl	forumTopicId	title
587d7789367417b2b2512aa4	0	https://scrimba.com/c/cVJVkcZ	301014	使用 audio 元素提高音频内容的可访问性

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 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在p标签之后添加一个具有controls属性的audio标签。然后在audio标签内添加一个source标签，并且设置src属性为"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3"，并且设置type属性为"audio/mpeg". 注意：
音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。

Tests

tests:
  - text: '你的代码应该包含一个<code>audio</code>标签。'
    testString: assert($('audio').length === 1);
  - text: '确保你的<code>audio</code>标签是闭合的。'
    testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
  - text: '<code>audio</code>标签应具有<code>controls</code>属性。'
    testString: assert($('audio').attr('controls'));
  - text: '你的代码应具有<code>source</code>标签。'
    testString: assert($('source').length === 1);
  - text: '<code>source</code>标签应该在<code>audio</code>标签中。'
    testString: assert($('audio').children('source').length === 1);
  - text: '<code>source</code>标签中<code>src</code>属性的值应该与教程中的链接一致。'
    testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
  - text: '<code>source</code>标签中应具有<code>type</code>属性，其值为 audio/mpeg。'
    testString: assert($('source').attr('type') === 'audio/mpeg');

Challenge Seed

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

Solution

// solution required

3.4 KiB Raw Blame History