Audio and Podcast File Embed

Embedding or Linking to Audio Files

Summary

Audio files can be embedded in any text editor, or linked from another website.

Audience

Website Managers. 

How To

  • 1

    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.

    Name of Audio File

    • Audio File (*) — This is the upload field.
    • Add a New File (*):

    Choose audio file.

    • Click Choose File.
    • Select the audio file to be uploaded. 
    • When the file is selected, click Open and the file uploads automatically.

    Uploaded audio file.

    • Click Save.

    Save button.

    • To remove the audio file, click the Remove button beside the file name.

    Note:

    • Upload one file at a time.
    • The size limit is 256 MB.
    • Allowed audio file types include: .mp3, .wav, and .aac.
  • 2

    Embed an Audio File

    •  In the Text Editor, click the Insert from Media Library icon.

    Insert from Media Library.

    • Click Audio File.

    Select Audio File.

    • Select the desired audio file.

    Select Audio File.

    • Click Insert Selected.

    Inset Selected button.

    • The Media Player appears where inserted in the Text Editor.

    Example:

    Media Player

    • To edit the Media Player, click Edit Media.

    Edit Media Player.

    • The Edit Media dialog box opens.
    Align:
    • To align the Media Player on the page, choose None, Left, Center, or Right.

    Align the Media Player

    • 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.
    Caption:
    • Check the Caption box to add a Caption to the audio file.

    Add audio file caption.

    • Click Save on the Edit Media dialog box.

    Save button.

    • Click the Media Player image. 
    • Type the audio file caption in the box beneath the Media Player.

    Edit Media Player.

  • 3

    Link to an Audio File on Another Site

    •  Click the Source icon in the Text Editor.

    Source icon.

    • 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.

    Source button.

    • Save the page.
    • The Media Player now links to and plays an audio file on another website:

  • 4

    Transcripts

    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.