Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Soundmanager Player (gallery-soundmanager-player)

Last Updated: 08/3/10

+ 0 -

Patrick Cavit

YUI Contributor

See 4 more by this user.

Created: 08/1/10
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0 PR1
Free for use.

A YUI3 audio player powered by the SoundManager 2 JS audio library by Scott Schiller. Supports easy progressive enhancement or JS initialization as well as plenty of display & functionality options.

Setup

Download SoundManager 2
Download SoundManager Player from github (see Source link)
Place both on your server, set your YUI3 config to load the gallery-soundmanager-player
Optionally grab the style.css file from http://github.com/tivac/yui3-gallery/tree/master/src/gallery-soundmanager-player/tests/, otherwise you'll need to provide your own styling.
When initializing player instances be sure to set the "js" attribute to the location where you have SoundManager 2 on your server.

API

.play()
.pause()
.stop()
.toggle() - plays if paused, pauses if playing

Config Attributes

js - SoundManager2 js file location
swf - SoundManager2 swf location (automatically uses same directory as the js attribute)
url - mp3 location
title - audio title
autoLoad - being loading audio immediately
scrubber - show scrubber
volumeControl - show volume control
time - show current/total time
position - set audio player position within the song
volume - set volume, defaults to 50

Events

soundLoad
id3Load
bind
play
pause
stop

Code Sample

<a href="song.mp3" class="no-time">MP3!</a>
<a href="song.mp3" class="volume">MP3!</a>
<a href="song.mp3" class="scrubber">MP3!</a>
<a href="song.mp3" class="autoload">MP3!</a>
<a href="song.mp3" class="volume scrubber no-time">MP3!</a>
 
<div id="js"></div>
 
<script>
YUI_config = { 
    ignore : [ "skin-sam-widget" ],
    modules : {
        "soundmanager-player" : {
            fullpath : "soundmanager-player.js",
            requires : [ "widget", "get", "event", "substitute", "event-mousenter" ]
        }
};
 
YUI().use('gallery-soundmanager-player', function(Y) {
 
    //progressive enhancement of <a> tags
    Y.all("a").each(function(node) {
        new Y.SoundManager.Player({ 
            srcNode : node, 
            js : "soundmanager2-nodebug-jsmin.js" 
        }).render();
    });
 
    //building entirely from JS
    new Y.SoundManager.Player({ 
        url : "song.mp3", 
        js : "soundmanager2-nodebug-jsmin.js", 
        scrubber : true,
        volumeControl : true
    }).render("#js");
});
</script>

YUI().use('gallery-soundmanager-player', function(Y) {
    
    //progressive enhancement of <a> tags
    Y.all("a").each(function(node) {
        new Y.SoundManager.Player({ 
            srcNode : node, 
            js : "soundmanager2-nodebug-jsmin.js" 
        }).render();
    });
    
    //building entirely from JS
    new Y.SoundManager.Player({ 
        url : "song.mp3", 
        js : "soundmanager2-nodebug-jsmin.js", 
        scrubber : true,
        volumeControl : true
    }).render("#js");
});
</script>

Forum Posts

No forum posts for this module.