Audio files can be very helpful in giving users extra content. A great use for audio files can be for giving extra instruction on a page.

For example, if you were to have a form, and wanted to give instructions on how to fill it out, an audio file might be a good way to do that. Instead of having the information typed out, and people would be forced to scroll up and down between them an audio file can just play in the background. People can hit play, and then scroll down to the form itself and be filling it out as they hear the instruction.

This more simply can just be used to share audio bits from some kind of recorded content that could be useful as well.

<audio controls>
<source src="file.mp3" type="audio/mpeg">
<source src="file.ogg" type="audio/ogg">
<source src="file.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>

File Types

There are three main file types that can be linked using the audio tag. MP3, Ogg, and Wav may be used with the audio tag. Please have your audio file in these forms before trying to link onto your webpage. When writing the code the type="" must be present and match the type of file you are linking to otherwise it will not display.

As you may have noticed all three different files are being linked. This is the new standard for HTML5 in that the <audio> can look for multiple different files, and will only display one. The thought here was that if for some reason the browser was unable to play a certain file, or if one of the files were not working for some reason there would be others there as a backup to link to.

In this way the text works the same. The text saying Your browser does not support the audio tag. will appear in place of the audio player if the files were not able to play for any reason. This can be a useful safety net to use when develop your site to see if you have linked your files correctly, or if files are not working properly.

Accessibility

When using an audio file it is important to have a transcript of what the audio is saying. To abide with University Standards we must have all videos and audio come with some form of transcription so they will be accessible to all users that come to your page. This can either be written on the page next to the player or must at least be navigable by a link near the player to a full transcript of the audio.

For the audio found above I used the split column page style to place the text next to the audio player. Another option to consider is using the <aside> tag to make a section for the transcript to live there. As long as the information is there and is easily accessible then you should be alright. If you have any questions or concerns about accessibility please contact Ginny Bessler.