音频播放器-一次只播放一首曲目，不起作用

Audio Player - Playing only one track at a time, not working

本文关键字：一首 不起作用 曲目 播放 一次 播放器 音频      更新时间：2023-09-26

我有一个带有多个音轨的简单音频播放器。用户只能选择一个他们喜欢引用的曲目。玩家基本上在工作。但是，我一次只想播放一首曲目，这是行不通的。

以下是我所做的

HTML音频播放器

<div class="audioplayer">
  <div class="md-col-4">
    <input type="radio" name="track" class="track1" id="track1" value="1" checked="checked">
    <label for="track1" class="track1 selected">
        <div class="audiotrack">
            <div class="info">
               <h5>In this world</h5>
               <p>Gramatik</p>
            </div>
            <audio src="/media/gramatik.mp3" class="audio-player" preload="auto"></audio>
            <div class="playpause" data-state="play"></div>
            <div class="progressbar"></div>
        </div>
     </label>
   </div>
  <div class="md-col-4">
    <input type="radio" name="track" class="track2" id="track1" value="2" checked="checked">
    <label for="track2" class="track2">
        <div class="audiotrack">
            <div class="info">
               <h5>Stars</h5>
               <p>Tom Hank</p>
            </div>
            <audio src="/media/looseyourself.mp3" class="audio-player" preload="auto"></audio>
            <div class="playpause" data-state="play"></div>
            <div class="progressbar"></div>
        </div>
     </label>
   </div>
</div>

JS

$('.audioplayer label').on('click', function(e){
    e.preventDefault();
    var labelid = $(this).attr('for').toString();
    $('.selected').removeClass('selected');
    $('input:radio[id='+labelid+']').prop('checked', true);
    console.log($('input:radio[id='+labelid+']').prop('checked', true));
    $(this).addClass('selected');
    var btn = $(this).find(".playpause");
    var audio = btn.siblings('audio');
    var progress= btn.siblings(".progressbar");
    if(!btn.hasClass("playing")){
      btn.addClass("playing");
      audio.get(0).play();
        var playertime = setInterval(function(){
        var c = audio.get(0).currentTime;
        var d = audio.get(0).duration;
        progress.css("width", (c/d)*100 +'px' );
      }, 300);
    }
    else{
      btn.removeClass("playing");
      audio.get(0).pause();
      clearInterval(playertime);
    }
});

我在这里缺少什么？感谢

您可以执行类似的操作

var audio = btn.siblings('audio');
//I wouldn't recommend but this is a way to do it.
$('audio').each(function(){
    console.log('audio');
    this.pause();
});    
var progress= btn.siblings(".progressbar");
相关文章：