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

Send in the Clowns - Judy Collins

California Dreaming - The Mamas & the Papas

All of Me - Billie Holiday and Lester Young

Brass in Pocket - The Pretenders

Teenager In Love - Dion and the Belmonts

Take Five - The Dave Brubeck Quartette

Everyday - Buddy Holly

Waterloo Sunset - The Kinks

Moon River - Audrey Hepburn

I Wish That I Knew.... - Nina Simone

A Nightingale
Sang in Berkeley Square
- Vera Lynn

Good Vibrations - The Beach Boys

Dead Beat Club - B-52's

Anything Goes - Ella Fitzgerald

Over the Rainbow - Eva Cassidy

Beale Street Blues - Ella Fitzgerald

Manifesto - Victor Jara

Corcovado - Stan Getz and Astrud Gilberto

Pancho and Leftie - Emmylou Harris


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