0
我有一个简单的多音轨音频播放器。用户可以选择一个他们喜欢参考的轨道。玩家基本上在工作。但是,我只想要一次播放一首曲目,但这并不奏效。音频播放器 - 一次只播放一首曲目,不起作用
这里是我已经做了
HTML AUDIO PLAYER
<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);
}
});
我是缺少在这里? 感谢
您要禁用玩其他轨道的能力,或者您想停止/暂停当前的音频和游戏等一个? – Neo 2014-09-30 09:04:50
暂停所有开始一个 – Winchestro 2014-09-30 09:07:58
如果我点击任何音轨,然后我想先前的轨道停止,如果有的话,目前点击一个。 – MysticCodes 2014-09-30 09:08:00