Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Web audio with jQuery, Soundmanager2 and HTML5

We're just now starting to see an explosion of advanced audio applications hitting the web. With HTML5 and Soundmanager2, you can now play URL-based audio of various kinds, and even access the audio data directly to create cool visualizations.

Edward Abrams

on 25 April 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web audio with jQuery, Soundmanager2 and HTML5

Web audio with jQuery, Soundmanager2
and HTML5

Eddie Abrams // eddie@scene.nr
http://scene.nr HTML5 Audio Good for playing music with stylized HTML player*
Limited capabilities
Full of future promise
A little code Simplest:

<audio id="player" src=”/mysong.ogg” preload="auto" autoplay loop controls/> Great for an in-page
player widget Limited capabilities Can't yet read the audio data as it's playing (visualizations, etc)
Can't yet create audio on the fly
Can't play all common audio types on most platforms Cool projects are filling these gaps Experiments with audio: http://vocamus.net/dave
http://weblog.bocoup.com/3d-fft-from-a-video-stream Cool projects are
making this easy Javascript audio interface (JAI): http://hyper-metrix.com/misc/jai/
jPlayer: http://www.happyworm.com/jquery /jplayer/download.htm Psst, but you need a special
build of Firefox :(:(:( Demonstration of audio widgets using HTML5
and no helpers - Call to action -
Tell your local congressperson
to support extensions to the
HTML5 audio specification Soundmanager2 created with http://prezi.com http://www.happyworm.com/jquery/jplayer
/latest/demo-01.htm * psst, except for the format wars! http://hyper-metrix.com/misc/jai/ var $foo = $("#player");
// play

// Mutes the audio
$foo.attr('volume', 0);
// or
$foo.attr('muted', true);

// Gets the length in seconds of the audio (not always 100% accurate)
var length = $foo.attr('duration');

// Gets the current position of the track in seconds
var time = $foo.attr('currentTime');

// Seek
$foo.attr('currentTime', 10);

// Pauses the audio at it's current position
$foo.pause(); Goals understand the HTML5 audio tag
and its current limitations learn a bit about how to write code
to manage common audio tasks see how soundmanager2 fills in
important gaps in the current
html5 audio api learn how to use the powerful audio data access api of soundmanager2 to do really cool stuff Big picture goal:
spread the knowledge on what can be done to build powerful, desktop-y audio applications using web tools It can have children, and the use of this is to display a UI when
the browser doesn't understand the audio tag itself <audio ... preload="auto" ... />

preload: enumerated attribute
'none': no data is needed immediately,
'metadata': just the metadata is needed now and
'auto': normal buffering of data to minimize user wait
when the user wants to interact with the audio <audio ... autoplay ... />

'autoplay' if set would indicate that the
data will play() once enough data is buffered. <audio ... loop ... />

'loop' if true means that the playing resource will restart from the beginning once the current instance has finished playing. <audio ... controls ... />

“If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g. full-screen video or in an independent resizable window). Other controls may also be made available.” CODE! play() var musicTransition = function(actionFunction, original, volume, direction)
/* if there's a timeout set, and it hasn't run, cancel it */
if (_mtTimeout != null) {
try {
} catch (e) {}
/*it's too bad jquery doesn't allow you to "animate" arbitrary integers/functions;
so we'll settle for a simple linear function (does it?)*/
transitionSuspendedUpdate = true;
original = original || scenenr.state.volume;
volume = volume || (scenenr.state.volume - 2);
if (direction == 'unfade') {
if (volume >= original) {
/* end state */
scenenr.setMusicState("volume", original);
_mtTimeout = setTimeout("scenenr.sound.transitionSuspendedUpdate = false;", 500);
} else {
scenenr.setMusicState("volume", volume);
_mtTimeout = setTimeout(musicTransition.bind(scenenr.sound, actionFunction, original, volume + 2, 'unfade'), 10);
} else {
if (volume <= _musicTransitionVolumeFloor) {
/* switch direction */
_mtTimeout = setTimeout(musicTransition.bind(scenenr.sound, actionFunction, original, volume + 2, 'unfade'), 10);
} else {
scenenr.setMusicState("volume", volume);
_mtTimeout = setTimeout(musicTransition.bind(scenenr.sound, actionFunction, original, volume - 2), 10);
}; soundManager.url = '/static/swf/soundmanager2_flash9_xdomain.swf';
soundManager.flashVersion = 9;
soundManager.flash9Options.useEQData = true;
soundManager.flash9Options.useWaveformData = true;
soundManager.useHighPerformance = true;
soundManager.allowPolling = true;
soundManager.flashLoadTimeout = 6000;
soundManager.waitForWindowLoad = false;
soundManager.debugMode = true;
function setupSoundManager()
this.onload = null;
setTimeout(setupSoundManager, 500);
}); waveformData array: 256 waveform data values
(floating-point, three decimal place from -1
to 1) available while playing sound (256 PER CHANNEL, so normally 2x256)

eqData array: 256 EQ spectrum data values
(floating-point values ranging from 0 to 1),
available while playing sound (again, per channel)
peakData object: Left and right channel peak/volume
data (floating-point values ranging from 0 to 1) available
while playing sound (yup, one datum per channel)
Provides play(), stop(), pause(),
seek via the position attribute of the
sound object soundManager.createSound(
id: title,
url: title,
volume: 50,
onid3: function() {
onload: function() {
onfinish:function() {
whileplaying: function() {
); drawSpecBar() drawSpectrum() What's missing? HTML5 audio tag: it is now possible to create pretty sophisticated audio players without the need for any plugins – it's pretty awesome Current limitations put some very cool functionality just out of reach Code examples for managing
seeking and play-queues soundmanager2 and its apis that fill
in the gaps left by HTML5 audio take advantage of the audio data we have access to through those apis, peeked at yet another awesome HTML5 feature – the canvas tag and associated api Web audio with jQuery, Soundmanager2
and HTML5

Eddie Abrams // eddie@scene.nr
http://scene.nr http://scene.nr/player/ play: function(song) {
if ((scenenr.state.playState == "playing") && !song) {
return 0;
else if (scenenr.state.playState == "paused") {
return 0;
if (!scenenr.getPlayQueue(scenenr.getQueueIndex()) && !song) {
return scenenr.openFiles();
var wasplaying = scenenr.sound.utils.getActiveMusic();
if (wasplaying && (scenenr.getPlayQueue(scenenr.getQueueIndex()) != song)) {
wasplaying.setPosition(0); // for next play
var mySound;
var queue_item;
if (song) {
queue_item = song;
} else {
mySound = scenenr.getSoundObjQueue(scenenr.getQueueIndex());
queue_item = scenenr.getPlayQueue(scenenr.getQueueIndex());
if (!scenenr.state.repeat ||(scenenr.state.hist.length == 0) || (scenenr.getQueueIndex() != scenenr.state.hist[scenenr.state.hist.length - 1])) {
// reset current track metadata:
scenenr.setMusicState("volume", scenenr.state.volume);
scenenr.setMusicState("balance", scenenr.state.balance);
return scenenr.setPlayState("playing");
musicTransition() seek() // song seek draggable
axis: 'x',
containment: 'parent',
start: function(event, ui) {
stop: function(event, ui) {
// if you drag off, it stays pressed -- fix
ui.helper.removeClass(ui.helper.attr('id') + '_pos_pressed');
if (scenenr.sound.utils.getActiveMusic()) {
}); var drawSpecBar = function() {
var parse = function(data) {
data = stripJsonQuotes(data);
var lines = data.split(/\s*(\r?\n|\\r?\\n)\s*/igm);

var colarr = lines.slice(4, 36);
// now let's understand each line as colors:
var specBarCanvas = document.getElementById("spec_bar_canvas");
var specCtx = specBarCanvas.getContext("2d");
for (i = 0, j = colarr.length; i < j; i+=2) {
var triple = colarr[i].split(/[,\/]/);
var r = parseInt(triple[0], 10);
var g = parseInt(triple[1], 10);
var b = parseInt(triple[2], 10);
specCtx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
specCtx.fillRect(0, i/2, 3, 1);
var url = "/static/skins/classic/" + scenenr.state.skin + "/viscolor.txt";
type: "GET", url: url, data: {},
complete: function(XMLHttpRequest, textStatus) {
}; function drawSpectrum() {
// resetting canvas clears it
specCanvas.width = 78;
specCanvas.height = 18;

var activeMusic = scenenr.sound.utils.getActiveMusic();
if (!activeMusic) { return; }
var juice = activeMusic.juice;
if (!juice) { return; }
for (var i = 0; i < 16; i++) {
var h = juice.freqBands16[i];
h = Math.pow(h,0.75)*8;
if (h > 16) { h = 16; }
h = h >> 0;
if (h > 0) {
specCtx.drawImage(specBar, 0, (16 - h), 3, h, (3 + i*4 + i), (1 + 16 - h), 3, h);
} "EFFin rad, whatever" "EFFin sucks,
Full transcript