自定义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