爲什麼我的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/