CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
Aaron Reiss
Aaron Reiss

Reputation: 23

html5 audio: Click to Play, Click again to Pause for several tracks

I have four elements (in this case, images of people) in a div, each with their own unique associated mp3 file. My goal is:

When you click an element, it plays the associated mp3

If you click the same element again, it would pause that mp3 file

If you click the same element again, it would resume that mp3 file etc etc.

But! If you click another image, it plays the mp3 file associated with that element.

Then if you go back to the original element, or a new one, the track starts at the beginning again.

So far, I have any click of an element starts the associated mp3 from the beginning.

You can see my start here, under the first paragraph "Why We Are Here..."

https://erinreiss.github.io/spaceship1/

But basically, my jQuery is the following, where each image has a class of headshotsStatusQuo, and each image and associated mp3 files are named the same. So that the this.id variable selects the correct mp3 file for the image you clicked.

$(headshotStatusQuo).click(
    function(){
        var thisID = ("audio/" + this.id + ".mp3");
        console.log(thisID);    
            if (thisID.paused == false) {
                thisID.pause();
                } 
            else {
                changeTrack(thisID);
                 }      
    }
);

function changeTrack(sourceUrl) {
    var audioDues = $("#player");      
    $("#audioFill").attr("src", sourceUrl);
    audioDues[0].pause();
    audioDues[0].load();
    audioDues[0].play();
}

Thank you so much!

Upvotes: 1

Views: 887

Answers (1)

zer00ne
zer00ne

Reputation: 44086

You have thisID as a string? Then you are treating it as if it's an audio object by using .paused property and .pause() method. This Snippet features one <audio> element and a list of 3 <img>s. Each <img> has an id that corresponds to a filename of a mp3. Whatever <img> is clicked determines which one of the 3 actions the <audio> will execute:

  1. Play when src matches path (line 6)
  2. Pause when src matches path(line 8)
  3. Stop, Change src, Load src, Play when src and path do not match (line 10)

SNIPPET

$('#control').on('click', 'img', function(e) {
  var player = document.getElementById('player');
  var ID = $(this).attr('id');
  var path = 'http://vocaroo.com/media_command.php?media=';
  var SRC = path + ID + '&command=download_mp3';
  if (player.paused && (player.src === SRC)) {
    player.play();
  } else if (!player.paused && (player.src === SRC)) {
    player.pause();
  } else {
    player.pause();
    player.currentTime = 0;
    player.src = SRC;
    player.load();
    player.play();
  }
});
#control {
  list-style: none;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id='player' src=''></audio>
<ul id='control'>
  <li>
    <img id='s1xI45JbPVzM' src='http://placehold.it/50x50/000/fff?text=10'>
  </li>
  <li>
    <img id='s1czfdPRs0MC' src='http://placehold.it/50x50/00f/eee?text=11'>
  </li>
  <li>
    <img id='s1NWg457fVWy' src='http://placehold.it/50x50/0e0/111?text=12'>
  </li>
</ul>

Upvotes: 1

Related Questions