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小提琴：

<强>的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>

如果song attr不匹配将currentTime重置为0 Jquery

1 个答案: