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.

Audio (gallery-audio) on cdn

Last Updated: 06/21/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 03/31/11
Last CDN Push: 06/20/12
Build Tag: gallery-2012.06.20-20-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

This is a utility to create an HTML 5 Audio element. Each browser has a different level of support for playing different audio formats. If an audio file is hosted in multiple formats, this will select the one most likely to play in the current browser.

Browser support will be tested for m4a, mp3, ogg, and wav audio formats.

If the Modernizr library is loaded onto the page or the gallery-modernizr module is used by the YUI instance, browser support will be determined by Mondernizr.

Tip: If you have trouble getting audio files to play, the server may not be setting the correct mime type header. Try pointing your browser to the URL of the file, if it prompts you to download the file then the wrong mime type is probably set.

If you are looking for more features than are provided here, I would recommend looking into Sound Manager 2. http://www.schillmania.com/projects/soundmanager2/

Y.Audio is an object with one public method.

create: accepts a config object and returns an instance of Node or null.

The config object has the following optional members:

autoplay: Boolean if the audio should begin playing immediately.
baseUrl: String URL of the audio file, minus the file extension. (Explained below.)
controls: Boolean if the browser should render a user interface. (The audio node needs to be attached to the DOM for the controls to appear.)
format: Array or Object of available formats. (Explained below.)
loop: Boolean if the audio should loop forever.
preload: String 'auto', 'metadata', or 'none' defaults to 'auto'

config.baseUrl and config.format work together to pick the best audio file to play.
In the default case, there are four audio files hosted on a server:

http://domain.com/path/fileName.m4a
http://domain.com/path/fileName.mp3
http://domain.com/path/fileName.ogg
http://domain.com/path/fileName.wav

These four files contain the same audio in different formats. In this case config.baseUrl should be set to 'http://domain.com/path/fileName'
The best supported format will be determined and the file extension will be appended to baseUrl.

What if the server doesn't have all four formats?
Set config.format to ['mp3', 'ogg'] and only those two formats will be tested. The order is important. If the browser supports both formats, the first one will be chosen.

What if the four formats aren't named the same or are hosted at different locations or have unusual file extensions?
Set config.baseUrl to any common URL fragment 'http://domain.com/'
Set config.format to {m4a: 'music/m4a/file.m4a', mp3: 'mp3s/cool/file.mp4', ogg: 'vorbis/file.ogg'}
When config.format is an object, its keys are the formats and its values are appended to config.baseUrl.
If config.baseUrl is not set, config.format must provide full URLs for each file.

What if the browser doesn't support any of the available audio formats?
In this case, the create method returns null.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.20-20-07'
}).use('gallery-audio', function(Y) {
 
    var audioNode = Y.Audio.create({
        baseUrl: 'http://domain.com/path/fileName'
    });
 
    if (audioNode) {
        audioNode.invoke('play');
    }
 
});

Forum Posts

No forum posts for this module.