SoundManager Plugin

Tags : audio
- audio
Latest : 0.4
Last Updated: 02 May 2009
Grails version : 1.1 > *

Authors : null

1 vote

Dependency :

compile ":sound-manager:0.4"

Documentation

Summary

Installation

Just install like any Grails plugin with plugin name "sound-manager:"

grails install-plugin sound-manager

Description

Grails SoundManager Plugin

Grails SoundManager Plugin wraps the awesome SoundManager2 Javascript audio and video API.

Current Features include:

Making all links to MP3 files in your page playable inline
Create a playlist in your page
Add the SoundManager2 API in your page

Make MP3 links Playable Inline

You may use the plugin to make all links (aka hyperlinks) in your page that points to valid mp3 files playable wherever they are located in the page. e.g. <a href="../validFile.mp3">This is played with a click</a>

After installing the plugin, you simply add the tag <sm:inlinePlayer /> between the head tags of you gsp. e.g.

<head>
     …
    <sm:inlinePlayer/>
    …
</head><body>
    <a href="media/validFile.mp3">
       Awesome track!
    </a>
    <a href="thisWontBeAffected.html">
        This is not affected.
    </a>
</body>

Where "Awesome track!" can be clicked, and the track "validFile.mp3" is played on the page.

Check for sample's in the official API page.

To customize the appearance of the playable mp3 links, add the "useDefaultStyle" attribute to the tag and set to false:

<sm:inlinePlayer useDefaultStyle="false" />

This would remove the css that provides the appearance attributes of the links. You can then define the following css attributes:

(Default + hover state, "click to play")a.sm2_link {}
a.sm2_link:hover {}
(Playing + hover state, "click to pause")
a.sm2_playing {}
a.sm2_playing:hover {}
(Paused + hover state, "click to resume")
a.sm2_paused {}
a.sm2_paused:hover {}

Adding a Playlist in your Page

You can add a playlist in your page by using the <sm:pagePlayer /> and <sm:playlist /> tags. This is a list of links (aka hyperlinks) to MP3's in your page that would play consecutively, a la playlist in an actual MP3 player.

Add the <sm:pagePlayer/> tag between the head tags in your gsp file. Then add the <sm:playlist /> tag inside the body of your page, where you want the playlist to appear. Put a series of links in this tag's body. This would compose your playlist songs. e.g.

<head>
     …
    <sm:pagePlayer/>
    …
</head><body>
   <sm:playlist>
       <a href="media/track1.mp3">First Track</a>
       <a href="media/track2.mp3">Second Track</a>
       <a href="media/track3.mp3">Third Track</a>
   </sm:playlist >
</body>

View the official API page for an example.

You can make your playlist automatically play upon page load by adding the attribute "autoStart" to the <sm:pagePlayer/> tag and set to true:

<sm:pagePlayer autoStart='true' />

To customize the appearance of the playlist, add the "useDefaultStyle" attribute to the tag and set to false:

<sm:pagePlayer useDefaultStyle="false" />

This would remove the css that provides the appearance attributes of the playlist. Check the _pagePlayerStyle.gsp file located in "(thePluginZipFile)/grails-app/view/shared" for various attributes you can modify.

Using the Official SoundManager2 API

If you have your own SoundManager2 client, you can add the official API by adding the <sm:soundManagerAPI /> tag between the head tags of your gsp. This would make the API available for all other Javascript codes in your page.

<head>
    …
    <sm:soundManagerAPI />
    …
</head>