Sounds test или оркестр на сайте

Делая обзор 50 лучших JavaScript плагинов и библиотек из 2016 года, на практике посчитал необходимым проверить все эти фишки. Ну, и заодно «озвучить» этот сайт на WordPress. Вот здесь небольшой пример и отчет о том, как это делается.

Воспользуемся

Loud Links

Loud Links представляет собой простую библиотека JavaScript для добавления звуков на ваш сайт. Аудиоэффекты для элементов HTML5 используют MP3 или OGG файлы.

Пройдем по ссылке Loud Links на GitHub и заберем эту небольшую библиотечку. Файл loudlinks.min.js весит всего 2К, так что его загрузка не окажет значительного влияния на время проявления странички в браузере, даже если его подключить в файл footer.php активной темы, который используется при формировании любой страницы WP. Ниже фрагмента кода footer.php, где я это сделал.

Как видно из текста сам файл loudlinks.min.js я поместил в папку js своей темы.

Теперь в корне своего сайта создадим ветку каталогов sounds с папками mp3 и ogg, куда будем записывать звуковые файлы соответствующих форматов. Имена папок фиксированные, т.е. менять их нельзя, это прописано в коде используемой библиотечки.

Теперь побеспокоимся о звуках. Их можно записать самому, а на скорую руку найдем готовые рингтоны и попользуем для наглядности.

После того как найдёте подходящую мелодию, скачайте её и поместите в папку sounds/mp3 на сервере. В моем случае это файл digital_bell_sms.mp3.

Все подготовительные работы сделаны — пора наслаждаться результатами трудов! Создадим прямо в этой статье две ссылки:

Наведи сюда указатель

Нажми сюда

Ссылка класса loud-link-hover должна запеть при наведении на неё указателя «мыши», ссылка класса loud-link-click — при клике.

Вот что у меня получилось

Наведи сюда указатель

Нажми сюда

Но интересная штука получается — работает «через раз», вроде все правильно, но неустойчиво. Что бы это значило?