A sound clip of Zersiax's screen reader in action.
audio
element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
The audio
tag supports the controls
attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
Here's an example:
<audio id="meowClip" controls>Note
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
audio
element after the p
. Include the controls
attribute. Then place a source
tag inside the audio
tags with the src
attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and type
attribute set to "audio/mpeg".
Noteaudio
tag.
testString: assert($('audio').length === 1, 'Your code should have one audio
tag.');
- text: Make sure your audio
element has a closing tag.
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/audio
element has a closing tag.');
- text: The audio
tag should have the controls
attribute.
testString: assert($('audio').attr('controls'), 'The audio
tag should have the controls
attribute.');
- text: Your code should have one source
tag.
testString: assert($('source').length === 1, 'Your code should have one source
tag.');
- text: Your source
tag should be inside the audio
tags.
testString: assert($('audio').children('source').length === 1, 'Your source
tag should be inside the audio
tags.');
- text: The value for the src
attribute on the source
tag should match the link in the instructions exactly.
testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the src
attribute on the source
tag should match the link in the instructions exactly.');
- text: Your code should include a type
attribute on the source
tag with a value of audio/mpeg.
testString: assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a type
attribute on the source
tag with a value of audio/mpeg.');
```
A sound clip of Zersiax's screen reader in action.