为什么这个循环暂停

Question

我有这个收音机，我正在努力让它播放，停止，播放最后一个，然后播放下一个。当你在第一次加载时遇到错误时试图找出Play Last和Play，我最终遇到了一个问题，它在被调用之前尝试再次运行我的循环并且无法加载内容，因为它已经有了内容。经过3-4次尝试后，它会停止循环播放。

目前它一遍又一遍地播放同一首歌如果我点击下一个而不是播放下一首歌，它会播放相同的歌曲。否则它自动不做任何事情。我认为问题在于代码;某个地方错了。

在代码中我尝试设置var代码;通过程序路由操作。我对代码应该如何工作的想法：

code = 1; This should loop though songs after song endlessly playing.

code = 0; This should play the last played song unless the current is the first song. Then become code 1.

code = 2; It looked to me like there was an endless loop so I used 2 as a stop point for loops.

这是与当前歌曲有关的所有部分。

如果您首先阅读控件，则可能更容易理解代码。它始终以playNext（）开头;

第一部分获取文件的链接

//Part One - Get file directory
function partOne(){
    $.ajax({
        url: '../scripts/radio.php',
        data: {
            attr1: 'value1'
        },
        success: function(returnData) {
            data = returnData;
            lastData = data;
            console.log(data);
            console.log('Step1')
            playFirst();
        }
    });
};
partOne();

此部分将代码路由到正确的位置。

//Step 2 - Code Highway - Gets new song or sends loop to trash and plays last/current song.
function codeRoute(){
    document.getElementById("playSampleButton").disabled = true;
    setTimeout(function(){document.getElementById("playSampleButton").disabled = false;},5000);
if (code === 1){
    $.ajax({
        url: '../scripts/radio.php',
        data: {
            attr1: 'value1'
        },
        success: function(returnData) {
            data = returnData;
            console.log(data);
            code=2;
            sourceNode.stop(0);
            playFirst();
        }
    });
}if(code === 0);{
    code = 2;
        sourceNode.stop(0);
        console.log(code)
        console.log('0step2')
        playFunct();
    }
    console.log('Step2')
};

可能没用，但这部分会加载并播放所选文件。

//Step 3 Loads and plays song
//Load and Play current/next song
function playFirst(){
    document.getElementById("songName").innerHTML = data;
    fileChosen = true;
    setupAudioNodes();
    var request = new XMLHttpRequest();
    console.log('Step3')

    request.addEventListener("progress", updateProgress);
    request.addEventListener("load", transferComplete);
    request.addEventListener("error", transferFailed);
    request.addEventListener("abort", transferCanceled);

    request.open('GET', data, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the data
    request.onload = function() {
        code=1;
        $("#title").html("Infinite");
        $("#album").html("Infinite");
        $("#artist").html("Valence");
        onWindowResize();
        $("#title, #artist, #album").css("visibility", "visible");

        // decode the data
        context.decodeAudioData(request.response, function(buffer) {

        // when the audio is decoded play the sound
        sourceNode.buffer = buffer;
        sourceNode.start(0);
        $("#freq, body").addClass("animateHue");

        //on error
    }, function(e) {
           console.log(e);
       });
    };
    request.send();
};

//Load and Play last/Current when autoplay blocked. 
function playFunct(){
    document.getElementById("songName").innerHTML = lastData;
    fileChosen = true;
    setupAudioNodes();
    console.log('Step3.5')
    var request = new XMLHttpRequest();

    request.addEventListener("progress", updateProgress);
    request.addEventListener("load", transferComplete);
    request.addEventListener("error", transferFailed);
    request.addEventListener("abort", transferCanceled);

    request.open('GET', lastData, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the lastData
    request.onload = function() {

    $("#title").html("Infinite");
    $("#album").html("Infinite");
    $("#artist").html("Valence");
    onWindowResize();
    $("#title, #artist, #album").css("visibility", "visible");

    // decode the lastData
    context.decodeAudioData(request.response, function(buffer) {

        // when the audio is decoded play the sound
        sourceNode.buffer = buffer;
        sourceNode.start(0);
        console.log(lastData)
        console.log(code)
        console.log('0step3')
        $("#freq, body").addClass("animateHue");
        //on error
    }, function(e) {
        console.log(e);
        });
    };
    request.send();
};

//Step 4
//Auto plays next song. Trashes loop.
var audioBuffer;
var sourceNode;
function setupAudioNodes() {

    // setup a analyser
    analyser = context.createAnalyser();

    // create a buffer source node
    sourceNode = context.createBufferSource();  

    //connect source to analyser as link
    sourceNode.connect(analyser);

    // and connect source to destination
    sourceNode.connect(context.destination);

    //start updating
    rafID = window.requestAnimationFrame(updateVisualization);
    sourceNode.onended = function() {
        console.log('Step4')
        if(code === 1){
            codeRoute();
        }if(code === 2){
            console.log('Trash Deleted')
        }
    }
};

更新：如果有兴趣，上述完整代码完全正常工作：

//Part One - Get file directory
function partOne(){
    $.ajax({
    url: '../scripts/radio.php',
    data: {
        attr1: 'value1'
    },
    success: function(returnData) {
        data = returnData;
        lastData = data;
        console.log(data);
        console.log('Step1')
        playFirst();
    }
});
};
partOne();

//Step 2 - Code Highway - Gets new song or sends loop to trash and plays last/current song.
function codeRoute(){
    document.getElementById("playSampleButton").disabled = true;
    setTimeout(function(){document.getElementById("playSampleButton").disabled = false;},5000);
if (code === 1){
        $.ajax({
        url: '../scripts/radio.php',
        data: {
        attr1: 'value1'
        },
        success: function(returnData) {
        data = returnData;
        console.log(data);
        code=2;
        sourceNode.stop(0);
        playFirst();
    }
});
        }if(code === 0){
            code = 2;
            sourceNode.stop(0);
            console.log(code)
            console.log('0step2')
            playFunct();
        }
        console.log('Step2')
};

//Step 3 Loads and plays song
//Load and Play current/next song
function playFirst(){
document.getElementById("songName").innerHTML = data;
fileChosen = true;
setupAudioNodes();
var request = new XMLHttpRequest();
console.log('Step3')

request.addEventListener("progress", updateProgress);
request.addEventListener("load", transferComplete);
request.addEventListener("error", transferFailed);
request.addEventListener("abort", transferCanceled);

request.open('GET', data, true);
request.responseType = 'arraybuffer';

// When loaded decode the data
request.onload = function() {
    code=1;
$("#title").html("Infinite");
$("#album").html("Infinite");
$("#artist").html("Valence");
onWindowResize();
$("#title, #artist, #album").css("visibility", "visible");

// decode the data
context.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
sourceNode.buffer = buffer;
sourceNode.start(0);

$("#freq, body").addClass("animateHue");
//on error
}, function(e) {
console.log(e);
});
};
request.send();
};

