HTML5/Javascript/jQuery音频播放器不是'；对事件没有反应？_Javascript_Jquery_Html_Audio_Media Player

HTML5/Javascript/jQuery音频播放器不是'；对事件没有反应？

javascript jquery html audio

HTML5/Javascript/jQuery音频播放器不是'；对事件没有反应？,javascript,jquery,html,audio,media-player,Javascript,Jquery,Html,Audio,Media Player,我正在尝试制作一个带有播放列表的html5播放器，这样当一首歌结束时，下一首歌就会自动开始我正在使用jQuery 这是我的Javascript： $(function(){ var player = $('#player') var index = 0 var CurrentTime = 0 var tracks = [ {'source' : 'audio1.mp3'}, {'source' : 'audio2.mp3'},

我正在尝试制作一个带有播放列表的html5播放器，这样当一首歌结束时，下一首歌就会自动开始

我正在使用jQuery

这是我的Javascript：

$(function(){   
var player = $('#player')
var index = 0
var CurrentTime = 0
var tracks = [  {'source' : 'audio1.mp3'},
                {'source' : 'audio2.mp3'},
                {'source' : 'audio3.mp3'}]

var CurrentTrack = tracks[index]

    function updateCookie(){
        Cookies.set('trackIndex', index)
        Cookies.set('time', CurrentTime)
    }

    //Check if the user has been here before
    if(!!Cookies.get('trackIndex')){
        updateCookie()
    }
    else {
        index = Cookies.get('trackIndex')
        CurrentTime = Cookies.get('time')
    }
    function playerSetUp(){
        player[0].currentSrc = CurrentTrack.source
        player[0].currentTime = CurrentTime
    }


    player.bind('ended',function(){
        index++
        player[0].currentSrc = CurrentTrack.source
        console.log($('#player').currentSrc)
        player[0].load()
        player[0].play()
    })
    player.bind('pause',function(){
        CurrentTime = $('#player').currentTime
        updateCookie()
    })
})

这是我的html：

<html>
<head>
<title>Mixtape</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-
3.2.1.min.js"></script>
<script src="js.cookie.js"></script>
<script type="text/javascript" src="player.js"></script>
<head>
<body>
<audio controls autoplay id='player'>
    <source src="audio1.mp3">
    Fallback
</audio>
</body>


混音带
退路

我想创建一个模拟音频磁带行为的播放器。我想让它一首接一首地播放歌曲，当你关闭页面并再次打开时，播放器将从上一首曲目继续播放，直到你暂停播放

问题是我上面的代码没有响应事件

我做错了什么？

代码中有三个错误，事件侦听器正在工作。使用：

（只有一个“！”）。每次修改“索引”时都需要更新“CurrentTrack”，因为只需设置一次CurrentTrack

以及：

您需要调用playerSetUp（）并将index=index%tracks.length，这样您的索引就不会大于tracks数组

还有一件事：

player[0]。currentSrc

是只读的。您需要使用

播放器[0].src

//Check if the user has been here before
if(!Cookies.get('trackIndex')){
    updateCookie()
    CurrentTrack = tracks[index]
}
else {
    index = Cookies.get('trackIndex')
    CurrentTime = Cookies.get('time')
    CurrentTrack = tracks[index]
}

playerSetUp();
player.bind('ended', function() {
    index++;
    index = index % tracks.length
    CurrentTrack = tracks[index]
    player[0].currentSrc = CurrentTrack.source
    console.log(player[0].currentSrc)
    player[0].load()
    player[0].play()
})
player.bind('pause', function() {
    CurrentTime = player[0].currentTime
    updateCookie()
})