Alternate PP_CONFIG object must be defined before soundManager.onready()/onload() fire.
Alternately, edit the config in page-player.js to simply use the values below by default
-------- */
// demo only, but you can use these settings too..
soundManager.flashVersion = 9;
soundManager.useHighPerformance = true; // keep flash on screen, boost performance
soundManager.wmode = 'transparent'; // transparent SWF, if possible
soundManager.useFastPolling = true; // increased JS callback frequency
soundManager.url = '../../swf/';
// custom page player configuration
var PP_CONFIG = {
autoStart: false, // begin playing first sound when page loads
playNext: true, // stop after one sound, or play through list until end
useThrottling: false, // try to rate-limit potentially-expensive calls (eg. dragging position around)</span>
usePeakData: true, // [Flash 9 only] whether or not to show peak data (left/right channel values) - nor noticable on CPU
useWaveformData: false,// [Flash 9 only] show raw waveform data - WARNING: LIKELY VERY CPU-HEAVY
useEQData: false, // [Flash 9 only] show EQ (frequency spectrum) data
useFavIcon: false, // try to apply peakData to address bar (Firefox + Opera) - performance note: appears to make Firefox 3 do some temporary, heavy disk access/swapping/garbage collection at first(?) - may be too heavy on CPU
useMovieStar: true // Flash 9.0r115+ only: Support for a subset of MPEG4 formats.
}
</script>
<!-- Page player main script -->
<scriptsrc="script/page-player.js"></script>
<!-- optional: Metadata UI prototype (not needed unless you want the bottom-most demo bits) -->
<h1><ahref="http://www.schillmania.com/projects/soundmanager2/"title="Play a page of mp3s with javascript via SoundManager 2">SoundManager 2</a> / "Page as a playlist"</h1>
<h2style="margin-top:0px;border:none">Muxtape.com-style UI, MP3/AAC Player Example</h2>
<pstyle="padding-top:0.5em;color:#333">This page uses shiny features which require Flash 9. The <ahref="basic.html"title="Basic page player demo">default config</a> uses Flash 8.</p>
<pid="experimental-features"style="margin-top:0.5em;color:#333">You can also try enabling <ahref="#experimental"onclick="window.location.href = this;window.location.reload()">experimental visualization features</a>.</p>
<!-- files from the web (note that ID3 and waveformData information will *not* load from remote domains without permission, due to Flash security restrictions) -->
<li><ahref="http://freshly-ground.com/misc/music/carl-3-barlp.mp3">Barrlping with Carl <spanclass="comment">(featureblend.com)</span></a></li>
<li><ahref="http://freshly-ground.com/data/audio/binaural/Mak.mp3"class="exclude">Angry cow sound with "exclude" CSS class <spanclass="comment">(Browser follows link normally)</span></a></li>
</ul>
<h2>MPEG4 / H.264 + HE-AAC (Flash "MovieStar" 9.0r115+) format support - audio-only example</h2>
<h3>A subset of MPEG4 <ahref="http://www.adobe.com/support/documentation/en/flashplayer/9/releasenotes.html#fixes_90115">is supported</a> including AAC, FLV, MP4, M4A, MOV, MP4V, 3GP and 3G2 files.</h3>
<ulclass="playlist">
<li><ahref="http://freshly-ground.com/data/video/Rain%20on%20Car%20Roof.aac">Rain on Car Roof <spanclass="comment">(MPEG4 .AAC audio, 128 kbps AAC-LC exported from QuickTime)</span></a></li>
<li><ahref="http://freshly-ground.com/data/video/Jellyfish.mov">Jellyfish <spanclass="comment">(848x480 H.264 video, playing audio portion only)</span></a></li>
</ul>
<h3style="margin-top:1em">Basics</h3>
<pclass="note">Don't want a Flash 9 requirement, EQ/waveform, perhaps less CPU? See Flash 8-based <ahref="basic.html"title="Page as playlist demo">basic demo</a>.</p>
<p>Clicking a title will start loading + playing, or pause, a sound.</p>
<p>Once loading, click (or click and drag) on the loading/position bar to seek within the sound.</p>
<p>The document title reflects the currently-playing sound, and by default the list will play sequentially if left alone. (This is configurable.)</p>
<p>A potential approach to noting interesting moments in sounds, scene changes, new tracks in seamless DJ mixes etc. Keep in mind this is a single MP3 being loaded, but annotations are placed along the timeline as shown.</p>
<p>A "metadata" element contains a nested list of data (UL/LI combination) - in this case, a summary of each scene - and the time at which this item occurs/begins. In order to help with positioning, the total length of the sound is also specified up-front. View the source code of this page for the details.</p>
<p>This example uses <ahref="http://www.schillmania.com/projects/soundmanager2/"title="SoundManager 2 Javascript Sound API">SoundManager 2</a> to find links to MP3 files within an unordered list, and makes them playable "in-place" on a page. The script assigns CSS classes to links' parent LI nodes to indicate their state (playing/paused, etc.)</p>
<h3>Progressive Enhancement</h3>
<p>This provides a nice HTML base for all browsers and user agents, and enhances progressively for those with Javascript and Flash. Links pointing to MP3s are assigned an onclick handler which intercepts the click (preventing the browser from following the link and unloading the page. SM2 will then create sound objects as needed to play the MP3s. In the event there is an error at runtime or a lack of support (no JS/Flash etc.), the browser will simply load the MP3s directly as it normally would. This includes iPhones, etc.</p>
<h3>HTML Fragments (UI Element Templates)</h3>
<p>Each item in the playlist has its own set of controls and progress indicators, etc. This content is defined once as a hidden template of HTML in the player JavaScript file, separate from the playlist markup, and is cloned for each item as needed. This can be easily styled with CSS as well, of course.</p>
<h2>I'd like to use this.</h2>
<p>See this <ahref="basic.html"title="Page as playlist demo">basic demo</a> for reference.</p>
<p>The basic demo uses the default Flash 8 configuration, but you can easily change this to use Flash 9 features. The only difference in code is the configuration.</p>
<p>A reminder that if loading from the local filesystem, Flash will deny access to remote (network/internet) URLs by default unless whitelisted via the <ahref="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html">Flash Player Global Security Settings Page</a>. Some URLs in this example are remote to demonstrate this.</p>
<h2>Configuration + Options</h2>
<h3>Default configuration</h3>
<p>Behaviours such as auto-start and UI elements like VU meters and spectrum graphs are easy configurable, using an object literal format as shown below.</p>
<p>The page player config (see related page-player.js file) as below.</p>
<p>The custom parameters used to make this demo page are highlighted in red.</p>
<preclass="block"><code><span>// ( within page-player.js )</span>
soundManager.flashVersion = <spanstyle="color:red">9</span>; <span>// If you need flash 9, include this line.</span>
this.config = {
usePeakData: <spanstyle="color:red">true</span>, <span>// [Flash 9 only] show peak (VU-meter) data</span>
useFavIcon: <spanstyle="color:red">true</span>, <span>// try to show peakData in address bar (Firefox + Opera) - requires usePeakData = true too, of course.</span>
useWaveformData: <spanstyle="color:red">true</span>, <span>// [Flash 9 only] true: show raw waveform data - WARNING: CPU-intensive</span>
useEQData: false, <span>// [Flash 9 only] show EQ (frequency spectrum) data - WARNING: CPU-intensive</span>
fillGraph: false, <span>// [Flash 9 only] draw full lines instead of only top (peak) spectrum points</span>
allowRightClick:true, <span>// let users right-click MP3 links ("save as...", etc.) or discourage (can't prevent.)</span>
useThrottling: false, <span>// try to rate-limit potentially-expensive calls (eg. dragging position around)</span>
autoStart: false, <span>// begin playing first sound when page loads</span>
playNext: true, <span>// stop after one sound, or play through list until end</span>
updatePageTitle: true, <span>// change the page title while playing sounds</span>
emptyTime: '-:--' <span>// null/undefined timer values (before data is available)</span>
}
</code></pre>
<h3>Per-page configuration override</h3>
<p>Alternately, you may override the defaults on a per-page basis by defining an "alternate configuration" object <b>before</b> the page-player.js file has been included in your source code:</p>
<preclass="block"><code><span>// ( before soundManager.onready()/onload() have fired )</span>
soundManager.flashVersion = <spanstyle="color:red">9</span>; <span>// If you need flash 9, include this line.</span>
var PP_CONFIG = {
usePeakData: true, <span>// [Flash 9 only] whether or not to show peak data (no notable CPU cost)</span>
useWaveformData: true <span>// [Flash 9 only] show raw waveform data. WARNING: Experimental, likely CPU-heavy</span>
}</code></pre>
<p>Any options specified in PP_CONFIG will override the defaults defined in page-player.js.</p>
<h3>Basic CSS</h3>
<pre>
If you want to make your own UI from scratch, here is the base:
ul.playlist {}
Default + hover state, "click to play":
li.sm2_link {}
li.sm2_link:hover {}
Playing + hover state, "click to pause":
li.sm2_playing {}
li.sm2_playing:hover {}
Paused + hover state, "click to resume":
li.sm2_paused {}
li.sm2_paused:hover {}
</pre>
<p>The positioning (load status / control bar) template is also applied after each MP3 link, from an element named "control-template"</p>
<p>"loading" and "position" have background colors applied, and have their width adjusted dynamically by SM2 as the sound(s) load/play. "timing" is replaced with the current time / duration, eg. 1:23 / 4:20</p>
<p>The class names applied can be edited within the source JS also, for convenience.</p>
<p>The controls are shown and hidden via the same dynamic CSS updates. See the source CSS for the timing / status bar layout.</p>
<h2>Performance Considerations</h2>
<h3>Experimental Flash 9 features</h3>
<ulclass="tight"style="padding-top:1px">
<li>
<h4>Dynamic "favicon" VU meter</h4>
<p>The VU meter "favicon" option as shown in the address/location bar for Firefox and Opera can cause a lot of disk access in Firefox (2.x/3.0 at time of writing, from what has been reported.) It may be garbage collection-related.</p>
<p>The behaviour seems to be connected to the dynamic swapping of <link> elements with data: URIs containing the VU meter data, and looks to be noticeable with the first sound played - after which point things settle down. Perhaps the browser is attempting to cache the favicon data being assigned.</p>
</li>
<li>
<h4>Waveform/spectrum visualization graph</h4>
<p>Enabling the waveformData and/or eqData features will result in some heavy DOM calls (manipulation of 256 <div> elements with each "frame" drawn) which can eat up a good amount of CPU and may make really old computers cower in fear.</p>
<p>Ultimately, the UI refresh rate will simply be limited if a CPU ceiling is hit, and audio playback should not be affected.</p>
</li>
</ul>
<h3>More CSS comments</h3>
<div>
<pre>
SoundManager 2: "page as playlist" example
------------------------------------------
Clicks on links to MP3s are intercepted via JS, calls are
made to SoundManager to load/play sounds. CSS classes are
appended to the LI parent, which are used to highlight the
current play state and so on.
Class names are applied in addition to "sm2_link" base.
