如何在点击时播放歌曲?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在点击时播放歌曲?相关的知识,希望对你有一定的参考价值。

我想知道单击歌曲时如何播放歌曲。当前,当我单击一首歌曲时,我必须单击“播放”按钮以播放它,尽管我希望在单击时自动播放。在我开始工作之前,尽管问题是播放按钮全乱了。这是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');
} );

以上是关于如何在点击时播放歌曲?的主要内容,如果未能解决你的问题,请参考以下文章

如何让 avaudioplayer 在点击新闻歌曲时停止播放上一首歌曲?

如何在列表视图中添加最近播放的歌曲?

依次播放多个音频片段

如何在recyclerView(没有按钮)中单击项目时播放歌曲?

如何从开始播放音频播放器?

尝试在随机时间播放随机歌曲(学习音乐决赛:))