Hej. Mam nadzwyczaj dziwny problem, w którym nie mam pojęcia jaka jest jego przyczyna. Otóż jakiś czas temu napisałem webowy odtawarzacz mp3, w którym umieściłem pokrętło do regulacji głośności odtawarzanego w nim dźwięku. Regulator bardzo ładnie śmiga, zarówno w wersji na komputery (wykorzystując do tego eventy JS mousedown, mousemove oraz mouseup) jak i telefony (wykorzystując do tego eventy JS touchstart, touchmove oraz touchend). Dodałem go do swojego portfolio, dlatego możecie go sprawdzić w akcji w wersji Live pod poniższym adresem:
http://www.audiowebplayer.wlasocha.pl/
Jednak problem pojawił się gdy odtawrzacz w nowej wersji umieściłem na swoim blogu prezentując własne ulubione kawałki. Podkreślam, że kod aplikacji jest identyczny jak na stronie powyżej, stąd nie mam pojęcia gdzie szukać problemu - zresztą zobaczcie sami:
http://wlasocha.pl/o-mnie/
Po dodaniu odtwarzacza na swojej stronie "o mnie" pokrętło głośności nie reaguje na ruch kursora myszy i wyświetla cały czas wartość 50%, mimo, że pozycja dymku wyświetlająca tą informację podąża na wskaźnikiem. Żeby było ciekawiej, jeszcze inne cyrki dzieją się po otwarciu strony "o mnie" na smartfonie, gdy chcę ściszyć lub zgłośnić dźwięk. Otóż w tym przypadku regulacja dźwięku działa, ale nie wyświetla się dymek. Być może wina leży od mojej strony z blogiem (np. jej wadliwy kod html/css zakłóca prawidłowe działanie regulatora ale niekoniecznie jestem tego pewien). Dodam, że na smarfonach musiałem obsłużyć eventy touch, gdyż są one wyposażone w ekrany dotykowe. Proszę o wskzówki gdzie szukać rozwiązania problemu i zadawać pytania o szczegóły, od których może zależeć przyczyna takiego zjawiska.
Poniżej podaję fragmentu kodu JavaScript tego pokrętła do regulacji głośności - może jest niedopracowany i dlatego jest podatny na niesprzyjające warunki w których został dołączony do strony.
var isMouseDown = false;
var volumeControlAngle;
['mousedown', 'touchstart'].forEach(function(e) {
audioWebPlayerVolumeKnobIconElement.addEventListener(e, function(e) {
e.preventDefault();
isMouseDown = true;
audioWebPlayerTooltipElement.style.display = 'block';
}, false);
});
['mouseup', 'touchend'].forEach(function(e) {
audioWebPlayerVolumeKnobIconElement.addEventListener(e, function(e) {
e.preventDefault();
isMouseDown = false;
audioWebPlayerTooltipElement.style.display = 'none';
}, false);
});
['mouseup', 'touchend'].forEach(function(e) {
document.body.addEventListener(e, function(e) {
isMouseDown = false;
audioWebPlayerTooltipElement.style.display = 'none';
}, true);
});
document.addEventListener('mousemove', function(e) {
if (isMouseDown === true) {
audioWebPlayerVolumeKnobIconChange(e.clientX, e.clientY);
}
}, false);
document.addEventListener('touchmove', function(e) {
if (isMouseDown === true) {
let evt = (typeof e.originalEvent === 'undefined') ? e : e.originalEvent;
let touch = evt.touches[0] || evt.changedTouches[0];
audioWebPlayerVolumeKnobIconChange(touch.pageX, touch.pageY);
}
}, false);
function audioWebPlayerVolumeKnobIconChange(pointerPositionX, pointerPositionY) {
volumeControlAngle = (Math.atan2((window.scrollY + audioWebPlayerVolumeKnobIconElement.getBoundingClientRect().top + audioWebPlayerVolumeKnobIconElement.getBoundingClientRect().height / 2) - pointerPositionY, (window.scrollX + audioWebPlayerVolumeKnobIconElement.getBoundingClientRect().left + audioWebPlayerVolumeKnobIconElement.getBoundingClientRect().width / 2) - pointerPositionX) * 180 / Math.PI);
if (volumeControlAngle >= -45 || volumeControlAngle <= -135) {
audioWebPlayerVolumeKnobIconElement.firstChild.style.transform = 'rotate(' + (volumeControlAngle - 90).toString() + 'deg)';
if (volumeControlAngle >= -45) {
audioElement.volume = (volumeControlAngle + 45) / 270;
audioWebPlayerTooltipElement.innerHTML = 'Głośność: ' + Math.floor((volumeControlAngle + 45) / 270 * 100).toString() + '% ';
audioWebPlayerVolumeKnobIconElement.setAttribute('aria-valuenow', Math.floor((volumeControlAngle + 45) / 270 * 100));
} else if (volumeControlAngle <= -135) {
audioElement.volume = (volumeControlAngle + 405) / 270;
audioWebPlayerTooltipElement.innerHTML = 'Głośność: ' + Math.ceil((volumeControlAngle + 405) / 270 * 100).toString() + '%';
audioWebPlayerVolumeKnobIconElement.setAttribute('aria-valuenow', Math.ceil((volumeControlAngle + 405) / 270 * 100));
}
audioWebPlayerTooltipElement.style.left = (pointerPositionX - audioWebPlayerContainer.getBoundingClientRect().left + 10).toString() + 'px';
audioWebPlayerTooltipElement.style.top = (pointerPositionY - audioWebPlayerContainer.getBoundingClientRect().top + 15).toString() + 'px';
}
}
PS. Ten odtwarzacz jest dostępny dla każdego za darmo, więc Wy również przyczynicie się do jego poprawy w działaniu na stronach innych użytkowników. Z góry dzięki.