HTML5 Audio Player + XML Playlist
A simple audio player built using the <audio> element and IE9's improved XML support

Keyboard Shortcuts:

  • Spacebar = Play/Pause
  • Left Arrow = Rewind
  • Right Arrow = Fast Forward
  • Up Arrow = Previous Song
  • Down Arrow = Next Song

(Loading...)

Aside from the use of the <audio> element, this demo demonstrates how elements from XML and HTML documents can be mixed.

  1. This page is stored as an HTML file
  2. The playlist is stored as an XML file
  3. The XML file is loaded into an <iframe>
  4. Script removes the root XML element from the <iframe> and inserts it into the HTML document
  5. Script attaches mouse event handlers to the XML elements to add interactivity
  6. CSS in the HTML document applies to the inserted XML elements automatically

Playlist XML: