692 lines
34 KiB
HTML
Executable file
692 lines
34 KiB
HTML
Executable file
<!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="robots" content="noindex" />
|
|
<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"/>
|
|
|
|
<!-- inline demo CSS (combined + minified for performance; see comments for raw source URLs) -->
|
|
<link rel="stylesheet" type="text/css" href="demo/index-rollup.css"/>
|
|
|
|
<!-- the SoundManager 2 API -->
|
|
<script type="text/javascript" src="script/soundmanager2.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]-->
|
|
|
|
<!-- SM2 demo/homepage-specific stuff -->
|
|
<script type="text/javascript">var is_home = true;</script>
|
|
|
|
<!-- inline demo JS (combined + minified; see comments for raw source URLs) -->
|
|
<script type="text/javascript" src="demo/index-rollup.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="lights"></div>
|
|
|
|
<div id="top">
|
|
|
|
<h1>A JavaScript Sound API supporting MP3, MPEG4 and HTML5 Audio.</h1>
|
|
|
|
<div id="nav">
|
|
<div id="version" title="Version of SM2 loaded on this page"></div>
|
|
<ul>
|
|
<li>
|
|
<strong><a href="#home">Home</a></strong>
|
|
</li>
|
|
<li>
|
|
<a href="#">Demos</a>
|
|
<ul>
|
|
<li><a href="demo/template/">Basic Template</a></li>
|
|
<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° 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>
|
|
</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/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/#serving-audio">Serving To HTML5 + Flash Clients</a></li>
|
|
<li><a href="doc/technotes/#client-requests">How Clients Download Audio</a></li>
|
|
<li><a href="doc/technotes/#mobile-device-limitations">Mobile Device Limitations</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-wrapper">
|
|
|
|
<div id="main" class="triple">
|
|
|
|
<div id="col3" class="c3">
|
|
|
|
<div id="support-wrapper">
|
|
<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/" rel="nofollow">Get Satisfaction support network</a>
|
|
</div>
|
|
</div>
|
|
<!-- /.box -->
|
|
</div>
|
|
|
|
<div id="sm2-options">
|
|
<p>
|
|
SM2 options: <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"> | </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"> | </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>
|
|
|
|
</div>
|
|
|
|
<!-- /main -->
|
|
</div>
|
|
|
|
<div id="live-demos" class="columnar">
|
|
|
|
<div id="about-sm2">
|
|
|
|
<div id="sm2-support-warning">
|
|
<!-- as needed, warning is displayed here -->
|
|
</div>
|
|
|
|
<div id="about-header">
|
|
|
|
<div class="sm2-speaker">
|
|
<img src="demo/_image/soundmanager2-speaker.png" alt="SoundManager 2 speaker logo" class="ie6sucks" />
|
|
</div>
|
|
|
|
<h2 class="special">SoundManager 2 makes it easier to play audio using JavaScript.</h2>
|
|
|
|
<p style="line-height:2em">
|
|
Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API. <a href="doc/download/" title="Download SoundManager 2" class="feature" style="font-family:helvetica;font-weight:bold;margin:0px;white-space:nowrap">Get SoundManager 2</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="threeup first">
|
|
|
|
<div class="column">
|
|
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Speak and <b style="white-space:nowrap">be heard<span class="music-note icon"></span></b></h3>
|
|
<h4>More sound, <b>in more places</b></h4>
|
|
|
|
<p>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, both desktop and mobile.</p>
|
|
|
|
<p><a href="#getting-started" class="cta">Getting started</a> is pretty easy, too.</p>
|
|
|
|
<p>A few live examples:</p>
|
|
|
|
<div id="sm2-support" class="demo-block">
|
|
<!-- "oh snap", SM2 didn't load etc. messaging -->
|
|
</div>
|
|
|
|
<div style="position:relative;*zoom:1;min-width:275px">
|
|
|
|
<div id="special-demo-left" class="sm2-inline-list">
|
|
|
|
<div class="ui360">
|
|
<a href="demo/_mp3/office_lobby.mp3" class="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° UI player demo" class="cta">360° UI <span>»</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="special-demo-right">
|
|
<a href="demo/_mp3/coins.mp3" title="Play "Change"" class="sm2_button exclude inline-exclude norewrite">coins.mp3</a>
|
|
<a href="demo/christmas-lights/sound/glass0.mp3" class="sm2_button exclude inline-exclude norewrite" title="Play "Glass break 1"">glass0.mp3</a>
|
|
<a href="demo/christmas-lights/sound/glass1.mp3" class="sm2_button exclude inline-exclude threesixty-exclude norewrite" title="Play "Glass break 2"">glass1.mp3</a>
|
|
|
|
<div class="demo-more-abs">
|
|
<a href="demo/mp3-player-button/" title="MP3 buttons demo" class="cta">mp3 buttons <span>»</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="html5-audio-notes">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>HTML5 + flash <b style="white-space:nowrap">hybrid<span class="package icon"></span></b></h3>
|
|
<h4>Complexity, <b>reduced</b></h4>
|
|
|
|
<p>Supporting HTML5 audio can be tedious in modern browsers, let alone legacy ones. With real-world visitors using browsers ranging from mobile Safari to IE 6 across a wide range of devices, there can be many support cases to consider.</p>
|
|
|
|
<p>SoundManager 2 gives you a single, powerful API that supports both new and old, using HTML5 audio where supported and optional Flash-based fallback where needed. Ideally when using SoundManager 2, audio "just works."</p>
|
|
|
|
<div class="icons">
|
|
<ul>
|
|
<li class="desktop" title="Desktop support: Windows, Mac OS, Linux">Desktop support: Windows, Mac OS, Linux</li>
|
|
<li class="laptop" title="Laptop/tablet support: Windows, Mac OS, Linux / Blackberry Playbook, Kindle Fire + other HTML5/Flash devices">Laptop/tablet support: Windows, Mac OS, Linux / Blackberry Playbook, Kindle Fire + other HTML5/Flash devices</li>
|
|
<li class="iphone" title="iPhone support: iPhone with iOS 4.0 and newer">iPhone support: iOS 4.0 and newer</li>
|
|
<li class="ipad" title="iPad support: Version 1.0 (iOS 3.2) and newer">iPad support: Version 1.0 (iOS 3.2) and newer</li>
|
|
<li class="android" title="Android OS supporting HTML5 and/or Flash (Version 2.3 or newer)">Android OS supporting HTML5 and/or Flash (Version 2.3 or newer)</li>
|
|
</ul>
|
|
The details: <a href="doc/getstarted/#intro" class="cta" style="text-align:right">how it works <span>»</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
<h3 style="cursor:help" title="Gzip-compressed file size on a typical set-up is 11 KB. And was it supposed to be the "Swiss Army" kind? I forget.">The ginsu knife: <b style="white-space:nowrap">11 KB<span class="performance icon"></span></b></h3>
|
|
<h4>Big features, <b>small footprint</b></h4>
|
|
<p><em>But wait, there's more!</em></p>
|
|
<p>Performance is an important metric, too. SoundManager 2 packs a comprehensive, feature-rich API into as little as <a href="doc/getstarted/#basic-inclusion" title="SoundManager 2: Build options (down to ~11 KB in size)" style="white-space:nowrap" class="cta">11 KB</a> over the wire when optimized; that's less than 8% of the original, uncompressed file size.</p>
|
|
<p>SM2 is self-contained, having no external dependencies, and is compatible with popular JavaScript frameworks.</p>
|
|
<p>The source code is BSD-licensed and is provided in fully-commented, non-debug and compiler-optimized "minified" versions appropriate for development and production use.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="threeup">
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Basic</h3>
|
|
<h4>Playable <b>links and playlists</b></h4>
|
|
|
|
<p>These demos use unordered lists with MP3 links that play in-place; the UI is easily customized via CSS.</p>
|
|
|
|
<ul id="graphic-playlist" class="graphic">
|
|
<li><a href="demo/_mp3/rain.mp3" class="exclude">Rain</a></li>
|
|
<li><a href="demo/_mp3/walking.mp3" class="exclude">Walking</a></li>
|
|
<!-- files from the web (note that ID3 information will *not* load from remote domains without permission, Flash restriction) -->
|
|
<li><a href="http://freshly-ground.com/data/video/Rain%20on%20Car%20Roof.aac" title="Rain on car roof (AAC)" class="exclude">Rain On Car Roof <span class="sidenote">(AAC)</span></a></li>
|
|
</ul>
|
|
|
|
<div class="demo-more" style="text-align:right;white-space:normal">
|
|
<a href="demo/play-mp3-links/" title=""Play MP3 Links" demo" class="cta">play MP3 links <span>»</span></a>
|
|
</div>
|
|
|
|
<div style="clear:both"></div>
|
|
|
|
<p>A richer playlist theme with optional time, seekable progress bar and a VU meter where supported:</p>
|
|
|
|
<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/birds-in-kauai-128kbps-aac-lc.mp4" title="128 kbps MPEG-4 AAC LC (Low Complexity) sound: Birds in Kaua'i" class="button-exclude inline-exclude threesixty-exclude">Birds In Kaua'i <span class="sidenote">(128 kbps AAC)</span></a></li>
|
|
<li><a href="http://freshly-ground.com/data/audio/sm2/20130320 - Po'ipu Beach Waves.ogg" title="Po'ipu Beach Waves: OGG sound format, requires HTML5 Audio() support to play" class="muxtape-html5 button-exclude inline-exclude threesixty-exclude">Po'ipu Beach Waves <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="muxtape-html5 button-exclude inline-exclude threesixty-exclude">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" class="cta">muxtape-style UI <span>»</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Shiny</h3>
|
|
<h4>Data <b>visualization features</b></h4>
|
|
|
|
<p>The 360° player UI demo uses <canvas> and includes options for waveform and spectrum analysis data via Flash 9, adding beautiful visual feedback to the interface.</p>
|
|
|
|
<p style="font-size:92%;text-align:left;color:#666;white-space:normal"><em>Seven Or Eight Days</em> courtesy of <a href="http://www.adrianglynn.com/" title="Adrian Glynn, Vancouver, Canadian singer/songwriter" class="cta">Adrian Glynn</a>, from the album <em>Bruise</em>. For more, see the <a href="https://www.youtube.com/watch?v=dFc2QQiGcUQ" title="Adrian Glynn: "Seven Or Eight Days" video" rel="nofollow" class="cta">music video</a>.</p>
|
|
|
|
<!--
|
|
<div id="inline-demos">
|
|
<h4 id="inline-demo-header">Inline demos using SoundManager 2</h4>
|
|
</div>
|
|
-->
|
|
|
|
<div>
|
|
|
|
<div id="sm2-visualization" class="sm2-inline-list">
|
|
|
|
<div class="ui360 ui360-vis">
|
|
<a href="http://freshly-ground.com/data/audio/sm2/Adrian%20Glynn%20-%20Seven%20Or%20Eight%20Days.mp3" class="exclude button-exclude inline-exclude" style="position:absolute;color:#333">Adrian Glynn - Seven Or Eight Days</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="demo-more" style="width:256px;margin:0.5em auto 0px auto;clear:both">
|
|
<a href="demo/360-player/canvas-visualization.html" title="360° UI: JavaScript + Canvas Visualization" class="cta">360° + spectrum UI <span>»</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Experimental</h3>
|
|
<h4>Advanced <b>prototypes</b></h4>
|
|
|
|
<p>The Cassette Tape UI is a skinnable player based on the TDK MA-R90 cassette tape, a classic design from 1982.</p>
|
|
|
|
<div>
|
|
<a href="demo/cassette-tape/" title="Cassette Tape UI (Prototype Demo)"><img src="demo/_image/cassette-tape-ui-screenshot.jpg" alt="Cassette Tape UI Prototype Screenshot" style="max-width:506px;min-width:100%;width:100%;border-radius:12px" /></a>
|
|
</div>
|
|
|
|
<p style="margin:0.5em 0px 0px 0px;padding:0px;font-size:92%;text-align:left;color:#666;margin-bottom:0.5em;white-space:normal">Remember Type IV, Metal & Chromium/CrO2? <a href="http://www.youtube.com/watch?v=1FDgUfeG8q4" title="Cassette Tape TV ads from Japan, 1979-1989 (YouTube)" class="cta">Those were the days</a>.</p>
|
|
|
|
<p>The "Wheels Of Steel" started as a simple CSS prototype, and evolved to replicate most of the UI and functionality of a traditional DJ set-up. Pitch bending, scratch and EQ effects are present where supported.</p>
|
|
<p style="margin:0px 0px 0.5em 0px;padding:0px;text-align:center" class="bonus-demo"><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-full-ui.jpg" alt="wheelsofsteel.net: Online turntable demo (screenshot)" style="display:block;width:100%;min-width:100%;max-width:315px;margin-left:-4px;border:none" /></a></p>
|
|
<p style="margin:0px;padding:0px;font-size:92%;text-align:left;color:#666;margin-bottom:0.5em;white-space:normal">The <a href="http://wheelsofsteel.net/" title="The Wheels Of Steel: Online turntable / browser-based DJ prototype" class="cta">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)" class="cta">An Ode To Turntables (in HTML.)</a></p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="how-to" class="twoup">
|
|
|
|
<div class="column">
|
|
<div id="getting-started" class="column-wrapper">
|
|
|
|
<h3>Getting <b>started</b></h3>
|
|
|
|
<h4>Basic SoundManager 2 set-up</h4>
|
|
|
|
<p>Including the script, configuring the <code>url</code> and registering an <code>onready()</code> callback:</p>
|
|
|
|
<pre class="block"><code><script src="soundmanager2.js"></script>
|
|
<script>
|
|
<a href="doc/#soundmanager-setup" title="soundManager.setup() documentation" onclick="checkDomain()">soundManager.setup</a>({
|
|
<span><span>// where to find flash audio SWFs, as needed</span></span>
|
|
url: '<span>/path/to/swf-files/</span>',
|
|
onready: function() {
|
|
<span><span>// SM2 is ready to play audio!</span></span>
|
|
}
|
|
});
|
|
</script></code></pre>
|
|
|
|
<p>Upon execution of soundmanager2.js, SM2 will determine what Flash SWF to load (if any) based on the path defined in <code>soundManager.url</code>.</p>
|
|
<p>After successful initialization, <code>soundManager.onready()</code> will fire and sounds can be played.</p>
|
|
<p>By default, SM2 uses a Flash 8-based SWF build. Some <a href="#flash9-features" title="SoundManager 2: Flash 9 API-based features" class="cta">additional features</a> are available when using the Flash 9-based build.</p>
|
|
|
|
<p>For a live example, see the <a href="demo/template/" class="cta">basic template demo</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="column">
|
|
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Playing <b>audio</b></h3>
|
|
<h4>Basic playback control</h4>
|
|
|
|
<p>Once <code>soundManager.onready()</code> has fired, sounds can be loaded and played.</p>
|
|
|
|
<h4>Creating and playing a sound object</h4>
|
|
|
|
<pre class="block"><code><span><span>// create "mySound"...</span></span>
|
|
var mySound = <a href="doc/#soundmanager-createsound" title="soundManager.createSound() documentation" onclick="checkDomain()">soundManager.createSound</a>({
|
|
url: '<span>/path/to/an.mp3</span>'
|
|
});
|
|
|
|
<span><span>// ...and play it</span></span>
|
|
mySound.play();
|
|
</code></pre>
|
|
|
|
<p>Additional options and events can be specified when loading and playing sounds. For more examples of playback features, see <a href="demo/api/" class="cta">API Demos</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="twoup">
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Bonus</h3>
|
|
<h4>Additional <b>demos</b></h4>
|
|
|
|
<p>
|
|
Examples using multi-track playback, progress and combinations of sound and animation:
|
|
</p>
|
|
|
|
<ul class="bonus-demos">
|
|
|
|
<li>
|
|
<p class="smaller"><strong>Armor Alley (game)</strong></p>
|
|
<a href="http://www.schillmania.com/armor-alley/" style="display:inline-block" title="Armor Alley: Web Prototype (1990 PC-DOS version)"><img src="demo/_image/armor-alley-screenshot.png" alt="Armor Alley: Web Prototype (demo screenshot)" style="display:block;width:100%;max-width:200px" /></a>
|
|
</li>
|
|
|
|
<li>
|
|
<p class="smaller"><strong>SURVIVOR remake</strong></p>
|
|
<a href="http://www.schillmania.com/survivor/" style="display:inline-block" title="SURVIVOR (1982 Commodore 64 game remake)"><img src="demo/_image/survivor-screenshot.png" alt="SURVIVOR (C64 game remake) demo screenshot" style="display:block;width:100%;max-width:200px" /></a>
|
|
</li>
|
|
|
|
<li>
|
|
<p class="smaller"><strong>Drum Machine</strong></p>
|
|
<a href="demo/mpc/" style="display:inline-block" title="MPC (sampler/drum machine) demo"><img src="demo/_image/mpc-screenshot.png" alt="MPC (drum machine) demo screenshot" style="display:block;width:100%;max-width:200px" /></a>
|
|
</li>
|
|
|
|
<li>
|
|
<p class="smaller"><strong>Christmas Lights</strong></p>
|
|
<a href="demo/christmas-lights/" style="display:inline-block" title="Smashable Christmas Lights demo"><img src="demo/_image/christmas-lights.jpg" alt="Smash Christmas Lights demo" style="display:block;width:100%;max-width:200px;border-radius:7px" /></a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<h4 style="clear:left;padding-top:1em">"Audio sprites" (sound segments / samples) demo</h4>
|
|
|
|
<p>With sound playback options like <code>from</code> and <code>to</code>, you can play portions of a larger, single-file "sprite" of many sounds.</p>
|
|
|
|
<p class="bonus-demo clear">
|
|
<a href="demo/api/#fitter-happier" title=""Fitter, Happier" sound sample demo"><img src="demo/_image/fitter-happier-waveform.jpg" alt=""Fitter, Happier" waveform screenshot" style="width:100%;max-width:562px" /></a>
|
|
</p>
|
|
|
|
|
|
<p>
|
|
For more live examples, see the <a href="demo/api/" title="SoundManager 2 API demos" class="cta">API Demos</a>.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Elsewhere</h3>
|
|
<h4>As heard on <b><span class="scratched-out">TV</span> the internets</b></h4>
|
|
|
|
<p>A few nifty places SoundManager 2 has been seen in use on the Wild World Web:</p>
|
|
|
|
<div class="inthewild active">
|
|
|
|
<ul class="inthewild">
|
|
<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="pitchfork" href="http://www.pitchfork.com/" title="Pitchfork"><span>Pitchfork</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>
|
|
<li>
|
|
<a id="freesound" href="http://freesound.org" title="Freesound.org"><span>freesound.org</span></a>
|
|
</li>
|
|
<li>
|
|
<a id="baroque-me" href="http://blog.chenalexander.com/2011/baroque-bach-cello/" title="Alexander Chen's "baroque.me""><span>baroque.me</span></a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<h4 style="padding-top:1em">Articles and presentations</h4>
|
|
|
|
<p>Some other words, pictures and video on the subject of HTML5 and web audio:</p>
|
|
|
|
<ul class="standard">
|
|
<li>Video, 02/2012: <a href="http://www.youtube.com/watch?v=C2Tw0BeZb8Q" title="Scott Schiller: Web Audio: HTML5 + Flash (in a tree)" class="cta">Web Audio: HTML5 + Flash (in a tree)</a> (<a href="http://isflashdeadyet.com/talks/html5/bayjax_yahoo_sunnyvale_02-06-2012/" title=""Web Audio: HTML5 + Flash (in a tree)" presentation slides" class="cta">slides</a>.) Updated HTML5 content, demos and <a href="http://www.schillmania.com/content/entries/2012/survivor-c64-html-remake/" title="SURVIVOR: Remaking a Commodore 64 game in HTML" class="cta">SURVIVOR</a> C64 game demo.</li>
|
|
<li>Video presentation: <a href="http://www.youtube.com/watch?v=KjdPNtWV3Z0#t=56s" title="Scott Schiller: "Adding Sound To HTML"" class="cta">Adding Sound To HTML</a> (<a href="http://isflashdeadyet.com/talks/html5/" title=""Adding Sound To HTML" presentation slides" class="cta">slides</a>) (12/2011)</li>
|
|
<li>Video: <a href="http://www.youtube.com/watch?v=ffk65q5Rl9I" title="Yahoo!/YUI Blog, video presentation: Scott Schiller on the State of HTML5 Audio" class="cta">Probably, Maybe, No: The State of HTML5 Audio</a> + turntable demo (05/2011)</li>
|
|
<li>24ways.org article, <a href="http://24ways.org/2010/the-state-of-html5-audio" title="Probably, Maybe, No: The State Of HTML5 Audio (24ways.org)" class="cta">The State Of HTML5 Audio</a> (12/2010)</li>
|
|
</ul>
|
|
|
|
<h4 style="padding-top:1em">Credits and thank-yous</h4>
|
|
|
|
<ul class="standard">
|
|
<li>Icons: Desktop / mobile / iOS device iconography via <a href="http://glyphish.com/" class="cta">glyphish.com</a> (<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution 3.0 Unported" class="cta">CC</a>). Tile background: "<a href="http://subtlepatterns.com/tiny-grid/" class="cta">Tiny Grid</a>". Homepage header typeface: <a href="http://work.meredithmandel.com/#379252/Typeface-Chunk-Five" class="cta">Chunk (Five)</a> by Meredith Mandel (<a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL&_sc=1" title="SIL Open Font License (OFL)" class="cta">OFL</a>).</li>
|
|
<li>Music: <em>Seven Or Eight Days</em> courtesy of <a href="http://www.adrianglynn.com/" title="Adrian Glynn, Vancouver-based Singer/Songwriter" class="cta">Adrian Glynn</a>. <em>Graffiti Sex</em> courtesy of <a href="http://www.fugitives.ca/" title="The Fugitives, multi-instrumentalists from Vancouver" class="cta">The Fugitives</a>, from the album <em>In Streetlight Communion</em>. <em>I Tried</em> and <em>People Asking</em> courtesy of <a href="http://sonreal.bandcamp.com/album/the-lightyear-mixtape" title="The Lightyear Mixtape from SonReal, Vancouver-based hip-hop artist" class="cta">SonReal</a>.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Download <b>the code</b></h3>
|
|
|
|
<p>
|
|
<a href="doc/download/" class="feature">Get SoundManager 2</a>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
|
|
</div>
|
|
|
|
<div class="threeup">
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper">
|
|
|
|
<h3>Technical <b>overview</b></h3>
|
|
|
|
<h4>HTML5 audio + optional Flash fallback</h4>
|
|
|
|
<ul class="standard">
|
|
<li>100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers</li>
|
|
<li>Invisible Flash SWF provides HTML5 fallback as needed</li>
|
|
<li>API is consistent whether using HTML5 or Flash</li>
|
|
<li>See <a href="doc/#soundmanager-usehtml5audio" title="soundManager.useHTML5Audio HTML5 Audio() support feature documentation" class="cta">useHTML5Audio</a> for implementation details</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper"> <!-- spaced-out -->
|
|
|
|
<h3>API <b>specifics</b></h3>
|
|
<h4>Basic API features (HTML5, Flash 8*)</h4>
|
|
|
|
<ul class="standard">
|
|
<li>Load, stop, play, pause, mute, seek, pan*, volume control from JavaScript</li>
|
|
<li>Events: <code>onload()</code>, <code>whileloading()</code>, <code>whileplaying()</code>, <code>onfinish()</code> and more</li>
|
|
<li>ID3V1 + ID3V2 tag support for MP3s (title, artist, genre etc.)*</li>
|
|
</ul>
|
|
|
|
<br />
|
|
|
|
<h4 id="flash9-features">Additional Flash 9-based API features</h4>
|
|
|
|
<ul class="standard">
|
|
<li>RTMP / Flash Media Server streaming support (experimental) - see <a href="doc/#smsound-serverurl" title="SMSound.serverURL parameter" class="cta">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>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column">
|
|
<div class="column-wrapper"> <!-- spaced-out -->
|
|
|
|
<h3>Everything <b>else</b></h3>
|
|
<h4>Documentation, tools and demos</h4>
|
|
|
|
<ul class="standard">
|
|
<li>Extensive <a href="doc/" title="SoundManager 2 documentation" class="cta">API Documentation</a> with examples and notes</li>
|
|
<li>Built-in <a href="doc/technotes/#debug-output" title="SoundManager 2 console.log()-style debug output" class="cta">debugging</a> and <a href="doc/getstarted/#troubleshooting" title="SoundManager 2 troubleshooting tool" class="cta">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" class="cta">discussion/support</a></li>
|
|
<li id="licensing"><a href="license.txt" title="SoundManager 2 BSD license" class="cta norewrite">BSD licensed</a></li>
|
|
</ul>
|
|
|
|
<br />
|
|
<h4 class="home-shopping-network">Not only do you get the ginsu knife...</h4>
|
|
<p style="font-size:92%">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" class="cta">Playable MP3 links</a></li>
|
|
<li><a href="demo/mpc/" title="MPC sampler/drum machine demo" class="cta">MPC sampler/drum machine</a></li>
|
|
<li><a href="demo/animation-1/" title="Bouncing ball animation with sound effects" class="cta">Basic animation + sound</a></li>
|
|
<li><a href="demo/christmas-lights/" title="Smashable christmas lights demo (animation and sound)" class="cta">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" class="cta">Live API + code examples</a></li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!--/min-width -->
|
|
|
|
</div>
|
|
|
|
<!-- three -->
|
|
|
|
<!-- /#about-sm2 -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="clear"> </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>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|