More Information.

javaScript Jukebox

Play
Volume

Progress
Rainy Days and Mondays - The Carpenters

She's Not There -The Zombies

Echo Beach - Martha and the Muffins

FDR in Trinadad - Ry Cooder

California Dreaming - The Mamas & the Papas

Jersey Girl - Tom Waits

Brass in Pocket - The Pretenders

Teenager In Love - Dion and the Belmonts

Take Five - The Dave Brubeck Quartette

Everyday - Buddy Holly

Moon River - Audrey Hepburn

I'm Sticking With You - The Velvet Underground

A Nightingale
Sang in Berkeley Square
- Vera Lynn

Good Vibrations - The Beach Boys

Dead Beat Club - B-52's

In The Wee Small Hours
Of The Morning
- Gerry Mulligan

Over the Rainbow - Eva Cassidy

Beale Street Blues - Ella Fitzgerald

Goodbye Pork Pie Hat - Charles Mingus

Love Reign O're Me - The Who


Creating a javaScript JukeBox



This jukebox page uses javaScript to change the source of an HTML5 audio player depending on which button is active. The code for this is fairly straight forward, however, whilst writing it I encountered a few issues relating to using the HTML 5 range slider to monitor and control the audio progress. Things to note are as follows:

1) Querying the video duration returns a string not a number so I had to convert before I could use it.

2) Video duration meta data is not instantaneous so I had to use player.onloadedmetadata = function() {.......} to use it

3) The HTML5 range sliders are not responsive to window width changes (you have to re-load)

Close