Question

我一直在为网站制作一个简单的音频播放器。我只希望它具有播放和停止功能。我有它工作，它将播放，设置它所以通过取消绑定选择器播放不能重叠。完成后我想再次绑定选择器。它似乎没有做到这一点。也许我只是不明白应该放置绑定和取消绑定的位置。

function playMusic(){
    var audioElement = document.createElement('audio');
    var audioElementSrc = $(this).attr('data-audio-src');
    audioElement.setAttribute('src', audioElementSrc);
    $.get();
    audioElement.addEventListener("loadeddata", function(){
        audioElement.play();                
    }, true);

    $('.pause').click(function() {
        audioElement.pause();
    });
    audioElement.addEventListener("playing", function(){
        $('.play').unbind('click');
    });
    audioElement.addEventListener("ended", function(){
        $('.play').bind('click');           
    });
}

$(function(e){
    $('.play').click(playMusic);
});

Answer 1

问题是当您重新绑定事件时，您没有将任何侦听器传递给绑定。您必须明确指向再次调用click的函数。暂停事件也没有重新绑定。

检查这个小提琴：http://jsfiddle.net/kfkszwr1/1/

我添加了这些事件监听器：

audioElement.addEventListener("pause", rebind);
audioElement.addEventListener("ended", rebind);

Answer 2

这不能回答您当前的问题，但如果您想使用更有效的方法，它将帮助您使用数据元素。

使用jQuery数据元素设置布尔变量：

$('#data_div').data("isPlaying", true);

使用jQuery数据元素检索布尔变量：

var isPlaying = $('#data_div').data("isPlaying");

请确保您在页面上实际拥有ID为“data_div”的div。

Answer 3

    var isPlaying = false;
    function playMusic(){
        var audioElement = document.createElement('audio');
        var audioElementSrc = $(this).attr('data-audio-src');               

        if (isPlaying != true)
        {
            isPlaying = true;
            audioElement.setAttribute('src', audioElementSrc);
            $.get();
            audioElement.addEventListener("loadeddata", function(){
            audioElement.play();                
            }, true);
             audioElement.addEventListener("ended", function() {
             isPlaying = false;    
            });         
            $('.pause').click(function() {
            audioElement.pause();
            isPlaying = false
            });             
        }
        else
        {
            return false;
        }           
    }

$(function(e){
    $('.play').click(playMusic);

阻止音频播放然后允许jquery功能结束

3 个答案: