CODEWITHSUNDEEP
javascriptjqueryhtmlcssaudio
user2756554
user2756554

Reputation:

Toggle Play / Pause Buttons in HTML Audio Player

I am after a very basic music player, I have the following basics working now, however;

1) How to make both the Play and Pause buttons in one button? That appears first as Pause and on click It toggles Play and on click again it Toggle Pause?

2) Also Is there anyway to add a progress counter? not a bar, but numbers i.e. 0.3/4.0min

Here is the fiddle: www.jsfiddle.net/tjHhY And here is the code as well here: 

var audio = new Audio("http://dp0169.free.fr/Musique/Air/Air%20-%20Talkie%20Walkie/02%20Cherry%20Blossom%20Girl.mp3");

$(".play").click(function () {
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
})

Upvotes: 0

Views: 10447

Answers (2)

webtech
webtech

Reputation: 329

Why don't you check this Demo. Hope it helps :)

Upvotes: 1

Konrad 'Zegis'
Konrad 'Zegis'

Reputation: 16501

I'd recommend you to use JQueryUI. It have nice variety of widgets to create clean interface :)

Also check this demo it shows how to create toggle play & pause button.

Hope it helps.

Upvotes: 1

Related Questions