如何确保webaudio源停止

Question

I have a button that when clicked should stop the audio from playing. My first try it didn't stop the song so I added the while statement. Now not only does it not stop the song but the while loops repetitively and freezes the page. This only happens when it's the first song (IE: Autoplay was blocked by chrome so clicking anything but stop gets routed through playNext(); and works fine from there).

So say you click Next or Last to start the song. If you click stop before getting to the second song it keeps playing. If the user then clicks next it plays both songs and stop will only work on the second song.

playStop(); is the one that doesn't stop it.

//Controls
//Play A Song Again
function playLast() {
    if (context.state == 'running') {
        sourceNode.stop(0);
    }
        console.log(data);
    code = 0;
    if (lastData == null) {
        playNext();
    } else {
        codeRoute();
    }
}
//Stop Playing
function playStop(){
    code = 2;
    while (context.state == 'running') {
        sourceNode.stop(0);
    }
}
//Play Next Song
//Step 1
function playNext(){

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

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

If you need more info than above, the full code is on this page broken up for each step the file takes.

Answer 1

I think the problem is that you store each AudioBufferSourceNode with the same global sourceNode variable. When you assign a new AudioBufferSourceNode to the same variable by executing sourceNode = context.createBufferSource(); you do effectively loose any reference to the previously created AudioBufferSourceNode. However that doesn't mean that it will stop playing. It just means that you can't stop it anymore.

From what I can tell by reading the referenced source code partOne() will be executed on page load. If the http request succeeds playFirst() gets called and will create and start the first AudioBufferSourceNode. When autoplay blocks your site there will be no sound but the AudioBufferSourceNode is still scheduled to be started as soon as the AudioContext is going to be resumed.

If I understand your code correctly it calls playFunct() on a user interaction to resume the AudioContext. If that happens it will create and start a new AudioBufferSourceNode. At the same time you loose any reference to the previously created AudioBufferSourceNode which will now also start to play as the AudioContext gets resumed.

A brute force solution would be to simply make sure a previously started AudioBufferSourceNode gets stopped whenever you create a new one. Just append one line before creating the AudioBufferSourceNode like this.

if (sourceNode) {
    sourceNode.stop();
}
sourceNode = context.createBufferSource();

However it might be better to refactor the code to only call it when necessary.

It hasn't anything to do with the answer to your question but in your initial code example you expected the state of the AudioContext to change when you stop an AudioBufferSourceNode. This is actually not the case. An AudioContext keeps on running unless you call suspend() or close() even if every associated AudioBufferSourceNode is stopped and it doesn't produce any sound anymore. It will keep on running forever.