How to Add Audio Files to Drupal 8 Sites

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.

newcontenttype1

Configure the audio field.

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

addingtheaudiofield2

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.

audioconfig3

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.

audiofieldconfig4

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.

addingtheaudiocontent5

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

addingtheaudiocontent6

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.

checkingthehtml5playerisactive7

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

final8

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

16 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mefree
7 years ago

I’ve been putting off transferring my site to D8, but now you’ve made it even more necessary! thanks Daniel.

Rohit Joshi
Rohit Joshi
7 years ago

For devs – If you want a player other than HTML5, just create an “AudioPlayer” plugin and override renderPlayer() and you are done.

Jamin
Jamin
7 years ago
Reply to  Rohit Joshi

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. zeal2shine@gmail.com

Rohit Joshi
Rohit Joshi
7 years ago
Reply to  Jamin

file size is all depends on the field configuration. Just increase the file upload size in your field and you are done.

Jamin
Jamin
7 years ago

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?

steve
steve
7 years ago
Reply to  Jamin

Hi Jamin,
You need to change your PHP settings to allow bigger files.

Latchman Nakhul
Latchman Nakhul
6 years ago

Great article but how do I show the length of the mp3?

josfrenken
6 years ago

Followed your instructions (thank you!). Everything is there in the backend, but no audio-player is visible in the published article.

Annette
6 years ago

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?

Sai K
Sai K
3 years ago

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. 🙂 

mikall
3 years ago
Reply to  Sai K

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.”

Nitish
Nitish
3 years ago
Reply to  mikall@ost

Any idea which player lullabot is using for their podcasts?

Samuel Ramirez
Samuel Ramirez
3 years ago

Is there some good and noob friendly documentation about theming audiofield?

mikall
3 years ago
Reply to  Samuel Ramirez

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.

16
0
Would love your thoughts, please comment.x
()
x