Некорректно срабатывает событие mouseover

Вопрос-ответ JavaScript
1

На сайте некорректно срабатывает событие mouseover такого вида https://jsfiddle.net/LenaR/dwe74yv6/1/
(при наведении курсора на ссылку - должен проигрываться звуковой файл)
Оно работает только тогда когда открыта консоль Инструментов разработчика (Ctrl+Shift+I). Если же консоль закрыть - звук не воспроизводиться. Интересно, что на событие клика - такого бага нет. В JSFiddle если открывать консоль - не помогает. С чем это связано именно это событие? Первая загрузка страницы так срабатывает именно с этим событием? И возможно ли заменить его как то?

2

По коду все логично и последовательно. Нужно дебажить.

Формат для дебага кода

  1. Убедись что код для звука выполняется (алерт)
  2. Убедись что нет exception-ов (я обернул все что может кинуть эксепшен в try-catch)

https://jsfiddle.net/z19h0v4k/

Дополнительно:

Посмотри какие разрешения для сайта (может запрещено проигрывание музыки)
Посмотри не висит ли у тебя непроведенного обновления браузера

3

алерт там работает.

Нашла еще такую особенность (может будут мысли): когда добавить еще один такой же обработчик звука

      var soundSecond = function() {
        var audio = new Audio();
        audio.src = 'sounds/тут файл.mp3';
        audio.autoplay = true;
        }
      var soundbtn = document.querySelector('.sound-second');
        if (soundbtn.addEventListener) {
          soundbtn.addEventListener('mouseover', soundSecond, false);
      }

и повесить его на какой-либо другой div в разметке (или тег, неважно) - то если навести курсор на этот второй элемент - тогда работает. А потом если навести на первый элемент (на эту ссылку, там где раньше не работало) - то тоже работает.

4

Возможно вот это?


TLDR: браузеры изменили privacy policy и у аудио по умолчанию выключен autoplay.
1 лайк
5

здесь не понимаю, что можно добавить в эксепшены? Я попробовала вставить твой код из примера в свой файл - не помогло. Или там надо в try, catch что-то конкретно прописывать? если можно - подробнее, что именно

6

нет, не запрещено (у меня в настройках)

то есть - если в настройках включено автообновление браузера - то оно может так влиять на работу воспроизведения звука? (что такой косяк)

7

Нужно вставить мой код и посмотреть есть ли эксепшены в консоли.

Не это. Я имел в виду висит ли у тебя иконка о том что нужно перезапустить браузер для применения обновления. Такая:

https://www.howtogeek.com/wp-content/uploads/2017/05/csu_2.png

Мысль появилась. Может дело в том как часто срабатывает обработчик mouseover + нюансы кеширования файлов. А срабатывает он очень часто: на любое шевеление курсора над элементом. Попробуй использовать mouseenter. Он срабатывает только раз когда курсор наводится над элементом.

8

если звуковой файл из папки проекта в коде - то эксепшинов нет, вообще ничего в консоль не падает (если алерт убрать)

нет, ничего такого нет.

точно такое же поведение как и с mouseover, что только после того как навести курсор на второй элемент со звуком, то звук воспроизводится, а если после этого навести на первый элемент (этот линк) - то тоже работает. Если наводить хоть 10 раз сначала на первый элемент (этот линк) - то не работает. Причем такой баг что с mouseenter что с mouseover (в Хроме и в Опере). А в Мозилле так: что если навести курсор на этот линк - то сразу вылетает иконка в адресной строке “блокировать аудио и видео”. А если сначала на вести курсор на второй элемент - то звук срабатывает.
Например на этом сайте http://dostup.mvk.if.ua/ если гавести курсор на пункты меню - то звук нигде не срабатывает, а если в основной секции наводить на ссылки - тогда все работает корректно, а потом если на меню наводить - также все работает (но это не то над чем я работаю, и скрипты оттуда не переносила себе; нашла что-то для примера). Даже не знаю в чем искать решение. Уже ссылки заменила на div и тот же результат.

9

Как и написал выше @kprudnikov изменились разрешения для автовоспроизведения аудио. Для того чтоб не раздражать пользователей. Особенно если это какая-то другая вкладка. Более того, должен произойти user action. А поводить курсором по странице — это не user action

2 лайка
10

действительно… “User has interacted with the domain (click, tap, etc.).” - только после события клика или нажатия по кнопке - срабатывает уже событие mouseover, поэтому те элементы что внизу страницы работали, потому что чтобы добраться к ним - надо было проскроллить страницу…
Спасибо!

1 лайк