Question

我有此收音机，目前正在努力使其播放，停止，最后播放和下一个播放。尝试在首次加载时发现错误时找出“播放最后一个”和“播放”时，我最终遇到了一个问题，即它在尝试被调用之前再次尝试遍历我的循环，并且无法加载已经存在的内容内容。经过3-4次尝试后，它停止了循环播放。

当前，如果我单击“下一步”而不是播放下一首歌曲，它会一遍又一遍地播放同一首歌曲。否则，它不会自动执行任何操作。我相信问题出在代码上。某个地方错了。

在代码中，我试图设置一个var代码；通过程序路由动作。我对代码应该如何工作的想法：

code = 1; This should loop though song 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();
}

为什么此循环不暂停

1 个答案: