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.
I’ve been putting off transferring my site to D8, but now you’ve made it even more necessary! thanks Daniel.
You are welcome MeFree
If you need any other advice feel free to ask.
For devs – If you want a player other than HTML5, just create an “AudioPlayer” plugin and override renderPlayer() and you are done.
Thanks for the tip 🙂
Please does the audio player support file sizes as large as 20MB? And if yes how do I go about it, thank you so much for ur help. firstname.lastname@example.org
file size is all depends on the field configuration. Just increase the file upload size in your field and you are done.
Does it mean that one is limited to the size of audio files to be uploaded, what if I wanted to upload an audio file size of say maybe, 20MB, how do I go about getting it done?
You need to change your PHP settings to allow bigger files.
Great article but how do I show the length of the mp3?
Followed your instructions (thank you!). Everything is there in the backend, but no audio-player is visible in the published article.
Thank you – this step by step explanation is very helpful.
There is one thing I could not do: I would like the Audio player to be displayed in my view (which is a list of audios). Instead, when I click on the audio, whick is displayed as a link, a new page opens which shows jus the audio player. How can I display the player right on the page where my view of audios is?
How can we create Audio playlist? Or could you please suggest any module similar to jPlayer for Drupal 8.
Thankyou so much for your help. 🙂
According to Drupal.og:
“Currently the Audiofield module supports the following audio players, which must be downloaded and installed as libraries:
Default HTML5 audio player (built-in)
Audio.js – https://kolber.github.io/audiojs/
jPlayer – http://jplayer.org/
MediaElement – http://mediaelementjs.com/
Projekktor – https://github.com/frankyghost/projekktor
SoundManager – http://www.schillmania.com/projects/soundmanager2
wavesurfer.js – https://wavesurfer-js.org
WordPress Audio – (supported, but no longer available)
All of these supported audio players offer customization options in line with those made available by the audio players themselves. Those players above which are themable offer theme options as well.”
Any idea which player lullabot is using for their podcasts?
Is there some good and noob friendly documentation about theming audiofield?
The Audio player libraries are rendered using Twig templates. We do offer a specific [url=https://www.ostraining.com/class/twig/]video class on using the Twig[/url] template engine, or Drupal.org also has a [url=https://www.drupal.org/docs/8/modules/audiofield/theming-audiofield-players]short article[/url] about this topic.