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

Question

我在使用 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/

Answer 1

这是一个范围界定问题。来自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.

当您像 var audioBufferSourceNode = ... 那样声明变量时，您就是在将它设为 _visualize 方法的局部变量，这就是为什么您无法从图书馆外访问它。

你可以做什么:

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

   audioBufferSourceNode = audioContext.createBufferSource()
   

2. 全局声明变量(根据上面的解释，此步骤是可选的，因为变量将隐式创建为全局变量)。

有了这个，你会让 audioBufferSourceNode 成为一个全局变量，这意味着一定的风险(例如:可能与其他变量有冲突，它可能被任何其他方法操纵，它更难有错误时进行维护和调试)。

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