If song attr does not match reset currentTime to 0 Jquery

Question

I am working on a before and after music player that will play a sound at the same currentTime if .attr('song'); is the same, but if .attr('song'); is changed it should reset currentTime to 0. It works for playing the sound at the same time, but will not reset if attr is different. If the user clicks the "before" or "after" button and both the songs .attr('song') == rock it should not reset currentTime to 0 but if they click on a button and .attr('song'); is different it should set currentTime to 0

JSFiddle:

https://jsfiddle.net/jeffd/z7uymp23/

HTML:

<div class="songtype">Rock <br> <div class="smallerthang"><strong>Steve Godsley</strong> by Boontango</div></div>
<div class="beforebutton player" key="rockbefore.mp3" song="rock"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> Before</div>
<div class="afterbutton player" key="rockafter.mp3" song="rock"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> After</div>

<div class="songtype">Rap <br> <div class="smallerthang"><strong>Million or More</strong> by China Fox, Superhype Mic, Warren 'Thir13een' Young, Nicolas BONNEYRAT</div></div>
<div class="beforebutton player" key="rapbefore.mp3" song="rap"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> Before</div>
<div class="afterbutton player" key="rapafter.mp3" song="rap"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> After</div>

JQuery

   window.nowplay=$(".player");
$(".player").on('click', function () {

    var key = $(this).attr('key');
    var song = $(this).attr('song');
    window.nowplay = $(this);
    window.nowplay2 = $(this); 
    EvalSound(this, key);
    $(".player").not(this).removeClass("pause"); 
    $(".player").not(this).children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
    nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
    nowplay.addClass("pause");
});
 var thissound = new Audio();
 var currentKey;

 function EvalSound(el, key) {
     thissound.addEventListener('ended', function () {

nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
     });
     thissound.addEventListener('pause', function () {

         nowplay.removeClass("pause");

          nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");

     });
     thissound.addEventListener('loadstart', function () {


     });
         thissound.addEventListener('playing', function () {

         nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");

     });
     var timenow = thissound.currentTime;
     if (currentKey !== key) thissound.src = key;


     currentKey = key;
     //currentSong = song;

     thissound.currentTime = timenow;
     //if (song !== currentSong) thissound.currentTime = 0;

     if (thissound.paused) thissound.play();
     else thissound.pause();
     currentPlayer = thissound;
 }

Use .data() instead of .attr() and prefix key and song attributes with data- — zer00ne

Jeff Jeff · Accepted Answer · 2017-01-14T18:15:07

What I had to do was add a global variable 'oldsong' window.oldsong = nowplay.attr('song');, before the global variable nowplay is changed to $(this) and then check to see if it matched later when it plays the new song,

thissound.currentTime = timenow;
         if (nowplay.attr('song') !== oldsong) thissound.currentTime = 0;

here is the attached working code and js fiddle:

JSFiddle

https://jsfiddle.net/jeffd/z7uymp23/1/

Jquery

window.nowplay=$(".player");
$(".player").on('click', function () {
    var key = $(this).attr('key');
    var song = $(this).attr('song');
    window.oldsong = nowplay.attr('song');
    window.nowplay = $(this);
    window.nowplay2 = $(this); 
    EvalSound(this, key);
    $(".player").not(this).removeClass("pause"); 
    $(".player").not(this).children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
    nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
    nowplay.addClass("pause");
});
    var thissound = new Audio();
    var currentKey;
 function EvalSound(el, key) {
     thissound.addEventListener('ended', function () {

nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
     });
     thissound.addEventListener('pause', function () {

         nowplay.removeClass("pause");

          nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");

     });
     thissound.addEventListener('loadstart', function () {


     });
         thissound.addEventListener('playing', function () {

         nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");

     });
     var timenow = thissound.currentTime;
     if (currentKey !== key) thissound.src = key;


     currentKey = key;
     //currentSong = song;

    thissound.currentTime = timenow;
     if (nowplay.attr('song') !== oldsong) thissound.currentTime = 0;

     if (thissound.paused) thissound.play();
     else thissound.pause();
     currentPlayer = thissound;
 }

</script>

If song attr does not match reset currentTime to 0 Jquery

1 Answers