Параметр sounds

В библиотеке Noty параметр sounds отвечает за интеграцию звуковых уведомлений с визуальными нотификациями. Он позволяет проигрывать аудиофайлы при появлении, обновлении или закрытии уведомления, что особенно полезно для приложений с большим количеством интерактивных событий или для оповещения пользователей о критических событиях.

Формат и структура параметра

sounds представляет собой объект, который может содержать следующие ключи:

  • sources — массив строк с путями к аудиофайлам в формате MP3, WAV или OGG. Библиотека автоматически выбирает первый поддерживаемый браузером формат.
  • volume — числовое значение от 0 до 1, определяющее громкость воспроизведения. Значение по умолчанию равно 1.
  • autoplay — логическое значение (true или false). Если true, звук проигрывается автоматически при появлении уведомления.
  • loop — логическое значение, указывающее, будет ли звук повторяться до закрытия уведомления.

Пример базового использования:

new Noty({
    text: 'Сообщение с звуком',
    type: 'alert',
    sounds: {
        sources: ['sounds/alert.mp3', 'sounds/alert.ogg'],
        volume: 0.7,
        autoplay: true
    }
}).show();

В этом примере уведомление будет сопровождаться звуковым сигналом с громкостью 70%, автоматически воспроизводимым при отображении.

Поддержка форматов и кроссбраузерность

Noty использует стандартный HTML5 <audio> элемент для воспроизведения. Это означает, что:

  • В Chrome, Firefox, Edge, Safari поддерживаются MP3, OGG и WAV (в зависимости от браузера).
  • Необходимо предоставлять несколько форматов в массиве sources для обеспечения кроссбраузерной совместимости.
  • Для мобильных устройств важно проверять политику автозапуска звука, так как многие браузеры блокируют автоплей без взаимодействия пользователя.

Управление громкостью и цикличностью

Параметр volume задается числом от 0 (полная тишина) до 1 (максимальная громкость). Если необходимо снизить громкость уведомления, достаточно указать значение 0.3–0.5 для комфортного прослушивания.

sounds: {
    sources: ['sounds/notification.wav'],
    volume: 0.5,
    autoplay: true,
    loop: false
}

Ключ loop позволяет зациклить звук, что удобно для длительных или критических уведомлений. Например, при loop: true звук будет воспроизводиться до момента, когда пользователь закроет нотификацию вручную:

sounds: {
    sources: ['sounds/alert_loop.mp3'],
    volume: 1,
    autoplay: true,
    loop: true
}

Взаимодействие с событиями Noty

Библиотека Noty предоставляет события жизненного цикла уведомления: onShow, onClose, onClick. Параметр sounds может использоваться в комбинации с этими событиями для гибкого управления:

let n = new Noty({
    text: 'Кликни, чтобы остановить звук',
    sounds: {
        sources: ['sounds/alert.mp3'],
        autoplay: true,
        loop: true
    },
    callbacks: {
        onClick: function() {
            n.sounds.pause(); // остановка воспроизведения при клике
        }
    }
}).show();

Советы по организации аудиофайлов

  • Использовать компактные файлы формата MP3 или OGG для снижения нагрузки на загрузку страницы.
  • Хранить аудиофайлы в отдельной папке /sounds для удобства и структурированности проекта.
  • Проверять длину звуковых эффектов: короткие клики или сигналы лучше воспринимаются пользователем.

Ограничения и особенности

  • Автоплей на мобильных устройствах часто ограничен политикой браузера, поэтому иногда звук не проигрывается без взаимодействия пользователя.
  • Если массив sources пуст или формат не поддерживается браузером, звук не проигрывается, но уведомление отображается корректно.
  • Библиотека не предоставляет встроенной функциональности микширования нескольких звуков одновременно; для этого необходимо использовать сторонние аудиобиблиотеки совместно с Noty.

Параметр sounds в Noty — мощный инструмент для повышения интерактивности уведомлений, который позволяет сочетать визуальные сигналы с аудиосопровождением и обеспечивать полноценный пользовательский опыт.

Оглавление