Juke is the best way to show off your mixtapes.

It runs on jQuery and SoundManager 2. The sound goes through Flash 8+ or HTML5 audio, and SoundManager handles all of that (it’s amazing), so it works on almost any device. It even provides a link to your visitors’ iTunes Store to purchase each track.

How to use Juke

  <link rel="stylesheet" href="juke.css" type="text/css" >
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="juke.js"></script>

  <div id="juke">
      <li><img src="album art goes here"></li>

  <script type="text/javascript">
        title:              "Mixtape",
        imagesFolder:       "public/images/juke/",
        soundmanagerFolder: "public/swf/",
        placeholder:        "images/juke/default.jpg",
        trackinfo:          "trackinfo.json",
        SM2:                "public/docs/js/min/soundmanager2.min.js",
        itunes:             true,
        audio:              "mix.mp3",
        tooltips:           false,
        animationSpeed:     400,
        debug:              false

Configuration Options

  • title Name of the mixtape, it gets shown in window title when playing
  • imagesFolder Folder of Juke’s images (e.g. background, overlays)
  • soundmanagerFolder Folder of SoundManager2 SWFs
  • placeholder Image for mixtape (shown before album art)
  • trackinfo JSON-formatted string or URL to file
  • SM2 URL to the SoundManager2 library so that Juke can load it
  • itunes Place a localized iTunes Store link beside the track info
  • audio URL to audio file (MP3, M4A or WAV)
  • tooltips Hover over playhead for track metadata
  • animationSpeed Speed of album art animation (in milliseconds)
  • debug Spits out lots of stuff to the console

Juke uses a JSON object to store global and track metadata. This includes a start marker, artist name and track name for each track. The JSON object can be passed to Juke as a string or as a URL to a file with this information. You can format the markers as raw seconds or “mm:ss”.

    "duration": "8:20",
        "marker": "0",
        "artist": "Geotic/Virtual Boy",
        "track": "Through the Lush and Undiscovered/Thrust"
        "marker": "78",
        "artist": "Caribou",
        "track": "Jamelia (Gold Panda Remix)"
        "marker": "5:10",
        "artist": "Gil Scott-Heron and Jamie XX",
        "track": "Running"

Get Juke