javascript - 阻止音频播放然后允许使用 jquery 函数结束

Question

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

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

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

检查这个 fiddle :http://jsfiddle.net/kfkszwr1/1/

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

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