HTML5/Javascript/jQuery 音频播放器不响应事件？答案

【问题标题】：HTML5/Javascript/jQuery audio player isn't responding to events?HTML5/Javascript/jQuery 音频播放器不响应事件？
【发布时间】：2017-04-28 17:37:48
【问题描述】：

我正在尝试制作一个带有播放列表的 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>

我想创建一个模仿模拟录音带行为的播放器。我希望它一首接一首地播放歌曲，当您关闭页面并再次打开时，播放器将从上一首曲目和您暂停的时间继续播放。

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

我做错了什么？

【问题讨论】：

标签： javascript jquery html audio media-player

【解决方案1】：

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

//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]
}

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

还有：

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()
})

您需要调用 playerSetUp() 和 index = index % tracking.length 以使您的索引不会大于您的曲目数组。

还有一点：player[0].currentSrc 是只读的。您需要使用player[0].src。

【讨论】：