Upload an Audio File
Navigate to: Content > Media > Add Media > Audio File.
Fields with an asterisk (*) are required.
- Name (*) — Give the audio file a name.
- Audio File (*) — This is the upload field.
- Add a New File (*):
- Click Choose File.
- Select the audio file to be uploaded.
- When the file is selected, click Open and the file uploads automatically.
- Click Save.
- To remove the audio file, click the Remove button beside the file name.
- Upload one file at a time.
- The size limit is 256 MB.
- Allowed audio file types include: .mp3, .wav, and .aac.
Embed an Audio File
- In the Text Editor, click the Insert from Media Library icon.
- Click Audio File.
- Select the desired audio file.
- Click Insert Selected.
- The Media Player appears where inserted in the Text Editor.
- To edit the Media Player, click Edit Media.
- The Edit Media dialog box opens.
- To align the Media Player on the page, choose None, Left, Center, or Right.
- Note: Choosing None aligns the Media Player to the Left. Choosing Left aligns the Media Player to the Left and wraps any text around the player.
- Check the Caption box to add a Caption to the audio file.
- Click Save on the Edit Media dialog box.
- Click the Media Player image.
- Type the audio file caption in the box beneath the Media Player.
Link to an Audio File on Another Site
- Click the Source icon in the Text Editor.
- Copy and paste the following code for audio controls:
- <p><audio controls=""><source src="" type="audio/mpeg" /></audio></p>
- Insert the source URL for the audio file between the quotation marks: <source src="" type="audio/mpeg" />
- In this example: https://www.ncpedia.org/sites/default/files//media/statesong2.mp3. The State Song of North Carolina, courtesy of NCPedia.org.
- Click Source again to close the Source Editor.
- Save the page.
- The Media Player now links to and plays an audio file on another website:
All audio and video content must include a transcript for full accessibility.
The purpose of a transcript is to provide content for website visitors who cannot get it from audio or visual media. A podcast transcript, for example, would include text paragraphs with each speaker identified (like an interview transcription). Descriptive transcripts for videos should include visual information to explain the content.
Transcripts can be made more useful by adding a summary, headings, links, and time stamps. For easy access, the transcript should be placed prominently, with the transcript itself—or a link to it—appearing directly below the podcast or video.
Examples from the W3C Web Accessibility Initiative:
Example Transcript of a Podcast Interview with Two Speakers (excerpt)
Rajwinder Kaur: Welcome to the podcast.
Shawn Henry: Thank you for this opportunity to share information about accessibility.
Rajwinder: Would you start by telling us a little about your role at W3C?
Shawn: I work within the Web Accessibility Initiative, W-A-I, pronounced "way."
Example Caption File of Audio Information (excerpt)
00:00:08.120 --> 00:00:10.240
Video isn't just about pictures,
00:00:10.241 --> 00:00:12.040
it's also about sound.
00:00:12.160 --> 00:00:16.280
Without the audio, you would have to guess what this film is about.
00:00:23.140 --> 00:00:24.730
Frustrating isn't it?
00:00:24.731 --> 00:00:26.880
Not knowing what's going on.
00:00:29.620 --> 00:00:32.840
That's the situation for everyone who can't hear.
Example Caption File of Audio Description of Visual Information (excerpt)
00:00:04.000 --> 00:00:07.980
<v Audio Descriptions> A man sitting at a desk starts watching a video on his computer.
00:00:17.260 --> 00:00:20.780
<v Audio Descriptions> The video on his computer shows a person speaking to the camera.
00:00:20.780 --> 00:00:23.140
<v Audio Descriptions> It is playing with no audio.
00:00:26.880 --> 00:00:29.620
<v Audio Descriptions> The man watching the video has a hearing aid.
Example Descriptive Transcript from the Caption Files Above (excerpt):
Audio Visual Video isn't just about pictures, it's also about sound. Without the audio, you would have to guess what this film is about. A man sitting at a desk starts watching a video on his computer. [no sound] The video on his computer shows a person speaking to the camera. It is playing with no audio. Frustrating isn't it? Not knowing what's going on. That's the situation for everyone who can't hear. The man watching the video has a hearing aid.
For more information, visit the Transcripts page on the W3C Web Accessibility Initiative website.