[英]How to play song on click?
我想知道如何在单击歌曲时播放歌曲。 目前,当我点击一首歌时,我必须点击播放按钮来播放它,尽管我希望它在我点击时自动播放。 在我让它工作之前,虽然问题是然后播放按钮都搞砸了。 这是fiddle的链接。 这是我的java脚本代码。
$(function() {
const audio = $('audio')[0];
$('#player a').click(function(e) {
e.preventDefault();
$(this).find('i').toggleClass('fa-play-circle fa-pause-circle');
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
audio.ontimeupdate = () => {
$('#progress').css('width', audio.currentTime / audio.duration * 100 + '%');
$('#timer').text(formatTime(audio.currentTime));
};
audio.onended = () => {
};
$('#progress-bar').click(function(e) {
e.preventDefault();
audio.currentTime = e.offsetX / $(this).width() * audio.duration;
});
function formatTime(seconds) {
let minutes = Math.floor(seconds / 60);
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : '0' + seconds;
return minutes + ':' + seconds;
}
});
audioPlayer();
function audioPlayer(){
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#playlist li a").click(function(e){
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
if(currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
把它放在你的 JSFiddle 的第 3 行,它可以工作:
$('#playlist li a').click( () => {
audio.play();
$('#player a i').removeClass('fa-play-circle');
$('#player a i').addClass('fa-pause-circle');
} );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.