Demo: "Page as a playlist"

Muxtape.com-style UI, MP3 Player Example: Fancy* CSS 3 version

*CSS 3 border-radius supported only by Firefox 2.x+, Safari (2.x?) as of April 2008 - perhaps IE 8 RTM..

New optional features: EQ + Waveform (Flash 9-only) - see Flash 8 version

• Square, Sine, Sawtooth, Pink Noise, Rando
• 1Hz - 10KHz Sweep
• DTMF
• Bass
• 20060826 - Armstrong
• Rain
• Going Outside
• Office Lobby
• Barrlping with Carl (featureblend.com)
• Angry cow sound?
• Things that open, close and roll

Basics

Don't want a Flash 9 requirement, EQ and waveform, less CPU use? See Flash 8-based basic demo.

Clicking a title will start loading + playing, or pause, a sound.

Once loading, click (or click and drag) on the loading/position bar to seek within the sound.

The document title reflects the currently-playing sound, and by default the list will play sequentially if left alone. (This is configurable.)

Themes

Just for fun, a few color schemes (visible when playing/paused):

• <ul class="playlist dark"> - #333 and #666, mostly
• <ul class="playlist gold"> - Frontin' the bling
• <ul class="playlist bubblegum"> - ZOMG PONIES!!!ONEONEONE
• <ul class="playlist"> (default)

Also add "shiny", eg. <ul class="shiny playlist">...

Experimental (Alpha) Variant: MP3 "Metadata": Annotations / notes / sub-tracks

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.

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.

• A Virtual Haircut (3 scenes)
  4:43

  • Electric razor

    0:00

  • Water, scissors

    2:41

  • More razor work

    4:00
• Rubber Chicken Launch (Office)
  0:47

  • First attempt

    0:00

  • Fire!

    0:02

  • "Too much angle"

    0:05

  • Random chicken noise

    0:18

  • "Wait a second"

    0:31

  • Derrr..

    0:34

  • Launch attempt #2

    0:36

  • "Wrong angle"

    0:39

  • "Fail"

    0:42

How It Works

This example uses SoundManager 2 to finds links to MP3 files, 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.)

A fragment of HTML is also appended dynamically which includes a status bar, loading control and timing info etc. This can be styled with CSS as well, of course.

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.

Basic CSS

 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 {}

The positioning (load status / control bar) template is also applied after each MP3 link, from an element named "control-template"

"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

The class names applied can be edited within the source JS also, for convenience.

The controls are shown and hidden via the same dynamic CSS updates. See the source CSS for the timing / status bar layout.

I'd like to use this.

See this basic demo for reference.

A reminder that if loading from the local filesystem, Flash will deny access to remote (network/internet) URLs by default unless whitelisted via the Flash Player Global Security Settings Page. Some URLs in this example are remote to demonstrate this.

Configuration + Options

Default configuration

To enable the EQ and/or spectrum graph or configure other features, edit the page player config (see related page-player.js file) as follows (relevant EQ/spectrum changes in red):

  // ( within page-player.js )

  this.config = {
    flashVersion: 9,       // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.
    usePeakData: true,     // [Flash 9 only] whether or not to show peak data
    useSpectrumData: true, // [Flash 9 only] whether or not to show spectrum data - WARNING: CPU-intensive
    allowRightClick:true,  // let users right-click MP3 links ("save as...", etc.) or discourage (can't prevent.)
    useThrottling: false,  // try to rate-limit potentially-expensive calls (eg. dragging position around)
    autoStart: false,      // begin playing first sound when page loads
    playNext: true,        // stop after one sound, or play through list until end
    updatePageTitle: true, // change the page title while playing sounds
    emptyTime: '-:--'      // null/undefined timer values (before data is available)
  }

Per-page configuration override

Alternately, you may override the defaults on a per-page basis by defining an "alternate configuration" object before the page-player.js file has been included in your source code:

  // ( before page-player.js )

  var PP_CONFIG = {
    flashVersion: 9,       // version of Flash to tell SoundManager to use - either 8 or 9. Flash 9 required for peak / spectrum data.
    usePeakData: true,     // [Flash 9 only] whether or not to show peak data (no notable CPU cost)
    useSpectrumData: true, // [Flash 9 only] show spectrum data. WARNING: Experimental, likely CPU-heavy
  }