Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
executable file 436 lines (353 sloc) 17.6 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 audio and MPEG-4 video formats with SoundManager 2, a cross-browser/platform sound API. BSD licensed." />
<meta name="keywords" content="javascript sound, javascript audio, javascript play mp3, javascript sound control, javascript video, mp3, mp4, mpeg4, flv video, Scott Schiller, Schill, Schillmania" />
<meta name="robots" content="all" />
<meta name="author" content="Scott Schiller" />
<meta name="copyright" content="Copyright (C) 1997 onwards Scott Schiller" />
<meta name="language" content="en-us" />
<!-- 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" media="screen" href="demo/index.css" />
<script type="text/javascript" src="script/soundmanager2.js"></script>
<script type="text/javascript">
var PP_CONFIG = {
flashVersion: 9, // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.
useMovieStar: true, // Flash 9.0r115+ only: Support for a subset of MPEG4 formats.
useVideo: true, // show video when applicable
usePeakData: true // L/R peak data
}
</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 IE]><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>
<script type="text/javascript">
var isHome = true;
soundManager.bgColor = '#000000';
soundManager.wmode = 'transparent';
if (navigator.platform.match(/win32/i) && !navigator.userAgent.match(/msie/i)) {
// special case: Windows and wmode transparent don't get along. Sacrifice background color.
soundManager.bgColor = '#f9f9f9';
}
soundManager.debugMode = false;
soundManager.url = 'swf/';
soundManager.onload = function() {
setTimeout(function(){
if (!navigator.userAgent.match(/msie 6/i)) {
pagePlayer.initDOM();
inlinePlayer = new InlinePlayer();
threeSixtyPlayer = new ThreeSixtyPlayer();
threeSixtyPlayer.config.imageRoot = 'demo/360-player/';
threeSixtyPlayer.init();
}
doChristmasLights();
},1);
}
soundManager.onerror = function() {
// failed to load
var o = $('sm2-support');
o.innerHTML = smLoadFailWarning;
o.style.marginBottom = '1.5em';
o.style.display = 'block';
o.style.borderColor = $('demo-header').style.borderColor = '#ff3333';
o.style.backgroundColor = $('demo-header').style.backgroundColor = '#fff6f0';
$('demo-header').innerHTML = '';
$('demos').style.display = 'none';
}
pagePlayer.events.metadata = function() {
// video-only stuff
var sm = soundManager;
// set the SWF width and height..
var sm2c = document.getElementById('sm2-container');
sm2c.style.width = '100%';
sm2c.style.height = parseInt(this.height*(parseInt(sm2c.offsetWidth)/this.width))+'px';
}
// side note: If it's not december but you want to smash things, try #christmas=1 in the homepage URL.
</script>
<script type="text/javascript" src="demo/index.js"></script>
<script type="text/javascript">
function doChristmasLights() {
if ((document.domain.match(/schillmania.com/i) && new Date().getMonth() == 11) || window.location.toString().match(/christmas/i)) {
loadScript('http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js',function(){
loadScript('../demo/christmas-lights/christmaslights-home.js',function(){
if (typeof smashInit != 'undefined') {
setTimeout(smashInit,20);
}
});
});
}
}
</script>
<style type="text/css">
/* one small hack. */
.ui360 a.sm2_link {
position:relative;
}
.ui360 {
/* Firefox 3 doesn't show links otherwise? */
width:100%;
}
</style>
</head>
<body>
<div id="content">
<div id="top">
<div id="lights"></div>
<h1>A Javascript Sound API supporting MP3, MPEG4 Audio and Video.</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/page-player/">Muxtape-style UI</a></li>
<li><a href="demo/360-player/">360&deg; Player UI</a></li>
<li><a href="demo/video/">MPEG4 Video Player</a></li>
<li><a href="demo/video/basic.html" class="norewrite">Basic Video Template</a></li>
<li><a href="demo/mpc/">Drum Machine (MPC)</a></li>
<li><a href="demo/christmas-lights/">Christmas Lights</a></li>
<li><a href="demo/animation/">Animation 1</a></li>
<li><a href="demo/animation-2a/">Animation 2a</a></li>
<li><a href="demo/animation-2b/">Animation 2b</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>
</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://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 style="position:relative;padding-top:0.5em;padding-bottom:0.75em">
<img src="demo/_image/speaker.png" alt="speaker icon" style="float:left;display:inline;width:68px;height:68px;margin:1em 1em 0px 0px" />
<h2 class="special" style="margin-top:0.33em">SoundManager 2 makes it easier to play sounds using Javascript.</h2>
<p style="margin-top:0.5em">By wrapping and extending Flash 8's sound API, SoundManager 2 brings solid audio functionality to Javascript. <a href="doc/getstarted/#intro" class="cta" style="white-space:nowrap">How it works <span>&raquo;</span></a></p>
<div class="clear">&nbsp;</div>
</div>
<div id="demo-box">
<p id="demo-header"><strong style="font-size:1.1em;font-weight:bold">Javascript Audio/Video API Examples</strong></p>
<div id="sm2-support" class="demo-block"></div>
<div id="demos">
<h3 class="wedge" style="border-bottom:none;margin-top:0px">Playable MP3 links<span class="l"></span><span class="r"></span><a href="demo/play-mp3-links/" title="Playable MP3 links demo" class="cta-more">More &raquo;</a></h3>
<div class="demo-block">
<ul class="graphic" style="padding:0.5em 0px 0.25em 0.25em">
<li><a href="demo/jsAMP-preview/audio/rain.mp3" class="exclude norewrite">Rain.mp3</a></li>
</ul>
</div>
<h3 class="wedge" style="border-bottom:none;margin-top:0px">360&deg; Player UI <i style="font-size:0.9em;opacity:0.75">(experimental)</i><span class="l"></span><span class="r"></span><a href="demo/360-player/" title="360&deg; Player UI demo" class="cta-more">More &raquo;</a></h3>
<div class="demo-block" style="overflow:hidden">
<div style="margin-bottom:16px;margin-left:8px;margin-top:-4px">
<div class="ui360" style="float:left;display:inline;margin-right:16px"><a href="http://www.freshly-ground.com/data/audio/binaural/Mak.mp3" title="Demo MP3" class="exclude inline-exclude">Random</a></div>
<div class="ui360" style="position:absolute;left:50%"><a href="http://www.freshly-ground.com/data/audio/binaural/Rain%20on%20Car%20Roof.mp3" title="Demo MP3" class="exclude inline-exclude">Rain on Car</a></div>
<div class="clear"></div>
</div>
</div>
<h3 class="wedge" style="border-bottom:none;margin-top:0px">Muxtape-style UI<span class="l"></span><span class="r"></span><a href="demo/page-player/" title="Muxtape-style UI demo" class="cta-more">More &raquo;</a></h3>
<div class="demo-block">
<ul class="playlist" style="margin-top:0.5em">
<li><a href="http://freshly-ground.com/data/audio/mpc/20060826%20-%20Armstrong.mp3" class="inline-exclude">Armstrong Beat</a></li>
<li><a href="http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3" class="inline-exclude">Untitled Groove</a></li>
</ul>
</div>
<h3 class="wedge" style="border-bottom:none;margin-top:0px">MPEG-4 Video<span class="l"></span><span class="r"></span><a href="demo/video/" title="Video player demo" class="cta-more">More &raquo;</a></h3>
<div style="margin-bottom:1.5em" class="demo-block">
<div id="sm2-container"><!-- SM2 SWF, video, goes here --></div>
<ul class="playlist" style="margin-top:0.3em">
<li><a href="http://freshly-ground.com/data/video/xmaslights-iphone.m4v" title="iPhone-compatible H.264 video" class="inline-exclude">JS + Canvas Lights</a></li>
<li><a href="http://freshly-ground.com/data/video/Jack%20Dempsey%20Cichlids.flv" title="Personal .FLV from YouTube" class="inline-exclude">Aquarium</a></li>
</ul>
<p class="note" style="margin-top:3px;margin-bottom:0px;margin-left:0.8em">More: <a href="demo/video/">Video</a> | <a href="demo/page-player/">Muxtape UI</a> | <a href="demo/play-mp3-links/" class="exclude">Play MP3 links</a></p>
</div>
<div class="clear">&nbsp;</div>
</div>
<h4 class="tight">As Heard On <span style="text-decoration:line-through;color:#999;font-size:xx-small">TV</span> The Internets</h4>
<p class="tight compact">A few nifty sites that have implemented SoundManager 2 for driving audio:</p>
<p class="inthewild">
<a href="http://muxtape.com/" title="Muxtape"><img src="demo/_image/muxtape-logo.png" alt="Muxtape logo" /></a>
<a href="http://thecloudplayer.com/" title="Soundcloud / The Cloud Player"><img src="demo/_image/soundcloud-thecloudplayer-logo.png" alt="Soundcloud / The Cloud Player logo" /></a>
<a id="favtape" href="http://favtape.com/" title="Favtape.com">Favtape.com</a>
</p>
</div>
<h4 style="clear:left;margin-top:0.5em">Basic API Features (Flash 8)</h4>
<ul class="standard">
<li>Load, stop, play, pause, mute, seek, pan and volume control of sounds 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>
<h4>Shiny Flash 9 Features</h4>
<div style="float:right;display:inline;margin:-2em 1.5em 0px 0px;text-align:center;font-size:x-small;white-space:nowrap;padding:0px 0px 0px 1em">
<a href="demo/360-player/canvas-visualization.html" title="Javascript + Canvas MP3 visualization (experimental)" style="border:none;margin:0px;padding:0px"><img src="demo/_image/360ui-screenshot2.png" alt="" style="margin:0px;padding:0px;border:none" /></a>
<div><a href="demo/360-player/canvas-visualization.html" title="Javascript + Canvas MP3 visualization (experimental)">360&deg; UI + waveform/spectrum</a></div>
<div><i>Experimental</i>, prototype demo</div>
</div>
<ul class="standard">
<li>Full-screen MPEG-4 video (HE-AAC/H.264) and 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>Full <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>
<h4>Download!</h4>
<p style="margin-top:1.5em"><a href="doc/download/" class="feature">Get SoundManager 2</a></p>
</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 onload() handler.</p>
<pre class="block"><code>&lt;script type="text/javascript" src="<span>/path/to/soundmanager2.js</span>"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
soundManager.url = '<span>/path/to/swfs/</span>';
soundManager.onload = function() {
<span>// SM2 is ready to go!</span>&nbsp;
<span>// soundManager.createSound(...) calls can now be made, etc.</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>
<!-- /main -->
</div>
<!-- /content -->
</div>
<div id="control-template">
<!-- control markup inserted dynamically after each link -->
<div class="controls">
<div class="statusbar">
<div class="loading"></div>
<div class="position"></div>
</div>
</div>
<div class="timing">
<div id="sm2_timing" class="timing-data">
<span class="sm2_position">%s1</span> / <span class="sm2_total">%s2</span></div>
</div>
<div class="peak">
<div class="peak-box"><span class="l"></span><span class="r"></span>
</div>
</div>
</div>
<div id="spectrum-container" class="spectrum-container">
<div class="spectrum-box">
<div class="spectrum"></div>
</div>
</div>
<script type="text/javascript">
init();
</script>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.