阻止音頻播放，然後允許jQuery功能結束後

我一直在爲一個網站的簡單的音頻播放器。我只希望它有發揮和停止能力。我有它的工作，所以它會發揮，通過解除選擇器的設置，使其不能重疊。完成後，我想再次綁定選擇器。它似乎沒有做到這一點。也許我只是不理解綁定和解除綁定的位置。阻止音頻播放，然後允許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); 
});

來源

2014-10-08 dimmlight

這似乎是一個非常低效的方法來做到這一點。你是否考慮過在數據元素中存儲一個布爾值來表示它是否正在播放？這樣，您不需要每次單擊頁面時都綁定和解除綁定頁面上的每個播放按鈕。 – sage88 2014-10-08 14:42:54

問題是，當您重新綁定事件時，您沒有將任何偵聽器傳遞給該綁定。你必須明確地指向要調用的函數再次點擊。暫停事件也沒有重新綁定。

檢查此琴：http://jsfiddle.net/kfkszwr1/1/

我已經添加了這些事件監聽器：

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

來源

2014-10-08 14:42:16 STT

就是這樣！謝謝我沒有意識到我需要一個單獨的函數來重新綁定。這很好用！ – dimmlight 2014-10-08 15:03:22

雖然有更簡單的方法，請考慮@ sage88評論。您還必須考慮綁定和解除綁定暫停按鈕，這開始變得很麻煩。 – STT 2014-10-08 15:04:27

我曾嘗試存儲變量，然後使用if else語句，到目前爲止還沒有能夠讓他們工作。我會繼續努力，看看我是否可以想出一個方法來做到這一點，沒有綁定和解綁。 – dimmlight 2014-10-08 15:25:53

這不回答你的眼前問題，但會幫助你使用的數據元素，如果你想使用更有效的方法。

設置使用jQuery數據元素的布爾變量：

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

使用jQuery的數據元素檢索布爾變量：

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

只要確保你確實有id爲「頁面上的DIV data_div」。

來源

2014-10-08 15:50:12 sage88

我認爲我有一切正常工作。不完全按照您的建議，但不使用綁定和解除綁定。請參閱下面的代碼。感謝您指引我朝另一個方向發展。 – dimmlight 2014-10-09 01:00:01

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

來源

2014-10-09 01:00:20 dimmlight

阻止音頻播放，然後允許jQuery功能結束後

回答

相關問題