为什么我的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的1.11），并确保，如果你的脚本尝试添加任何东西到onload，即自动换行它在头部或主体中，而不是JSFiddle选项中的window.onload事件（默认情况下，它运行onload的所有内容）。

第二个： 您的代码中存在拼写错误，您在其中定义了您忘记拼写所有引用的事件，就像您在其他代码中所做的那样。

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

应该是：

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

注意，在源缺少的R上。你已经将它定义为audioBufferSouceNode。

我发现在事件中更改它很容易，因为您在其他地方使用了相同的拼写错误。然而https://jsfiddle.net/4hty6kak/10/