自定義HTML5音頻API：未捕獲TypeError：undefined不是函數

我正在嘗試創建自己的自定義音頻HTML5控件。我讀了這個tutorial，它也有一個實例。自定義HTML5音頻API：未捕獲TypeError：undefined不是函數

我在本地工作，我得到了下面的錯誤，一旦我在元素上點擊：

this is clicked: <button class="play-button audio-button icon icon-loudspeaker" data-audio-button>…</button> 
Uncaught TypeError: undefined is not a function

我想知道我失蹤教程示例做的工作，我修改它稍微。

HTML5：

<button class="play-button audio-button icon icon-loudspeaker" data-audio-button></button> 
    <audio controls="controls" preload="true" data-music> 
     <source src="http://www.alexkatz.me/codepen/music/interlude.mp3" type="audio/ogg" /> 
     <source src="http://www.alexkatz.me/codepen/music/interlude.ogg" type="audio/mpeg" /> 
    </audio>

的jQuery：

(function($){ 
    'use strict'; 

    // variable to store HTML5 audio element 
    var music = $('[data-music]'); 
    var audioButton = $('[data-audio-button]'); 

    audioButton.on('click', function(){ 

     console.log('this is clicked:', this); 

     if (music.paused) { 
      music.play(); 
      audioButton.removeClass('icon-loudspeaker'); 
      audioButton.addClass('icon-play-button'); 
     } else { 
      music.pause(); 
      audioButton.removeClass('icon-play-button'); 
      audioButton.addClass('icon-close'); 
     } 
    }); 


}(jQuery));

來源

2014-09-29 Daniel Ramirez-Escudero

嘗試'變種音樂= $（ '[數據音樂]'）[0];' – Brad 2014-09-29 20:47:58

@Brad它解決了不確定的問題。你能解釋爲什麼我能理解這個問題嗎？ – 2014-09-30 06:43:39