Очень нужна ваша помощь, потому что вообще не понимаю, в чём может быть дело. Пытаюсь для своих прикладных задач доработать плеер из вот этой штуки:
ретро аудиоплеер. Хочу, чтобы игла при проигрывании музыки двигалась перетаскиванием не только с компа, как было в оригинале. Добавила в функции, отвечающие за движение, как мне казалось, логичные прослушки событий touchstart-touchmove-touchend. В браузере safari на iOS все заработало без проблем. В хроме на android, когда я нажимаю пальцем на иглу и пытаюсь её перетащить, весь интерфейс на экране тупо ломается: музыка сбрасывается, игла, конечно, никуда не движется, и вообще ни одна кнопка и ссылка на экране больше не нажимается. Помогает только перезагрузка страницы. Такое чувство, что после вызова startDragging никакие события touch больше не ловятся, и потому все зависает. В чем может быть проблема? Ведь в safari все работает четко, как мне нужно. Помогите, пожалуйста(
Turntable.prototype._initEvents = function() {
// Dragging functionality based on http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
var self = this,
startDeg = -1, currentDeg = 0, rad2deg = 180/Math.PI;
// Mousedown event.
this.startDragging = function() {
// Start dragging.
self.isDragging = true;
// Current rotation.
currentDeg = self.armRotation ? self.armRotation : currentDeg;
// If playing then stop playing and stop the animation of the tonearm element.
if( self.source ) {
self.stop();
}
document.addEventListener('mousemove', self.dragging);
document.addEventListener('touchmove', self.dragging);
document.addEventListener('mouseup', self.stopDragging);
document.addEventListener('touchcancel', self.stopDragging);
document.addEventListener('touchend', self.stopDragging);
};
// Mousemove event.
this.dragging = function(ev) {
var deg = Math.atan2(self.armCenterPoint.y - ev.pageY, self.armCenterPoint.x - ev.pageX) * rad2deg;
// Save the starting position of the drag.
if( !startDeg || startDeg == -1 ){
startDeg = deg;
}
// Calculating the current rotation.
var tmp = (deg-startDeg) + self.armRotation;
// Making sure the current rotation stays between 0 and this.angleInterval.max.
if( tmp < 0 ){
tmp = 0;
}
else if( tmp > self.angleInterval.max ){
tmp = self.angleInterval.max;
}
currentDeg = tmp;
// update the tonearm rotation value
dynamics.css(self.ui.arm, { rotateZ : currentDeg });
};
// Mouseup event.
this.stopDragging = function() {
self.isDragging = false;
document.removeEventListener('mousemove', self.dragging);
document.removeEventListener('touchmove', self.dragging);
document.removeEventListener('mouseup', self.stopDragging);
document.removeEventListener('touchcancel', self.stopDragging);
document.removeEventListener('touchend', self.stopDragging);
// Saving the current rotation.
self.armRotation = currentDeg;
// Marking the starting degree as invalid.
startDeg = -1;
// If isPlatterRotating = true then keep playing.
if( self.isPlatterRotating ) {
self._resume();
}
};
// Start dragging the tonearm elem.
this.ui.arm.addEventListener('mousedown', this.startDragging);
this.ui.arm.addEventListener('touchstart', this.startDragging);
Средний
Простой