[Drupal] How to embed an MP3 player on your Drupal website?

By | 23rd Feb 2015 | 2 min read

The article explain how to make mp3 files directly streaming on your website without users having to download the file. To do so I am using contributed module from Drupal that is Soundmanager2 module. It provides the Drupal interaction with the soundmanager2 libraries containing three default player style. Here I am just creating a content type for uploading the mp3 files. By creating a node to this content type we can upload the files and displaying mp3 player will be done by soundmanager2 libraries. For integrating MP3 file in your Drupal 7 , you need download modules and the libraries.

  1. Download and enable the Soundmanager2 module.
  2. Download the JavaScript library for Soundmanager2.

Extract the Soundmanager2 zip file and place it on your webserver in the following directory: /sites/default/libraries/soundmanager2 (make sure you place all the files in this directory). You can create the folder libraries if they don't exist.

Before displaying MP3 files on your Drupal website you need to define the content type which will be associated with the MP3 file. You need to create a content type . For creating a content type you need to go to Home -> Administration -> Structure and add content type. I have create a content type by name "Songs".

After creating content type go to manage display of your created content type and add new field with "Field type" and "widget" as 'File' and save the field. While saving the settings , you'll find "Allowed file extensions" you need to change the type to "mp3". Now go to 'Manage Display' and choose 'Soundmanager 2 Page Player' for the 'MP3 File' field.

Finally Create a node of this content type and upload your MP3 File. Now go to your created node and you'll find your node is now displaying an MP3 player. You can just click on it and hear the music :-)