Skip to main content Skip to navigation

H5P Audio

Once you have logged into the H5P website find the Create New Content button (it is usually on the Content tab of your account).

Add the name of your content to the Title field and then choose Audio from the Select content type dropdown menu by clicking on the appropriate Use button.

Audio screen shot

Click on the + button in the Source files section to upload your audio file. There is no way to record your audio file in this module; you need to use recording software such as Audacity to create your file first (or use the H5P Audio Recorder module). Once you have added a file you will see a Copyright button with a number of fields that you will need to complete. This will also add a Rights of use menu option to the file alongside the Embed and Download buttons discussed towards the end of this page.

Audio screen shot

Choose whether you want to use a Minimalistic, Full or Transparent layout using the Player mode dropdown menu (personally I would choose the Full option as the other options make the player controls difficult to see and use). The default settings for the next three check boxes are shown above and I would recommend leaving them as they are - particularly the Enable controls check box as this gives your users more control over how they play the file.

Audio screen shot

If you click on the Text overrides and translations arrow you can also change the Audio content name field and the Audio not supported message but you can also leave them as per the default settings as these seem to work fine.

Audio screen shot

Add any tags to the Tags section and choose whether you want to display the buttons listed above with your audio module. Personally I would leave all of the buttons checked as per the default settings as it gives both you and your users more flexibility. Then click on the Save button.

If you click on the Embed button at the bottom of the audio module once it has been generated, you can copy the HTML code and embed it into a web page just like this:

Please be aware that the HTML code generation box is poorly displayed in browsers. So it may take a bit of juggling to select the HTML code. It seems to appear slightly better in Internet Explorer than it does in either Firefox or Chrome.