setTimeout後繼續播放音頻

我正在做一個HTML5的網絡應用程序，用戶解鎖一些功能點擊並按住按鈕1秒。到目前爲止很好，但它帶有一個音頻。setTimeout後繼續播放音頻

如果用戶在1秒之前點擊並放開按鈕，則音頻會停止並再次重新開始。

所以，我想要實現的是繼續播放音頻，如果用戶按住一秒後點擊按鈕。

這是我到目前爲止有：（閱讀以下重要說明）

$(document).ready(function() { 
 
    
 
    var audio = $("#sound")[0]; 
 
    
 
    $("#play").mousedown(function(e) { 
 
     audio.currentTime = 0; 
 
     $("#sound").prop("volume", 1); 
 
     audio.play(); 
 
     clearTimeout(this.downTimer); 
 
     this.downTimer = setTimeout(function() { 
 
      audio.play(); 
 
     }, 1000); 
 
    }). 
 
    mouseup(function(e) { 
 
     clearTimeout(this.downTimer); 
 
     $("#sound").get(0).pause(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="play">Press me</button> 
 
<audio id='sound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg'/>

此代碼必須是移動的友好，對IOS如果單擊保存一些div更多比.5秒，它突出了內容。所以......獎勵積分如果有人告訴我如何在Safari上無法使用IOS高亮顯示並完成此操作。

在此先感謝！

來源

2017-09-21 Ermac

一個選項是節省你點擊（mousedown）和釋放（mouseup）時計算差異的時間，所以如果差異小於1秒，你只能暫停......這將實現訣竅...

$(document).ready(function() { 

    var audio = $("#sound")[0]; 
    var start = 0; 

    $("#play").mousedown(function(e) { 
     audio.currentTime = 0; 
     $("#sound").prop("volume", 1); 
     audio.play(); 
     clearTimeout(this.downTimer); 
     start = Date.now(); 
     this.downTimer = setTimeout(function() { 
      audio.play(); 
     }, 1000); 
    }). 
    mouseup(function(e) { 
     clearTimeout(this.downTimer); 
     if ((Date.now()-start) < 1000) 
      $("#sound").get(0).pause(); 
    }); 
});

如果再次點擊，它會停止音樂並重新開始檢查1秒的限制。我希望它可以幫助

來源

2017-09-22 08:11:38

setTimeout後繼續播放音頻

回答

相關問題