Skip to content
Coursebox Support home
InboxAsk a human

How to use your own audio file for lesson narration (instead of AI-generated audio)

Coursebox's built-in AI Audio feature generates voiceovers from your text. It does not accept an uploaded audio file as the source. If you want to use your own recording instead, such as a narrated voiceover, a podcast-style clip, or a professionally recorded lesson, you can add a custom audio player to any course page using an HTML snippet in the Text Editor. This guide shows you how.

What you need

  • Your audio file in a common web format. MP3 is the safest choice, and AAC, OGG and WAV also work in most browsers.

  • A direct, public URL for the file. See Step 1 for hosting options.

  • A Text Editor block on the course page you're editing.

No coding experience is required. You'll copy one short snippet and paste in your link.

Steps

1. Host your audio file and copy its direct URL

The player needs a URL it can load. It cannot play a file straight from your computer.

  • Recommended: host the file on your own website or server, an S3 bucket, or a media CDN, and copy the direct link to the file.

  • Dropbox or Google Drive: use their direct-link sharing option, not the regular share link. A share link opens a preview page, which the player can't use.

  • Inside Coursebox: you can try uploading the file via + then Downloadable File (see Add Multimedia) and testing whether that file's link works in the player. This feature is built for downloads rather than streaming, so test on an unpublished page before relying on it.

Check the link is public. If the file sits behind a login, it will play for you but not for your learners.

2. Open the HTML view on your page

  1. Open the course page where you want the audio to appear.

  2. Add a Text Editor block (Text menu, then Text Editor), or click into an existing one.

  3. Click the </> icon in the block's toolbar to switch to HTML view.

If you can't find the </> icon, see Edit a Course for a walkthrough.

3. Paste the audio player snippet

Paste the snippet below and replace the src value with your file's URL:

<audio controls src="https://your-hosting-link.com/your-audio-file.mp3" style="width:100%">
  Your browser does not support the audio element.
</audio>

The URL must sit in the src attribute on the <audio> tag itself, exactly as shown. Do not use the common alternative where the URL lives in a nested <source src="..."> tag inside the <audio> element. Coursebox removes the inner <source> tag when the page saves, which leaves an empty player showing 0:00 that never plays. The single-src form saves intact and plays correctly. The only thing you give up is multi-format fallback across several <source> tags, which is irrelevant for a single MP3.

Two optional tweaks:

  • controls shows the play, pause and volume bar to learners. Keep it.

  • Add autoplay inside the <audio ...> tag if you want the audio to start on page load. Use it sparingly: autoplay can be jarring, and some browsers block it unless the audio is muted.

4. Save and check the result

Click the </> icon again to leave HTML view, then Save the page. Switch to Learner view and confirm:

  • The play bar shows the track's full duration, not 0:00.

  • Pressing play actually plays your audio.

  • It works on mobile too, since some hosts block direct streaming on certain devices.

Troubleshooting

  • The player shows 0:00 and never loads after saving. Your markup used a nested <source> tag, which Coursebox strips on save. Move the URL into the src attribute on the <audio> tag, as in Step 3, and save again.

  • The play bar appears but nothing plays. The src is probably not a direct file link. It should end in the actual file extension (.mp3, .wav and so on), not point to a share or preview page.

  • It plays for you but not for learners. The file is hosted somewhere that requires a login. Move it to a public link.

  • You can't see the </> icon. Make sure you're in a Text Editor block, not another block type, and that you're in the course editor rather than Learner view.

A note on accessibility

A custom player does not connect to Coursebox's Hands-Free Mode, which only reads the platform's own AI-generated audio tied to text blocks. If accessibility is your reason for using recorded narration, keep a text transcript on the page alongside the player so screen reader and Hands-Free Mode users aren't left without the content.

Related articles