触摸移动静止时如何暂停音频

问题描述 投票:0回答:0

我有这段代码,当你在乙烯基上向上移动鼠标时,乙烯基可以倒带,但我的问题是当鼠标移动静止时我需要暂停音频。当我的鼠标在静止位置移动时,当我需要暂停时,音频仍在播放:

这里是代码:

        var detectTap = false;
    var detectPlay = false;

    $(document).ready(function(){

        $("body").height($(document).height());
        $("#services").height($(document).height());
        $(".container").height($(document).height());
        $(".row").height($(document).height());

        $("#audioplay1").click(function() {

            myAudio=document.getElementById('audio2');
            duration = myAudio.duration;
            myAudio.currentTime = 0;
            myAudio.loop=true;
            myAudio.play();
            detectPlay = true;
            offset = $("#round-play1").offset();
        })

    })

    $(document).on('touchstart click', '#round-play1', function(e){
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        detectTap = true;
        startDeg =  angXY(e);
        myAudio.pause();
        A_x = x;
        A_y = y;

    });

    $(document).on('touchmove click', '#round-play1', function(e){
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        var deg = angXY(e);
        
        var t2 = globTime;
        var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
        currentDragTime = t2 + t3;

        myAudio.currentTime = currentDragTime;
        myAudio.play();
        
        $("#round-play1").css('-moz-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-webkit-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-o-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-ms-transform', 'rotate(' + deg + 'deg)');
        
        
    });

    $(document).on('touchend click', '#round-play1', function(e){
        var x = e.changedTouches[0].pageX;
        var y = e.changedTouches[0].pageY;
        detectTap = false;
        myAudio.play();
        //r = getCurrentRotation($("#round-play1")[0]);
    });

    const angXY = (e) => {
        var x = e.touches ? e.touches[0].clientX : e.changedTouches[0].pageX;
        var y = e.touches ? e.touches[0].clientY : e.changedTouches[0].pageY;

        var center_x = (offset.left) + ($("#round-play1").width() / 2);
        var center_y = (offset.top) + ($("#round-play1").height() / 2);
        var mouse_x = x;
        var mouse_y = y;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 180;

        return degree;
    };



    function getCurrentRotation(el){
        var st = window.getComputedStyle(el, null);
        var tm = st.getPropertyValue("-webkit-transform") ||
                st.getPropertyValue("-moz-transform") ||
                st.getPropertyValue("-ms-transform") ||
                st.getPropertyValue("-o-transform") ||
                st.getPropertyValue("transform") ||
                "none";
        if (tm != "none") {
        var values = tm.split('(')[1].split(')')[0].split(',');
        var angle = Math.round(Math.atan2(values[1],values[0]) * (180/Math.PI));
        return (angle < 0 ? angle + 360 : angle); //adding 360 degrees here when angle < 0 is equivalent to adding (2 * Math.PI) radians before
        }
        return 0;
    }
    r = 0;
    var globTime = 0;
    setInterval(() => {
        if(!detectTap){
            if(detectPlay){
                r = r + 1;

                if(r > 360){
                    r = 0;
                }

                globTime = myAudio.currentTime;

                $("#round-play1")[0].style.transform = `rotate(${r}deg)`;
            }
        }
    }, 10);

我需要说的是这段代码,一旦鼠标移动静止,然后暂停其他继续播放:

$(document).on('touchmove click', '#round-play1', function(e){
        var x = e.touches[0].clientX;
        var y = e.touches[0].clientY;
        var deg = angXY(e);
        
        var t2 = globTime;
        var t3 = (myAudio.duration / ((myAudio.duration / (deg - startDeg)) * 100));
        currentDragTime = t2 + t3;

        myAudio.currentTime = currentDragTime;
        myAudio.play();
        
        $("#round-play1").css('-moz-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-webkit-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-o-transform', 'rotate(' + deg + 'deg)');
        $("#round-play1").css('-ms-transform', 'rotate(' + deg + 'deg)');
        
        
    });
javascript html5-audio
© www.soinside.com 2019 - 2024. All rights reserved.