我有这段代码,当你在乙烯基上向上移动鼠标时,乙烯基可以倒带,但我的问题是当鼠标移动静止时我需要暂停音频。当我的鼠标在静止位置移动时,当我需要暂停时,音频仍在播放:
这里是代码:
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)');
});