Звуковые эффекты при клике или наведении

Данный скрипт весит всего 1.5 кб и позволяет легко добавлять звуки взаимодействия с элементами.

Примеры:
Установка:

Подключаем скрипт loudlinks.min.js в конце страницы.

Применение:

На нужный нам тег добавляем класс loud-link-hover для проигрывания звука при наведении и loud-link-click при клике

Далее в этот тег добавляем дата атрибут

Где sound это название mp3 и/или ogg файла

Звуковые файлы sound.mp3 и sound.ogg находятся в корневой папке folder

Автор скрипта loudlinks.rocks

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Руслан:

    при наведение сразу не срабативат пока не кликнеш потом работает вот ошибка Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

    Ответить
    • Alexander:

      Точно не уверен, но скорее всего это браузеры ставят ограничения.
      У меня в хроме и мозиле все норм (правда не помню, делал ли я какие доп. разрешения для него).
      Если мы запускаем музыку по ховеру, то можно открыть страницу ночью и без вашего клика оно заорет.
      Уж не знаю, на сколько это нужно, вы можете кликнуть в никуда и оно все равно заорет, но гугл орал по этому поводу вроде, что мол нехорошо запускаться медийкам автоматом.

      Ответить
  • Вова:

    Здравствуйте!
    Прошу привести пример когда сработает if ( audioSrc.indexOf('{{type}}') > 0 ):
    точнее сказать каким будет audioSrc при этом?
    Не могу понять.

    Ответить
  • Виктор:

    Скрипт смешного "позабавимся 🙂 " работает по наведению только после любого клика. Покажите пожалуйста где этот первый клик обрабатывается в коде. Все обыскал...

    Ответить
    • Alexander:

      Это скорее всего браузер блокирует. У меня и в хроме и лисе нормально ховер работает.
      Поищите в инете как обойти блокировку "воспроизведение треков без ведома юзера"

      Ответить
      • Виктор:

        Это хорошо, значит скрипт не при чем :). Правда, кроме Edge у меня все остальные 4 браузера работают только с первым кликом. В принципе, пустяк, можно разок и кликнуть.

        Ответить
      • Виктор:

        Вопрос напрямую к статье не относится, лишь косвенно, но чувствую что автор в теме.
        Вопрос: можно ли задать окончание проигрывания кусочка в файле, начало можно, это как я понял "currentTime"? Есть ли такой параметр для конца проигрывания(не всего файла, а кусочка)?

        Ответить
        • Alexander:

          А для чего такие сложности?
          Данный скрипт просто создает аудио тег при нажатии или ховере и запускает его.
          currentTime нужна для стопа

          Ответить
          • Виктор:

            Да это я понимаю...Хороший сайт у Вас, приятный.

            Ответить
  • Кто-то:

    Зделайте пожалуйста пример

    Ответить
  • Джесси:

    Саша, приветик! всё работает, но выводит такую ошибку в консоль:

    Uncaught (in promise) DOMException

    У тебя кстати тоже. Это неопасно ?

    Юзаю Хром, последняя версия

    Ответить
    • Alexander:

      в понедельник 🙂
      сегодня ну никак ....

      Ответить
    • Alexander:

      Непойманные обещания переводится ваша ошибка 🙂
      А как говорил мой дед - Работает - не трогай!
      А как мой прадед - не опасно 🙂

      Ответить
      • Джесси:

        Хаха)))

        Ладно ладно))

        Кстати, это происходит потому что как бы что-то, в общем хроме авто-воспроизведение треков без ведома юзера нечто такое что является ошибкой)) Данное явление при ховер, при клике ничего. Ну в в принципе да)) Работает - не трогай)) Это верно))

        Спасибо за прекрасный скрипт!

        Ответить
  • Ирина:

    Здравствуйте у меня не получается.Вот код:

    <div data-sound="/folder/sound" class="loud-link-hover">Наведите</div>
    Дело в том что я хочу вставить свой звук,например мелодию.

    Ответить
    • Alexander:

      Тут нужно смотреть на то как вы подключили скрипт и загрузили на сайт звуковые файлы (в какую папку).
      Дайте ссылку на сайт, постараюсь помочь

      Ответить
  • Света:

    Позабавилась ;-(
    Навтыкала на сайт звуков, что жуть какая-то стала...
    Пришлось удалять ;-(

    Ответить
    • Alexander:

      С такими вещами нужно аккуратнее )

      Ответить