howto: Install Soundmanager 2 on Drupal 7
Previously in the Drupal 7 for Music series:
- web-install a Drupal 7 site
- basic configuration using the WYSIWYG module,
- instal and configure the Media module for music streaming use.
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:
- 360 UI - the most amazing and popular
- Page player - plays all files in a page as a playlist
- Inline player - small, good for teasers
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.
It's time to configure the Soundmanager 2, then....
| Attachment | Size |
|---|---|
| manage_fields.png | 59.37 KB |
| manage_display.png | 74.34 KB |
Comments
Path
Hi Viktor,
Thanks for your tut, I have small issue with the path.....I am new to Dupral.
You say
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.
I have done that, and the path is below, but when i try to say, i get an error saying,
Error message
The directories of SoundManager 2 do not exist.
sites/all/libraries/soundmanager2/
Please help.
"... when i try to say, i get
"... when i try to say, i get an error..." - I really don't understand what you mean here. Can you please clarify?
HI Victor, This is what i
HI Victor, This is what i mean. But if you look at the screenshot above, you will see that i do have the folders as per your tut.
is it a picture?
I am sorry, didn't get it again. Was it a picture? You can't attach a picture on this blog, but you can post a link to it?
Hi Victor. Sorry i thought i
Hi Victor. Sorry i thought i could. i just wanted to share what i am trying to explain above.
http://pull.imgfave.netdna-cdn.com/image_cache/130991060234006.png
http://pull.imgfave.netdna-cdn.com/image_cache/1309945843611869.png
http://pull.imgfave.netdna-cdn.com/image_cache/1310028705221831.png
I followed your tutorial. But i get an error on the path. I am not sure what im doing wrong. The error message is
Error message
The directories of SoundManager 2 do not exist.
sites/all/libraries/soundmanager2/
This is sooo weird! 1. Do
This is sooo weird!
1. Do you flash your cache regularly?
admin/config/development/performanceI discovered that at least half of the problems in Drupal 7 were solved after regular "Clear All Catches" procedure. I can't explain why - it simply works.
2. Remove (uncheck) the "Overlay" and "Toolbar" core modules from Drupal 7 - personally, they made enabling "clean urls" impossible. The Overlay module does change the address of your page when you view it - it's a serious suspect in your case, I would say
3. Do you have Clean urls at all? Do enable them, specially for cases like this one
4. Try "dirty url": once you remove the overlay, instead of
admin/config/media/soundmanager2/soundmanager2try
?q=admin/config/media/soundmanager2/soundmanager25. "Reboot" - the last option. I mean, start a fresh new installation on another test subdomain and see what happens. that might take less time then trying to figure out why this happens...
Soundmanager2
Hi Viktor,
I get to the part about media / soundmanager.
Then I go to Configuration > Media > Soundmanager2 settings and check the path to SM2 files. Save.
there is no Soundmanager2 configuration. Unless I select it in manage display for audio.
Note, I do have mediaelement.js installed. Maybe that is interfering.
Seems like a straight forward installation. Good tutorial. Not everyone takes the time to help.
"...there is no Soundmanager2
"...there is no Soundmanager2 configuration...."
I don't understand what do you mean. There isn't a central place to configure SM2. You have go through various files, as in the following article:
/configure-soundmanager2-drupal-7
Getting this all set up
So, I have done my best to follow your instructions from all of the posts in this series. I have checked and double checked, and aside from a change to allow the audio files to be in a public folder, I have done everything directly by method you prescribed.
However, when I get to the point of clicking "Audio Playlist" in the Add Content Menu, all I get is a refreshed Add Content Page. I never get to the page to actually input my audio files or anything, for that matter.
I have checked every related module and everything seems to be correct, including permissions. I do not get any form of an error message, or any dialogue at all. If you have any thoughts on why Drupal is behaving in this way, I would really appreciate the insight.
Oh, one things that was slightly different from your guide, I had to manually add "Audio Playlist" to the Add Content Menu through the Admin/Structure system. I pointed the link to node/add/audio_playlist, in keeping with the way article and basic page are set up...perhaps this could have been my error, but I have tried multiple different paths to point to audio_playlist, and this is the only option that Drupal would allow.
Thanks for the guide, and any additional help you may be able to add on my specific issue. Brandon
One at a time
Ok, it's difficult to understand from your comment why D7 behaves that way, but we can try a few checks:
1. in /admin/structure/types/manage/audio_playlist/fields - do you see the audio field? I have attached an image to this post for comparison.
2. in admin/structure/types/manage/audio_playlist/display - do you see the audio field with the SM2 Page Player? I have attached image 2 for comparison
3. Are you saying that in node/add you DON'T see the Audio Playlist as a content Type? If so, and generally if something is not correct, I would do the Add New Content Type again. Just name it Audio Playlist2 or similar. Also, re-add the audio field - give it a new name (mp3 or smilar). The error is along those lines, most likely a simple check-box or similar that was (not) clicked:-)
One of the main reasons of these articles is that I can establish for myself procedures which work "out of the box" - and hopefully help others along the way.
See how it goes and let me know.
Ok, so I have noticed one
Ok, so I have noticed one issue, and it seems to be something that cannot be undone. The File field is set to Public, as opposed to Private, and both bubbles are "greyed out". Of course it says that information has been added to the database, so the settings for File cannot be changed.
That is the only difference that I can find anywhere, but I am still stumped as why nothing happens when I click node/add/audio_playlist.
At this point, I have even tried deleting the modules and reinstalling them to reset the settings for the File field, but it seems to be saved some where, even when I delete the field or the modules.
Thanks for taking the time to offer some pointers, getting these mp3s up is about the only things keeping me from going live with my site.
Ok, I checked my /fields and
Ok, I checked my /fields and /display against your instructions and your image, they were correct.
In node/add I see "Audio Playlist", after manually adding it to the "Add Content" Menu through structure/menus. Apparently there is a bug with some D7 installs using the latest version that does not cause new content types to automatically appear in node/add after the content type is created.
I discovered this particular issue after thinking, as you suggested, that I had left something undone when I went through all the steps, but apparently, it has happened to several others, even when just creating a new, simple content type.
With that said, I see "Audio Playlist" and it is directed to node/add/audio_playlist, but when I click "Audio Playlist" all I get is a refresh of the node/add page with "Audio Playlist" highlighted as a visited link.
Beyond that I am completely at a loss with what is happening.
Hopefully this description makes it a bit more clear on what is happening in my case. Thanks for the ideas.
This is beyond my knowledge,
This is beyond my knowledge, I am afraid. This has to do with hard-coding - I am only a musician who is trying to understand the basics of music website building.
I wasn't even aware that adding New content type has a bug in D7. In the forums out there something about PERMISSIONS (to add new content) is mentioned, but I guess you are building as user #1 as most of us:-)
I know this kind of situation so good - we've all go there occasionally.:-)
Only thing that comes in my mind is: CACHE REFRESH. In D7 this has to be done more often than in D6. /admin/config/development/performance.
What I would personally do is: I would definitelly do anotehr web-install - subdomain or so, with only the Media + SM2 modules and try to Add new content Type there and see if that works.