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
• Install Soundmanager2 on Drupal 7

I am now going to enter some basic setup and configuration of the Soundmanager 2 player; some of it specific to Drupal 7; other SM2 related. 

First of all - the configuration options are endless. Here I will set the most basic options which I personally found useful. All these options depend on the way of installation of the Media and SM2 modules as described in the previous articles above.

Playlist order. So, in the previous article I created a playlist by uploading a few mp3 files. Their order can be changed in the edit mode of the page in question, scrolling down to the Audio field. On the right top corner there's a little link: Show row weights. Clicking it, the weight value of the rows becomes visible and thus adjustable.

Upload options (Add a new file): This is one of the greatest features of Drupal 7 so far. For these options to work, the SM2 setup needs to be done as in my previous article.

• Remote url: I need a valid and non-restricted mp3 url from anywhere on the web. Clicking Transfer, transfers the file to the default upload folder on my site.
• Reference existing: the excellent thing about the D7/SM2 combination is that one can reference the same mp3 on various pages and playlists, without the need to re-upload it. So, once I've got a few songs on the web-server, instead of uploading the same  song, I click on the Reference existing and type a few letters of any part of the file name already uploaded earlier. Drupal then shows me the available files. I point at one and click Select.
  • This method can be used for mass-upload as well: put all my files in the "music" folder, and ten just reference them!
• File attach: This method may be used to attach files that exceed the file size limit. Files may be attached from the path set in the audio file field: /admin/structure/types/manage/album/fields/file, usually uploaded through FTP.

SM2 specific settings: These can be accesses in my SM2 player folder, the one I uploaded in /sites/all/libraries.  The way change these settings is: I open a player's script in a notepad, make my changes and save. Then upload the script on the server, replacing the old version (I usually rename the original version - just in case I mess up:-).

So far, I've been messing up with the Page Player only, so below are some tweaks for its configuration.

Add a Peak Meter. I need to tweaks two scripts for this option to be  enabled:

• The first script I need to tweak is /script/soundmanager2.js. Here I change the Flash version from 8 to 9, in order to get some of the more advance features (top of script).
• The second script is the page-player.js and is located in /demo/page-player/script/. Here I can enable "usePeakData: true, // [Flash 9 only]: show peak data"; this gives some extra animation while the song plays. Eventually, here I also disable: " allowRightClick: false, // let users right-click MP3 links ("save as...", etc.) or discourage (can't prevent.)" - but it doesn't seem to work so far.

Colours and fonts. The beauty and usefulness of Soundmanager2 comes in its endless possibilities to tweak its display. This is done though the appropriate CSS files. Page Player's CSS is located here:  /demo/page-player/css/page-player.css

I spent a whole afternoon trying to understand and distinguish the various aspects of the page-player.css. I finally made some nice pointers as to which property affects which part of the player. I am attaching that custom CSS here; it will surely help you understand its functions if you are a beginner or hobbyist like me:-)

---

Update 11/06/2011
Finally I "discovered" the mystery of adjusting the famous 360UI player in D7. Thus:

• To set auto-play and some other "mechanic" (player-related) options, plus some of the colours (time-bar & wave-forms), I need to access the ui360.js script within the modules folder: /sites/all/modules/soundmanager2/ui360.js
• To adjust the rest of the colours (counter, border, background colours), the file I need is in the libraries folder: /sites/all/libraries/soundmanager2/demo/360-player/360player-visualization.css

And to finish the story, the Inline Player, the last available to Drupal so far:

• player-related options: /sites/all/libraries/soundmanager2/demo/play-mp3-links/script/inlineplayer.js
• css for colours: /sites/all/libraries/soundmanager2/demo/play-mp3-links/css/inlineplayer.css

In the article about installing Soundmanager2 on Drupal 7, I mentioned the general concept in using the three various SM2 players ported in D7 so far. Here I am going to add a bit more detail.

Album page is the place where information about the album should appear: album cover, description and all the songs in a playlist (I use 1 minute lo-fi versions). For that I use the Page Player with playNext: true and autoPlay: false. That configuration will allow it to play all the songs one after the other.

Song (single) page: the 360 UI Player, with playNext: false and autoPlay: true. This is a Youtube style page: the player is at the top, starts playing when a person (or robot:-) arrives at the page, it looks great to see the player in action, intuitive enough to stop it.  Next to the player is a little image, under it - song description, lyrics etc.

Song page teaser: Inline Player with: playNext: true and autoPlay: false. The playNext feature here gives some truly exciting options, using Views and Taxonomy modules:

• I can set up my own playlists of song pages based on tags/keywords used in Taxonomy. All the songs from the same album, singer, year, style, lyrics mood etc. After the first click, the player will keep on playing all songs found in those views.
• Songs from searches: this is an amazing and exciting thing: someone makes a search, there are 3 songs returned, and now the user can play all 3 of them with a single click!
• In both examples above, should a listener like a song, he can always access the song page and song details (description, lyrics, buy)

Drupal 7 for Music with Soundmanager2 rocks!