How to Add Audio Files to Drupal 8 Sites

This week, an OSTraining member asked us about adding audio files to their Drupal 8 site.

Using the Drupal AudioField module, I will explain how you can display a simple HTML5 player for your site’s audio files.

In order to get started, you must download, install and enable the AudioField module.

Adding AudioField to a content type

• Go to Structure > Content type

Here we can add or modify an existing content type to add the Audio Field.

• Select +Add Field.

Configure the audio field.

• In the “Add a new field” section, select “file“.
• Give the audio an appropriate label.
• Select “save and continue”.

Configure the audio field settings.

• On the field settings screen, you can specify the number of files you can attach. I’m going to leave this as its default.

Setting the file types

We need to make sure that we define the file extensions we are going to use. This can be done in the allowed file extensions area.

For my site, I removed the “txt” entry and added “mp3”, because there is no need to allow text files to be uploaded to an audio attachment.

Now we can edit the field. It’s important to note here that PHP will directly affect the file size limit you can use. While Drupal can set a maximum size, that does not override your server’s PHP setting that states how big the file can be.

Create the content

Now that we have created our new content type with audio field, we need to add the content and make sure it works.

You will notice that the first image doesn’t work. In fact, it create an error because the file size was marginally too big, thus exceeding the filesize limit. The second image is how it should look if it is added successfully.

# Image 1, Error 500 the file was too large.

# Image 2, Note the blue audio title indicating that it has uploaded successfully.

Enabling the HTML5 Audio Player

Now we have our content but still no audio player. To display the audioplayer that comes with the audiofield module, you need to go back to:

• Structure > content types
• Using the dropdown for the content type, select “Manage display”
• Under “formats”, change it from generic file to audio player. This will enable a widget for the field. By default an HTML5 player should be selected. You can check by clicking on the gear on the far right and should see this.

Save the display and go back to the content. You should have a nice clean audio player with a duration and volume controller.