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

我在使用JavaScript在此SourceNode上实现简单的播放和暂停按钮时遇到麻烦。

这是我的audioManipulater.js文件，所有内容都可以在index.php上查看并在style.css上设置样式。

回到我的js文件。如果您查看源代码第一行上的_visualize方法。在该方法中，audioBufferSourceNode保存已加载的文件。

在第13行上，在音频节点上使用了start()和stop()方法。如何从库中获取对audioBufferSourceNode的引用，以便可以调用这些方法以某种方式播放和暂停声音？

 _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);
 },

如果需要，我将根据需要编辑index.php和style.css的代码。

编辑
完整代码:

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

由于某种原因，可视化工具无法在jsfiddle上运行，因此，这里有一个实时工作演示的链接:

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

最佳答案

这是一个范围界定问题。从MDN entry about variable declarations:



当您声明像var audioBufferSourceNode = ...这样的变量时，就将其设为_visualize方法的局部变量，这就是为什么您不能从库中访问它的原因。

你可以做什么:

删除该变量声明的var关键字:

audioBufferSourceNode = audioContext.createBufferSource()

全局声明变量(根据上述说明，此步骤是可选的，因为该变量将隐式创建为全局变量)。

这样，您将使audioBufferSourceNode成为全局变量，这意味着某些风险(例如:可能与其他变量发生冲突，可以通过任何其他方法进行操作，如果存在错误则更难以维护和调试)。

您应该考虑下面@Palpatim的建议，将变量封装在模块中，并创建访问器，以便可以从模块本身之外获取和操作它。