如何在javascript的audioSourceNode上实现播放/暂停按钮？

Question

I'm having trouble implementing simple play and pause buttons on this SourceNode using JavaScript.

This is my audioManipulater.js file, everything gets viewed on index.php and styled on style.css.

So back to my js file. If you look at the _visualize method on the 1st line of the source. In the method the audioBufferSourceNode holds the file that has been loaded.

On line 13 the start() and stop() methods are being used on the audio node. How can I get a reference to the audioBufferSourceNode out of the library so that I can call these methods to play and pause the sound somehow?.

 _visualize: function(audioContext, buffer) {
    var audioBufferSourceNode = audioContext.createBufferSource(),
        analyser = audioContext.createAnalyser(),
        that = this;
    //connect the source to the analyser
    audioBufferSourceNode.connect(analyser);
    //connect the analyser to the destination(the speaker), or we won't hear the sound
    analyser.connect(audioContext.destination);
    //then assign the buffer to the buffer source node
    audioBufferSourceNode.buffer = buffer;
    //play the source
    if (!audioBufferSourceNode.start) {
        audioBufferSourceNode.start = audioBufferSourceNode.noteOn //in old browsers use noteOn method
        audioBufferSourceNode.stop = audioBufferSourceNode.noteOff //in old browsers use noteOn method
    };
    //stop the previous sound if any
    if (this.animationId !== null) {
        cancelAnimationFrame(this.animationId);
    }
    if (this.source !== null) {
        this.source.stop(0);
    }
    audioBufferSourceNode.start(0);
    this.status = 1;
    this.source = audioBufferSourceNode;
    audioBufferSourceNode.onended = function() {
        that._audioEnd(that);
    };
    this._updateInfo('Playing ' + this.fileName, false);
    this.info = 'Playing ' + this.fileName;
    document.getElementById('fileWrapper').style.opacity = 0.2;
    this._drawSpectrum(analyser);
 },

I'll edit-in my code for index.php & style.css upon request if needed.

EDIT full code:

https://jsfiddle.net/4hty6kak/1/

For some reason the visualizer doesn't work on jsfiddle, so here is a link to a live working demo:

http://wayou.github.io/HTML5_Audio_Visualizer/

Answer 1

This is a scoping issue. From the MDN entry about variable declarations :

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

Assigning a value to an undeclared variable implicitly creates it as a global variable (it becomes a property of the global object) when the assignment is executed.

As you are declaring the variable like var audioBufferSourceNode = ... , then you are making it a local variable to the _visualize method, and that's the reason why you cannot access it from out of the library .

What you can do:

1. Remove the var keyword for that variable declaration:

    audioBufferSourceNode = audioContext.createBufferSource() 

2. Declare the variable globally (according to the explanation above, this step would be optional as the variable will implicitly be created as a global variable).

With this, you would be making audioBufferSourceNode a global variable and that implies certain risks (eg: there could be conflicts with other variables, it could be manipulated by any other methods, it is more difficult to maintain and debug if there are errors).

You should consider @Palpatim 's suggestion below, keep the variable encapsulated in the module, and create an accessor so you can get and manipulate it from outside the module itself.