//Load and Play last/Current when autoplay blocked. 
function playFunct(){
document.getElementById("songName").innerHTML = lastData;
fileChosen = true;
setupAudioNodes();
console.log('Step3.5')

var request = new XMLHttpRequest();

request.addEventListener("progress", updateProgress);
request.addEventListener("load", transferComplete);
request.addEventListener("error", transferFailed);
request.addEventListener("abort", transferCanceled);

request.open('GET', lastData, true);
request.responseType = 'arraybuffer';

// When loaded decode the lastData
request.onload = function() {
        code=1;
$("#title").html("Infinite");
$("#album").html("Infinite");
$("#artist").html("Valence");
onWindowResize();
$("#title, #artist, #album").css("visibility", "visible");

// decode the lastData
context.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
sourceNode.buffer = buffer;
sourceNode.start(0);
console.log(lastData)
console.log(code)
console.log('0step3')
$("#freq, body").addClass("animateHue");
//on error
}, function(e) {
console.log(e);
});
};
request.send();

};

//Controls
//Play A Song Again
function playAgain(){
        console.log(data);
        code = 0;
        codeRoute();
}
//Stop Playing
function stopPlaying(){
    code = 2;
    sourceNode.stop(0);
}
//Play Next Song
//Step 1
function playNext(){

        if(context.state == 'suspended'){
            code =0;
            playFunct();

}else{
    code =1;//0; to play last song.
    console.log(code)
    codeRoute();
}
}

//Step 4
//Auto plays next song. Trashes loop.
var audioBuffer;
var sourceNode;
function setupAudioNodes() {
    // setup a analyser
    analyser = context.createAnalyser();
    // create a buffer source node
    sourceNode = context.createBufferSource();  
    //connect source to analyser as link
    sourceNode.connect(analyser);
    // and connect source to destination
    sourceNode.connect(context.destination);
    //start updating
    rafID = window.requestAnimationFrame(updateVisualization);
    sourceNode.onended = function() {
        console.log('Step4')
        if(code === 2){
        console.log('Trash Deleted')
        }else{
        if(code === 1){
        codeRoute();
        }
        }

}
};

Answer 1

在标记为“此部分路由到当前位置”的部分中，代码段为：

if(code === 0);{
    code = 2;
    sourceNode.stop(0);
    console.log(code)
    console.log('0step2')
    playFunct();
}

if语句不应该有一个分号（即）

if(code === 0){
    code = 2;
    sourceNode.stop(0);
    console.log(code)
    console.log('0step2')
    playFunct();
}