Embedding an Audio Element in the Image Explorer XBlock

Here's a quick guide to embedding an audio element into the Image Explorer XBlock.

Note: Make sure you've installed & enabled the Image Explorer XBlock before attempting this.

Upload your audio file to Files & Uploads

  • How to upload a file to your course
  • Note: Files must be under 10mb, so if you're working with uncompressed audio like WAVs or AIFFs, you will want to find a way to compress it down.

Add an Image Explorer component

This will be found underneath the "Advanced" component category.

Click Edit

Insert the following HTML code for your audio file to play in a hotspot pop-up

<audio controls="controls" preload="none" src="[your_audio_file_URL].mp3"></audio>

You can use either the static URL or the web URL. You will just need to make sure you follow the above syntax. Make sure to click Save when you're done.

That's it! You'll now see an audio player in the hotspot feedback window like you see below.

Still need help? Contact Us Contact Us