javascript - 为什么我的 javascript 音频控件不能与 Web Audio API 配合使用？

Question

为什么我的 javascript 音频控件不能与 Web Audio API 一起使用？有人能看出我做的事情有什么问题吗？我用过:

            $('.play').click(function() {
                audioBufferSourceNode.play();   
            });

            $('.pause').click(function() {
                audioBufferSourceNode.pause();
            });

            $('.volumeMax').click(function() {
                audioBufferSourceNode.volume=1;
            });

            $('.volumestop').click(function() {
            audioBufferSourceNode.volume=0;
            });

            $('.playatTime').click(function() {
                audioBufferSourceNode.currentTime= 35;
                audioBufferSourceNode.play();
            });     

但由于某种原因它不起作用。这是我的index.php 页面。

           <div id="wrapper">
        <div id="fileWrapper" class="file_wrapper">
            <div id="info">
                HTML5 Audio API showcase | An Audio Viusalizer
            </div>
            <label for="uploadedFile">Drag&drop or select a file to play:</label>
            <input type="file" id="uploadedFile"></input>
        </div>
        <div id="visualizer_wrapper">
            <canvas id='canvas' width="800" height="350"></canvas>
        </div>
    </div>
    <footer>
    </footer>
   <div class="audioPlayer">  

        <button type="button" class="play">play</button>
        <button type="button" class="pause">pause</button>
        <button type="button" class="playatTime">play at 35 seconds</button>
        <button type="button" class="volumestop">Volume to 0</button>
        <button type="button" class="volumeMax">Volume open</button>

这是我的控件在 javascript 文件上的位置，该文​​件位于完整源代码的第 125 行:https://jsfiddle.net/4hty6kak/5/由于某些原因，可视化工具无法在 jsfiddle 上运行，不知道为什么。所以我不确定人们将如何准确测试这个可视化工具，有什么好的替代方案吗？

 _visualize: function(audioContext, buffer) {
    var audioBufferSourceNode = audioContext.createBufferSource(),
        analyser = audioContext.createAnalyser(),
        that = this;
    //connect the source to the analyser
    audioBufferSourceNode.connect(analyser);

            $('.play').click(function() {
                audioBufferSourceNode.play();   
            });

            $('.pause').click(function() {
                audioBufferSourceNode.pause();
            });

            $('.volumeMax').click(function() {
                audioBufferSourceNode.volume=1;
            });

            $('.volumestop').click(function() {
            audioBufferSourceNode.volume=0;
            });

            $('.playatTime').click(function() {
                audioBufferSourceNode.currentTime= 35;
                audioBufferSourceNode.play();
            });     



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

完整代码:

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

你有什么解决办法吗？

Answer 1

问题是双重的:

第一:在 JSFiddle 中，您必须确保包含正确的框架(我使用了 jQuery v1.11)，并确保如果您的脚本尝试向 onload 添加任何内容，请将其包装在 head 或 body 中，但不要将 window.onload 事件包装在JSFiddle 的选项(默认情况下它在加载时运行所有内容)。

第二:您的代码中有一个拼写错误，您在定义事件时忘记拼写所有引用，就像在代码的其余部分中一样。

$('.play').click(function(){audioBufferSourceNode.play()});

应该是:

$('.play').click(function(){audioBufferSouceNode.play()});

请注意源代码中缺少的 R。您已将其定义为audioBufferSouceNode。

我发现在事件中更改它更容易，因为您在其他地方使用了相同的拼写错误。

我更新了您的 JSFiddle 以解决该问题:https://jsfiddle.net/4hty6kak/10/