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

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

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

---

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

检查这把小提琴：

我添加了以下事件侦听器：

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

---

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

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

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

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

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

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

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

---

只需确保页面上确实有一个id为“data\u div”的div即可。

这似乎是一种非常低效的方法。您是否考虑过只在数据元素中存储一个布尔值来表示它是否正在播放？这样你就不需要在每次点击页面上的每个播放按钮时都绑定和解除绑定。就是这样！谢谢，我没有意识到我需要一个单独的函数来重新绑定。那太好了！有更简单的方法来做这件事，请考虑@ SAGE88评论。您还必须考虑暂停按钮的绑定和解除绑定，这开始变得麻烦很多。我已经尝试存储变量，然后使用IF语句，到目前为止还没能使它们工作。我会继续努力，看看我是否能想出一个不受约束和约束的方法。我想我的工作都是正确的。不完全是您建议的方式，但是没有使用绑定和取消绑定。请参阅下面的代码。谢谢你给我指出了一个不同的方向。