javascript - 当手动选择当前歌曲时，我的 JavaScript mp3 播放器无法播放下一首歌曲

Question

我正在制作一个 JavaScript MP3 播放器并遵循在线教程。我自己添加了一些东西，比如可以单击来播放的 MP3 文件列表。整个事情工作正常，直到我手动选择 MP3 文件并且歌曲结束或者我单击下一首(或上一首)，因为它不会加载下一首歌曲(如果您不手动单击歌曲，这确实有效) .)

我收到以下错误:

Uncaught TypeError: Cannot read property 'substr' of undefined
    at loadSong (player.js:20)
    at next (player.js:76)
    at HTMLElement.onclick (VM4443 :88)

我认为这与loadSong(id)中给出的参数有关。代码如下(不需要的代码已被省略)，提前感谢您的帮助!

var songs = ["Bloed Voor De Kunst.mp3",
            "Iemand Moet Het Doen.mp3"];

var songTitle = document.getElementById('songTitle');
var songList = document.getElementById('songList');
var arrayLength = songs.length-1;

var song = new Audio();
var currentSong = 0;

function loadSong(id) {
    currentSong = id;
    song.src = "mp3/" + songs[currentSong]; 
    var title = songs[currentSong];
    var trim = title.substr(0, title.length-4);
    songTitle.textContent = trim;
    song.volume = volumeSlider.value;
    song.play();
    setTimeout(showDuration, 1000);
    document.getElementById('playpause').setAttribute('onclick','songPlayPause()');
    document.getElementById('playpause').setAttribute('class','far fa-pause-circle');
    console.log(currentSong);
    console.log(arrayLength);
}

function updateSongSlider() {
    var c = Math.round(song.currentTime);
    songSlider.value = c;
    currentTime.textContent = convertTime(c);
    if(song.ended) {
        next();
    }
}

function next() {
    var current = currentSong;
    if(current !== arrayLength) {
        currentSong = currentSong + 1;      
    }
    else {
        currentSong = 0;
    }
    loadSong(currentSong);

}

function getSongList() {
    for(var i=0; i < songs.length; i++) {
        var title = songs[i];
        var trim = title.substr(0, title.length-4);
        var playbutton = "<i class='far fa-play-circle' onClick=loadSong('" + i + "')></i>";
        document.getElementById('songList').innerHTML += "<li>" + playbutton + "<p>" + trim + "</p></li>";
    }
}

Answer 1

看起来您的数组 songs 目前不包含与键 id 相关的歌曲。因此 id 不是一个好的值。

在您的条件current !== arrayLength，current，因为它的最大值可能是一个字符串“1”，这并不完全是等于数字1，因此它进入条件并进行加法，结果得到错误的值。

更改:

function next() {
    var current = currentSong;
    if(current !== arrayLength) {
        currentSong = currentSong + 1;      
    }
    else {
        currentSong = 0;
    }
    loadSong(currentSong);

}

致:

function next() {
        var current = parseInt(currentSong);
        if(current < arrayLength) {
            currentSong = currentSong + 1;      
        }
        else {
            currentSong = 0;
        }
        loadSong(currentSong);
    }