HTML5 / Javascript / jQuery音頻播放器沒有響應事件嗎？

Question

我正在嘗試用播放列表制作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>

我想創建一個模仿模擬音頻磁帶行為的播放器。 我希望它播放另一首歌曲，當您關閉頁面並再次打開它時，播放器將從上一曲目和您暫停的時間繼續播放。

問題是我上面的代碼沒有響應事件。

我究竟做錯了什么？

Answer 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％tracks.length來使索引不會大於tracks數組。

還有一件事： player[0].currentSrc是只讀的。 您需要使用player[0].src 。

HTML5 / Javascript / jQuery音頻播放器沒有響應事件嗎？

問題描述

1 個解決方案

解決方案1
0 2017-04-28 18:23:29

HTML5 / Javascript / jQuery音頻播放器沒有響應事件嗎？

問題描述

1 個解決方案

解決方案1 0 2017-04-28 18:23:29

解決方案1
0 2017-04-28 18:23:29