webadmin's picture

Drupal 7 Install Soundmanager 2

Drupal

Here I am shifting my focus on installing the Soundmanager 2 player on Drupal 7. I need to have the Media and Filefield Sources modules installed and the Private folder established for this.

Soundmanager2 is a media player mainly developed for audio using Flash and JavaScript, it has highly configurable settings and looks pretty amazing. In Drupal, it comes with three modes/designs:

To use in Drupal 7, I must first download the Soundmanager2 Module - this is independent project, to make the SM2 compatible with Drupal. At the time of writing (June 2011), the porting to D7 just started, so the module is still in development phase. But it works!

Soundmanager2 module: so I download the SM2 module form Drupal, extract it and place it in my /sites/all/modules directory; I then enable it.

Soundmanager2 player: now I download the SM2 player from the  Shillmania website.  I extract the folder, rename it to soundmanager2 and place it in my /sites/all/libraries folder. 

Then I go to Configuration > Media > Soundmanager2 settings and check the path to SM2 files. Save.

To create containers for SM2 player, I need to create a content type for music which will have an audio field enabled to stream mp3.

And now is the time for thinking and planning:

  • where am I going to use the player? Teaser, full page, both?
  • which of the above players I am going to use and in which situation?
  • am I going to have playlists as well?

Here are my personal needs:

  • use single player in one-page-per-song scenario
  • use the player to populate a playlist; 

I need thus to create two new types of Content:

  • Song: use the 360 UI as body player, and the Inline as a teaser player 
  • Album: use the Page player for the body, no player for the teaser

Now when I know what I am doing, I go to Structure > Content types > Add content type. I give it the name Song, check the other settings (Publishing options, Display, Comment and Post  settings) and and click Save and add fields.

I go to Add existing field and give it the label Audio . Next I select the file field. Save.

Now I am in the Audio Field settings. I need to set mp3 as allowed file extension

I set the file (sub)directory as music (meaning sites/default/files/private/music). 

(Maximum upload size is setup by the php.ini file)

I enable the Description field.

I click to expand the FILE SOURCES link and

  • select all three sources there.
  • In AUTOCOMPLETE REFERENCE OPTIONS I select contains string;
  • in FILE ATTACH SETTINGS I put private/music as the File attach path (selecting within the files directory option).

In AUDIO FIELD SETTINGS, I will set the number of values as Unlimited.

I will  Enable the Display field as well as Files displayed by default.

Upload destination is Private files. If you have set up your File System correctly, the music will now be uploaded into the private folder, thus not accessible for the outer world. And Drupal will place your music in the "music" folder within the private folder.

Save settings.

Finally, I go to Manage Display (/admin/structure/types/manage/song/display) to set the visibility of the player. 

I hide the LABEL of the Audio field, and in its FORMAT I select Soundmanager 2 UI 360; I am now given the option to further trim  the player. Ignore for now. Save

Now to the Teaser section of the Manage display of the Song type content (/admin/structure/types/manage/song/display/teaser). There I hide the LABEL for the Audio field again and in the FORMAT I select Soundmanager 2 Inline Player. I am now given the option to trim the length, which I ignore and click Save.

 I am done with the Song content type.I repeat now the whole new content type procedure. There are two differences:

  • I name the new content type: Album
  • in the Manage Display properties, I set Soundmanager 2 Page Player as default (body) and <hidden> for the Teaser part. 

That's all!


It's now time to test the configuration, so I Add Content > Song. Set a title and scroll down; there I see the Audio field with the Browse option. I choose my mp3 song and when done, I click Upload. When finished, I write the song title in the Description field of the newly uploaded mp3.

Click Save (the page) and the shiny SM2 UI 360 player should appear. If you Promoted to  Front Page, the player there (in the teaser) will be the small, inline SM2.

Do the same with Add Content > Album. Put two or more files, and when done, all the songs in the page will play as if in a playist. No player will appear in the teaser.

The options are endless - what kind of player on what kind of page content, etc.