jquery - 如果歌曲属性不匹配，则将 currentTime 重置为 0 Jquery

Question

我正在开发一个前后音乐播放器，如果 .attr('song'); 将在相同的 currentTime 播放声音。是一样的，但是如果 .attr('song');更改它应该将 currentTime 重置为 0。它适用于同时播放声音，但如果 attr 不同则不会重置。如果用户单击“之前”或“之后”按钮并且歌曲 .attr('song') == rock 它不应该将 currentTime 重置为 0，但如果他们单击按钮和 .attr('song');是不同的，它应该将 currentTime 设置为 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;
 }

Answer 1

我要做的是添加一个全局变量“oldsong”window.oldsong = nowplay.attr('song'); , 之前 全局变量 nowplay 更改为 $(this) ，然后在播放新歌曲时检查它是否匹配，

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

这是附加的工作代码和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>