Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

489 lines (398 sloc) 23.812 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2: JavaScript Sound For The Web</title>
<meta name="description" content="Play sound from JavaScript including MP3, MPEG-4 and HTML5-supported audio formats with SoundManager 2, a cross-browser/platform sound API. BSD licensed."/>
<meta name="keywords" content="javascript sound, html5 audio, html5 sound, javascript audio, javascript play mp3, javascript sound control, mp3, mp4, mpeg4, aac, Scott Schiller, Schill, Schillmania"/>
<meta name="author" content="Scott Schiller"/>
<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller"/>
<meta name="language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- base library + a bunch of demo components (yay, they all work together) -->
<link rel="stylesheet" type="text/css" href="demo/play-mp3-links/css/inlineplayer.css"/>
<link rel="stylesheet" type="text/css" href="demo/page-player/css/page-player.css"/>
<link rel="stylesheet" type="text/css" href="demo/360-player/360player.css"/>
<link rel="stylesheet" type="text/css" href="demo/360-player/360player-visualization.css"/>
<link rel="stylesheet" type="text/css" href="demo/mp3-player-button/css/mp3-player-button.css"/>
<link rel="stylesheet" type="text/css" href="demo/flashblock/flashblock.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="demo/index.css"/>
<script type="text/javascript" src="script/soundmanager2.js"></script>
<script type="text/javascript" src="demo/mp3-player-button/script/mp3-player-button.js"></script>
<script type="text/javascript" src="demo/page-player/script/page-player.js"></script>
<script type="text/javascript" src="demo/play-mp3-links/script/inlineplayer.js"></script>
<!-- 360 UI demo, canvas magic for IE -->
<!--[if lt IE 9]><script type="text/javascript" src="demo/360-player/script/excanvas.js"></script><![endif]-->
<!-- 360 UI demo, Apache-licensed animation library -->
<script type="text/javascript" src="demo/360-player/script/berniecode-animator.js"></script>
<script type="text/javascript" src="demo/360-player/script/360player.js"></script>
<!-- SM2 demo/homepage stuff -->
<script type="text/javascript">var is_home = true;</script>
<script type="text/javascript" src="demo/index.js"></script>
<!-- IE CSS font hax -->
<!--[if lte IE 8]>
<style>
h2.special {
/* IE 6-8 font reset, doesn't like sort-of-defined @font-family */
font-family:"helvetica neue",helvetica,arial,verdana,tahoma,"sans serif";
}
</style>
<![endif]-->
</head>
<body class="home">
<div id="content">
<div id="top">
<div id="lights"></div>
<h1>A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio.</h1>
<div id="nav">
<div id="version"></div>
<ul>
<li>
<strong><a href="#home">Home</a></strong>
</li>
<li>
<a href="#">Demos</a>
<ul>
<li><a href="demo/api/">API Examples</a></li>
<li><a href="demo/play-mp3-links/">Playable MP3 links</a></li>
<li><a href="demo/mp3-player-button/" class="exclude">Basic MP3 Play Button</a></li>
<li><a href="demo/page-player/">Muxtape-style UI</a></li>
<li><a href="demo/360-player/">360&deg; Player UI</a></li>
<li><a href="demo/mpc/">Drum Machine (MPC)</a></li>
<li><a href="demo/animation/">DOM/Animation Demos</a></li>
<li><a href="demo/flashblock/">FlashBlock Handling</a></li>
<li><a href="demo/template/">Basic Template</a></li>
</ul>
</li>
<li>
<a href="doc/getstarted/">Getting Started</a>
<ul>
<li><a href="doc/getstarted/#how-sm2-works">How SoundManager 2 works</a></li>
<li><a href="doc/getstarted/#basic-inclusion">Including SM2 on your site</a></li>
<li><a href="doc/getstarted/#troubleshooting">Troubleshooting</a></li>
</ul>
</li>
<li>
<a href="doc/">Documentation</a>
<ul>
<li><a href="doc/#sm-config">SoundManager Properties</a></li>
<li><a href="doc/#sound-object-properties">Sound Object Properties</a></li>
<li><a href="doc/#smdefaults">Global Sound Defaults</a></li>
<li><a href="doc/#api">SoundManager Core API</a></li>
<li><a href="doc/#smsoundmethods">Sound Object (SMSound) API</a></li>
<li><a href="doc/generated/script/soundmanager2.html">Generated Documentation</a></li>
</ul>
</li>
<li>
<a href="doc/download/">Download</a>
<ul>
<li><a href="doc/download/#latest">Get SoundManager 2</a></li>
<li><a href="doc/download/#revision-history">Revision History</a></li>
</ul>
</li>
<li>
<a href="doc/technotes/">Technical Notes</a>
<ul>
<li><a href="doc/technotes/#requirements">System Requirements</a></li>
<li><a href="doc/technotes/#debug-output">Debug + Console Output</a></li>
</ul>
</li>
<li>
<a href="doc/resources/">Resources</a>
<ul>
<li><a href="doc/resources/#licensing">Licensing</a></li>
<li><a href="doc/resources/#related">Related Projects</a></li>
<li><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/">SM2 support / discussion</a></li>
<li><a href="http://www.schillmania.com/content/react/contact/">Contact Info @ Schillmania.com</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="main" class="triple">
<div id="live-demos" class="columnar">
<div class="c1">
<h2>What SoundManager 2 does</h2>
<p>Audio features, accessible from JavaScript.</p>
</div>
<div class="c2">
<h3>About SoundManager 2, Features and Live Demos</h3>
<div id="about-sm2">
<div id="sm2-support-warning">
<!-- as needed, warning is displayed here -->
</div>
<div style="position:relative;padding-top:0.5em">
<h2 class="special" style="margin-top:0.25em">SoundManager 2 makes it easier to play audio using JavaScript.</h2>
<p style="margin-top:0.5em;margin-bottom:0px">
Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API. <a href="doc/getstarted/#intro" class="cta" style="white-space:nowrap">How it works <span>&raquo;</span></a>
</p>
</div>
<div class="header-demo">
<h3>More sound, <b>in more places</b></h3>
<div class="sm2-speaker">
<img src="demo/_image/soundmanager2-speaker.png" alt="SoundManager 2 speaker logo" class="ie6sucks" />
</div>
</div>
<p style="clear:left">Despite being one of the senses, sound has largely been missing from the web due to inconsistent technology support. SoundManager 2 bridges this gap, making it easier to use audio across a growing variety of devices and platforms.</p>
<h3>Complexity, <b>reduced</b></h3>
<p>Supporting HTML5 audio in modern browsers can be tedious, let alone "legacy" HTML4-based ones. With technology ranging from mobile Safari down to IE 6, there's a lot of ground to cover.
</p>
<p>SoundManager 2 gives you a simple but powerful API that supports both new and old, using HTML5 audio where supported and an invisible Flash fallback where needed. Ideally when using SoundManager 2, audio "just works."</p>
<div style="clear:both;padding-top:2em"></div>
<div style="position:relative;min-width:520px;*width:520px">
<div id="demo-box">
<h3 class="ie6sucks" style="margin-top:4px">Less talk, <b>more shiny</b></h3>
<div class="ie6sucks ie7sucks">
<p style="margin:1em 0px 0px 0px;padding:0px"><a href="http://wheelsofsteel.net/" title="The Wheels Of Steel: Online turntable / browser-based DJ prototype" style="margin:0px;padding:0px;background:#fff"><img src="demo/_image/wheelsofsteel-single-deck-256.jpg" alt="wheelsofsteel.net: Online turntable demo (screenshot)" style="margin-left:-4px;border:none" /></a></p>
<p style="margin:0px;padding:0px;font-size:11px;text-align:left;color:#666;margin-bottom:0.5em;white-space:normal">Experimental demo: The <a href="http://wheelsofsteel.net/" title="The Wheels Of Steel: Online turntable / browser-based DJ prototype">Wheels Of Steel</a>, a browser-based DJ turntable prototype. For the tech details, read <a href="http://www.schillmania.com/content/entries/2011/wheels-of-steel/" title="The making of 'The Wheels Of Steel': An Ode To Turntables (in HTML)">An Ode To Turntables (in HTML.)</a></p>
</div>
<div id="inline-demos" class="ie6sucks ie7sucks">
<h4 id="inline-demo-header">Inline demos using SoundManager 2</h4>
</div>
<div id="sm2-container">
<!-- hidden SM2 SWF is inserted here, shown position:relative if needed for troubleshooting / flash unblocking purposes. -->
<!-- otherwise, position:fixed and bottom/left of screen. -->
</div>
<div id="sm2-support" class="demo-block">
<!-- "oh snap", SM2 didn't load etc. messaging -->
</div>
<div class="ie6sucks">
<div>
<div id="special-demo-left" class="sm2-inline-list">
<div class="ui360">
<a href="demo/_mp3/office_lobby.mp3" class="sm2_link norewrite exclude button-exclude inline-exclude">Office lobby sound</a>
</div>
<div class="ui360" style="float:left;display:inline">
<a href="demo/_mp3/mak.mp3" title="360 demo: Angry Cow Sound" class="norewrite exclude button-exclude inline-exclude">Random</a>
</div>
<div class="ui360" style="float:left;display:inline">
<a href="http://freshly-ground.com/data/audio/sm2/water-drop.mp3" title="360 Demo: Water Drop" class="exclude button-exclude inline-exclude">Water Drop</a>
</div>
<div class="demo-more-abs" style="margin-right:1.5em">
<a href="demo/360-player/" title="360&deg; UI player demo">360&deg; UI &raquo;</a>
</div>
</div>
<div id="special-demo-right">
<a href="demo/_mp3/coins.mp3" title="Play &quot;Change&quot;" class="sm2_button exclude inline-exclude norewrite">coins.mp3</a>
&nbsp;&nbsp; <a href="demo/christmas-lights/sound/glass0.mp3" class="sm2_button exclude inline-exclude norewrite" title="Play &quot;Glass break 1&quot;">glass0.mp3</a>
&nbsp;&nbsp; <a href="demo/christmas-lights/sound/glass1.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play &quot;Glass break 2&quot;">glass1.mp3</a>
<div class="demo-more-abs">
<a href="demo/mp3-player-button/" title="Play MP3 Links demo">mp3 buttons &raquo;</a>
</div>
</div>
</div>
<div class="sm2-inline-list" style="clear:both;margin-top:1em">
<div class="ui360 ui360-vis">
<a href="http://freshly-ground.com/data/audio/sm2/The%20Fugitives%20-%20Graffiti%20Sex.mp3" class="exclude button-exclude inline-exclude" style="position:absolute;color:#333">The Fugitives - Graffiti Sex</a>
</div>
</div>
<div class="demo-more" style="clear:both">
<p style="font-size:11px;text-align:left;color:#666;margin-bottom:0.5em;white-space:normal">"Graffiti Sex" compliments of <a href="http://www.fugitives.ca/" title="The Fugitives, multi-instrumentalists from Vancouver">The Fugitives</a>, from&nbsp;the album "In Streetlight Communion."</p>
<a href="demo/360-player/canvas-visualization.html" title="360&deg; UI: JavaScript + Canvas Visualization">360&deg; + spectrum UI &raquo;</a>
</div>
<ul id="inline-playlist" class="playlist">
<li><a href="http://freshly-ground.com/data/audio/mpc/20060826 - Armstrong.mp3" class="button-exclude inline-exclude threesixty-exclude">Armstrong Beat</a></li>
<li><a href="http://freshly-ground.com/data/audio/mpc/20090119 - Untitled Groove.mp3" class="button-exclude inline-exclude threesixty-exclude">Untitled Groove</a></li>
<li><a href="http://freshly-ground.com/data/audio/sm2/quail-64kbps-he-aac-from-itunes-renamed-from-mp4.aac" title="48 kbps MPEG4 High-Efficiency AAC test sound: BC Quail" class="button-exclude inline-exclude threesixty-exclude">BC Quail <span class="sidenote">(HE-AAC)</span></a></li>
</ul>
<ul id="muxtape-html5" class="playlist" style="clear:both;margin-top:0px;padding-top:0px">
<li><a href="http://freshly-ground.com/data/audio/sm2/20060924%20-%20Ghosts%20&amp;%20Goblins%20Reconstructed.ogg" title="OGG sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">Ghosts+Goblins Reconstructed <span class="sidenote">(OGG)</span></a></li>
<li><a href="http://freshly-ground.com/data/audio/sm2/bottle-pop.wav" title="WAV sound format, requires HTML5 Audio() support to play" class="button-exclude inline-exclude threesixty-exclude" style="font-size:0.8em">A corked beer bottle <span class="sidenote">(WAV)</span></a></li>
</ul>
<div class="demo-more">
<a href="demo/page-player/" title="Muxtape-style UI demo">muxtape-style UI &raquo;</a>
</div>
<h4 class="home-shopping-network">Not only do you get the ginsu knife...</h4>
<p style="font-size:11px">Even more demos and examples using the SoundManager 2 API...</p>
<ul class="standard">
<li><a href="demo/play-mp3-links/" title="Links to MP3 files that play inline">Playable MP3 links</a></li>
<li><a href="demo/mpc/" title="MPC sampler/drum machine demo">MPC sampler/drum machine</a></li>
<li><a href="demo/animation-1/" title="Bouncing ball animation with sound effects">Basic animation + sound</a></li>
<li><a href="demo/christmas-lights/" title="Smashable christmas lights demo (animation and sound)">Smashable christmas lights</a></li>
<li><a href="demo/api/" title="See the code, click the button, watch it run: Live API demos using test sounds">Live API + code examples</a></li>
</ul>
</div>
</div>
<h3 style="margin-top:0px">Big&nbsp;features, <b>small footprint</b></h3>
<p style="clear:left;min-width:30em">SoundManager 2 packs a full-featured API (100 KB of code) into <a href="doc/getstarted/#basic-inclusion" title="SoundManager 2: Build options">as little as 10 KB</a> over the wire. The source is provided in fully-commented, -no-debug and compiler-optimized "minified" versions appropriate for development and production use.</p>
<h3>Technical <b>details</b></h3>
<h4 style="margin-top:1.5em">HTML5 Audio Support <span class="sub-heading">(Beta-ish)</span></h4>
<ul id="html5-audio-notes" class="standard">
<li>100% Flash-free MP3 + MP4/AAC where supported. Works on iPad, iPhone (iOS4)</li>
<li>Seamless flash fallback for MP3/MP4 content, if needed</li>
<li>HTML5/Flash API switching is transparent, handled internally</li>
<li>WAV + OGG playback possible via HTML5, if supported</li>
<li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation">useHTML5Audio</a> for implementation details</li>
<li>Want more on the state of HTML5 audio? Read <a href="http://24ways.org/2010/the-state-of-html5-audio" title="Probably, Maybe, No: The State Of HTML5 Audio (24ways.org)">the article</a> (12/2010), or watch the <a href="http://www.yuiblog.com/blog/2011/06/29/video-f2esummit2011-schiller/" title="Yahoo!/YUI Blog, video presentation: Scott Schiller on the State of HTML5 Audio">video talk + turntable demo</a> (05/2011)</li>
</ul>
<div style="margin-right:4em">
<h4>Basic API Features <span class="sub-heading">(HTML5, Flash 8*)</span></h4>
<ul class="standard">
<li>Load, stop, play, pause, mute, seek, pan*, volume control from JavaScript</li>
<li>Events: onload(), whileloading(), whileplaying(), onfinish() and more</li>
<li>ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)*</li>
</ul>
</div>
<h4>Shiny Flash 9-only Features</h4>
<ul class="standard">
<li>RTMP / Flash Media Server streaming support (experimental) - see <a href="doc/#smsound-serverurl" title="SMSound.serverURL parameter">serverURL</a></li>
<li>MPEG-4 (AAC, HE-AAC, H.264) audio support</li>
<li>"MultiShot" play (layered/chorusing effects)</li>
<li>Waveform/frequency spectrum data</li>
<li>Peak (L/R channel volume) data</li>
<li>Audio buffering state/event handling</li>
</ul>
<h4>General Tech Stuff</h4>
<ul class="standard">
<li>Extensive <a href="doc/" title="SoundManager 2 documentation">API Documentation</a> with examples and notes</li>
<li>console.log()-style <a href="doc/technotes/#debug-output" title="SoundManager 2 debug output">debug output</a> and <a href="doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool">troubleshooting tools</a></li>
<li>Community-based <a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2" title="discussion/support for SoundManager 2 on Get Satisfaction">discussion/support</a></li>
</ul>
<!--/min-width -->
</div>
</div>
<div style="padding-top:1px">
<div class="ie6sucks">
<h4>As Heard On <span class="scratched-out">TV</span> The Internets</h4>
<p class="tight compact">A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
<div class="inthewild">
<ul>
<li>
<a id="soundcloud" href="http://thecloudplayer.com/" title="Soundcloud / The Cloud Player"><span>SoundCloud / The Cloud Player</span></a>
</li>
<li>
<a id="lastfm" href="http://www.last.fm/" title="last.fm"><span>last.fm</span></a>
</li>
<li>
<a id="opera" href="http://www.opera.com/" title="Opera Software ASA (Media Player component)"><span>Opera Software ASA</span></a>
</li>
<li>
<a id="eight-tracks" href="http://8tracks.com/" title="8tracks"><span>8tracks</span></a>
</li>
<li>
<a id="discogs" href="http://www.discogs.com/" title="Discogs"><span>Discogs</span></a>
</li>
<li>
<a id="hypem" href="http://hypem.com/" title="The Hype Machine"><span>The Hype Machine</span></a>
</li>
<li>
<a id="nyancat" href="http://nyan.cat/" title="NON-STOP NYAN CAT!"><span>NON-STOP NYAN CAT!</span></a>
</li>
<li>
<a id="turntable-dot-fm" href="http://turntable.fm/" title="Turntable.fm"><span>Turntable.fm</span></a>
</li>
<li>
<a id="audiogalaxy" href="http://audiogalaxy.com/" title="Audiogalaxy"><span>Audiogalaxy</span></a>
</li>
</ul>
</div>
</div>
<h4 style="padding-top:0.5em">Download!</h4>
<p style="margin-top:1.5em">
<a href="doc/download/" class="feature">Get SoundManager 2</a>
</p>
</div>
<!-- /#about-sm2 -->
</div>
<div class="clear">&nbsp;</div>
<div class="columnar">
<div class="c1">
<h2>Playing MP3s with JavaScript</h2>
<p>Play audio in one line, or get fancy with multiple options.</p>
</div>
<div class="c2">
<h3>How To Play Audio Using SoundManager 2</h3>
<p>Simple ID / URL method:</p>
<code>soundManager.play('<span>mySound</span>','<span>/path/to/an.mp3</span>');</code>
<p>And, setting the volume:</p>
<code>soundManager.setVolume('<span>mySound</span>',<span>50</span>);</code>
<p>More flexible method supporting option parameters as an object literal:</p>
<pre class="block"><code>var mySound = soundManager.createSound({
id: '<span>someSound</span>',
url: '<span>/path/to/some.mp3</span>',
volume: <span>50</span>,
onload: <span>soundLoadedFunction</span>
});
mySound.play();</code></pre>
<p><a href="demo/api/">See API Demos</a></p>
</div>
</div>
<div class="columnar">
<div class="c1">
<h2>Using SM2 on your site</h2>
<p>How to include SoundManager 2 from HTML, and some basic event handlers.</p>
</div>
<div class="c2">
<p>Include the SoundManager 2 core script, tell it where to look for the flash .SWF and provide an <code>onready()</code> callback.</p>
<pre class="block"><code>&lt;script src="<span>/path/to/soundmanager2.js</span>"&gt;&lt;/script&gt;
&lt;script&gt;
soundManager.url = '<span>/path/to/swfs/</span>';
soundManager.onready(function() {
<span><span>// SM2 is ready to go!</span></span>&nbsp;
<span><span>// soundManager.createSound(...) calls can now be made, etc.</span></span>
});
&lt;/script&gt;</code></pre>
<p>
<a href="demo/template/">See a basic template demo</a>
</p>
</div>
</div>
<div id="licensing" class="columnar">
<div class="c1">
<h2>Licensing</h2>
<p>BSD licensed.</p>
</div>
<div class="c2">
<p>SoundManager 2 is provided under a <a href="license.txt" title="SoundManager 2 BSD license" class="norewrite">BSD license</a>.</p>
</div>
</div>
<!-- columnar -->
</div>
<div class="clear"></div>
<div id="col3" class="c3">
<div id="get-satisfaction" class="box">
<div id="gsfn_list_widget">
<h2><a href="http://getsatisfaction.com/schillmania/products/schillmania_soundmanager_2/" title="User discussion, FAQs and support for SoundManager 2" rel="nofollow">Discussion / Support</a><span class="l"></span><span class="r"></span></h2>
<div id="gsfn_content">
</div>
<div class="powered_by">
<a href="http://getsatisfaction.com/">Get Satisfaction support network</a>
</div>
</div>
<!-- /.box -->
</div>
<div id="sm2-options">
<p>
SM2 options:&nbsp; <span id="with-html5"><a href="?sm2-usehtml5audio=1" title="View this page with HTML5 audio support enabled">+html5</a></span>
<span id="options-divider-with-html5" class="options-divider">&nbsp;|&nbsp;</span>
<span id="without-html5"><a href="?sm2-usehtml5audio=0" title="View this page with HTML5 audio support disabled">-html5</a></span>
<span id="options-divider-without-html5" class="options-divider">&nbsp;|&nbsp;</span>
<span id="with-debug"><a href="#debug=1" title="View this page with debug output mode enabled (console.log() or HTML-based)" onclick="document.location.href=this.href;document.location.reload()">+debug</a></span>
</p>
</div>
<!-- /main -->
</div>
<!-- /content -->
</div>
<script type="text/javascript">
// <![CDATA[
if (document.location.href.match(/debug=1/i)) {
document.getElementById('with-debug').style.display = 'none';
}
if (document.location.href.match(/debug/i)) {
document.getElementById('options-divider-with-html5').style.display = 'none';
}
if (soundManager.useHTML5Audio || document.location.href.match(/html5audio=1/i)) {
document.getElementById('with-html5').style.display = 'none';
document.getElementById('options-divider-with-html5').style.display = 'none';
} else {
document.getElementById('without-html5').style.display = 'none';
document.getElementById('options-divider-without-html5').style.display = 'none';
}
init();
// ]]>
</script>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.