如何通过上下拖动乙烯基/物体来播放当前音频时间

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

我有一个连续播放的音频。该音频由乙烯基对象表示,用户可以在其中向上或向下拖动乙烯基,但是当我向上或向下拖动乙烯基时,我如何确定音频的当前时间取决于乙烯基对象的高度和宽度甚至圆周圆形乙烯基物体。

在 SO 的帮助下,我已经设法允许用户在乙烯基对象连续播放时上下拖动乙烯基。

下面是播放 Vinyl 的 Dj Control Mixer 的 UI。

这里是代码,我猜代码需要在触摸移动事件中添加代码集成和修改乙烯基被向上或向下拖动时的当前时间。

            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;
        myAudio.play();
        var deg = angXY(e);

        currentDragTime = (deg - startDeg) / 10;
        if(A_y > y){

            console.log("UP")
            if(deg < 0) //if the vinyl has been rewinded before the start of the audio
            {
                myAudio.currentTime = myAudio.duration + currentDragTime;
            }else{
                myAudio.currentTime = currentDragTime;
            }

        }else{
            console.log("DOWN")
        }

        $("#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)');

        A_y = y;

    });

    $(document).on('touchend click', '#round-play1', function(e){
        var x = e.changedTouches[0].pageX;
        var y = e.changedTouches[0].pageY;
        detectTap = false;
        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) + 90;

        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 rpm;
    setInterval(() => {
        if(!detectTap){
            if(detectPlay){
                myAudio.play();
                r = r + 1;
                if(r >= 360){
                    console.log("360");
                    r = 0;
                }


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

更新

我在允许用户拖动乙烯基并在其当前拖动状态下播放方面进展甚微,这是我到目前为止所拥有的,当我改变当前状态时向上或向下拖动乙烯基时仍在尝试让我的头转起来时间:

如果这是正确的方法,需要我更改的代码的一些建议吗?

javascript html5-audio
© www.soinside.com 2019 - 2024. All rights reserved.