Question

我正在制作一个HTML5网络应用，用户点击并按住按钮1秒即可解锁某些功能。到目前为止一直很好，但它伴随着音频。

如果用户在1秒之前点击并重新启动按钮，则音频会在再次单击时停止并再次启动。

所以，我试图实现的是，如果用户在一秒钟后点击按钮，则继续播放音频。

这是我到目前为止所做的:(阅读以下重要提示）

＆＃13;

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

＆＃13;

<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'/>

＆＃13;

此代码必须是适合移动设备的，如果您点击暂停某些div超过.5秒，它会突出显示内容。所以...如果有人告诉我如何在Safari上无法使用IOS突出显示并完成此任务，那么......奖励积分。

提前致谢！

Answer 1

一个选项是保存单击（mousedown）时的时间和释放时（mouseup）计算差异的时间，所以只有在差异小于1秒时才会暂停...这样就可以了... / p>

$(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秒限制。我希望它有所帮助

在setTimeout之后继续播放音频

1 个答案: