自定义HTML5音频API:未挖掘类型错误:未定义不是函数

Custom HTML5 audio API: Uncaught TypeError: undefined is not a function

本文关键字：未定义 错误 函数 类型 音频 HTML5 API 自定义      更新时间：2023-09-26

我正在尝试创建自己的自定义音频HTML5控件。我阅读了本教程，其中还有一个工作示例。

我在本地工作，一旦我点击元素，就会出现以下错误：

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));

var music = $('[data-music]');

当您使用jQuery查找元素时，它实际上会查找一个元素数组并对它们进行包装，以便您可以在它们上使用jQuery特定的函数。由于您想要元素本身（并且只有一个元素），因此可以指定第一个数组索引来检索它

var music = $('[data-music'])[0];

然后，您可以像使用任何其他普通元素一样使用该元素。

另请参阅：http://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

相关文章：