How can i dynamically load/play/pause multiple-source HTML5 audio on click?

Question

I have a content slider, set to play / stop on each click.

The problem: I want it to pause on second click. Right now it won't pause. Any ideas?

See site here: http://dev.alsoknownas.ca/music/ (audio branding section on homepage).

Here's the code:

**Edited to reflect the code suggested by Lloyd below:

<audio id="player"></audio>

Here's the script:

$(document).ready(function(){
$("span.1").attr("data-src","song.mp3");
$("span.2").attr("data-src","song2.mp3");
$("span.3").attr("data-src","song3.mp3");
$("span.4").attr("data-src","song4.mp3");
$("span.5").attr("data-src","song5.mp3");
});

$("span.1,span.2,span.3,span.4,span.5").click(function () {
  var player = document.getElementById("player");
  player.src = this.getAttribute("data-src");
  player.play();
});

Lloyd · Accepted Answer · 2012-02-09 10:12:04Z

1

for this markup:

<audio id="player"></audio>

<span class="1">one</span>
<span class="2">two</span>

use this script:

$("span.1")
    .attr("data-src-mp3","song1.mp3")
    .attr("data-src-ogg","song1.ogg");
$("span.2")
    .attr("data-src-mp3","song2.mp3")
    .attr("data-src-ogg","song2.ogg");

$("span[data-src-mp3]").click(function () {
    var player = document.getElementById("player"),
        $this = $(this);

    if ($this.hasClass("selected")) {
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    } 
    else {
        $("span[data-src-mp3].selected").removeClass("selected");
        $this.addClass("selected");
        $(player)
            .empty()
            .append($("<source>").attr("src", $this.attr("data-src-mp3")))
            .append($("<source>").attr("src", $this.attr("data-src-ogg")))
        player.play();
    }
});

Live Demo: http://jsfiddle.net/75lb/8cGBx/

edited Feb 9, 2012 at 10:12

answered Feb 6, 2012 at 22:22

Lloyd

8,4232 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Sirwilliam85 Over a year ago

I think I didn't make my problem clear in my post, I've edited it to make more sense. Everything totally works except in order to pause, it requires a double click (probably something to do with the .bind at the top...

Lloyd Over a year ago

I understood the question. My answer gives you the functionality you need, without needing to click twice, with a much smaller amount of code. If you weren't looking for a refactored solution, sorry - i'll look at it again once i get back to my computer.

Sirwilliam85 Over a year ago

I appreciate the response and the solution, looks like it would work! The only problem I'd have is the spans are created by a plugin script and I don't have direct access to them. I guess I could add a 'data-src' to each one through a script...

Lloyd Over a year ago

nah.. i'll alter the fiddle to work with your precise markup and get back to ya..

pimvdb Over a year ago

Perhaps you may want to .empty the player first since the source children are accumulating now.

|

Amar Palsapure · Accepted Answer · 2012-02-07 04:25:07Z

0

Try this,

Instead of doing

$('audio').bind('play','pause', function() {

Do

$('audio').bind('play pause', function(event) {

According to your code, by default audio is paused, when user clicks, it starts playing, and on next click it pauses.

Hope this works for you.

answered Feb 7, 2012 at 4:25

Amar Palsapure

9,6561 gold badge29 silver badges46 bronze badges

1 Comment

Sirwilliam85 Over a year ago

Thanks for the response! I tried it and unfortunately it doesn't seem to behave any differently. I'm assuming my problem is something to do with the use of the 'playing' variable.

Collectives™ on Stack Overflow

How can i dynamically load/play/pause multiple-source HTML5 audio on click?

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related