Условия воспроизведения звука

Библиотека Noty позволяет создавать уведомления с различными эффектами, включая воспроизведение звуков. Управление звуковыми оповещениями выполняется через свойства конфигурации уведомления и интеграцию с HTML5 Audio API.

Настройка аудио для уведомлений

Для воспроизведения звука при показе уведомления используется параметр callbacks.onShow или callbacks.onClose. Прямой встроенной опции sound в Noty нет, поэтому звук подключается через создание объекта Audio:

let audio = new Audio('sound/notification.mp3');
new Noty({
    text: 'Сообщение успешно отправлено',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onShow: function() {
            audio.play().catch(error => console.log('Ошибка воспроизведения звука:', error));
        }
    }
}).show();

Ключевые моменты:

  • Метод play() возвращает Promise, поэтому рекомендуется использовать catch для обработки ошибок.
  • Файл звука должен быть доступен по указанному пути, либо загружен через сервер.
  • В современных браузерах автоматическое воспроизведение звука может блокироваться, если пользователь не совершил взаимодействие с сайтом (клик или скролл).

Использование разных звуков для типов уведомлений

Для различных типов уведомлений (success, error, warning, info) можно назначать отдельные звуковые файлы. Это делается через условную проверку type:

function getSound(type) {
    switch(type) {
        case 'success': return 'sound/success.mp3';
        case 'error': return 'sound/error.mp3';
        case 'warning': return 'sound/warning.mp3';
        case 'info': return 'sound/info.mp3';
        default: return 'sound/notification.mp3';
    }
}

let type = 'error';
let audio = new Audio(getSound(type));

new Noty({
    text: 'Произошла ошибка',
    type: type,
    timeout: 4000,
    callbacks: {
        onShow: function() {
            audio.play().catch(err => console.log(err));
        }
    }
}).show();

Повторное воспроизведение и контроль громкости

Объект Audio позволяет управлять громкостью и повтором. Это удобно для уведомлений с циклическим звуком:

let audio = new Audio('sound/alert.mp3');
audio.volume = 0.5; // значение от 0 до 1
audio.loop = true;  // включение повторного воспроизведения

new Noty({
    text: 'Требуется внимание!',
    type: 'warning',
    callbacks: {
        onShow: () => audio.play(),
        onClose: () => { audio.pause(); audio.currentTime = 0; }
    }
}).show();

Здесь:

  • volume задаёт уровень громкости уведомления.
  • loop включает повтор звука до закрытия уведомления.
  • При закрытии уведомления рекомендуется останавливать звук и сбрасывать время воспроизведения (currentTime = 0), чтобы следующий вызов начинался с начала.

Ограничения браузеров

Современные браузеры блокируют автозапуск звука на страницах без действий пользователя. Чтобы избежать проблем:

  • Воспроизведение рекомендуется привязать к событию клика или скролла.
  • Для мобильных устройств обязательна предварительная инициализация Audio после взаимодействия пользователя.
  • В Chrome и Safari необходимо предусматривать обработку Promise метода play(), так как блокировка может вызвать исключение.

Синхронизация нескольких уведомлений

Если на странице появляются несколько уведомлений одновременно, звуки могут наслаиваться. Оптимальная практика:

  • Создавать отдельный объект Audio для каждого уведомления.
  • Использовать очередь воспроизведения или проверку, воспроизводится ли уже звук, чтобы избежать наложений.

Пример с очередью:

let playing = false;

function playNotificationSound(src) {
    if (playing) return;
    let audio = new Audio(src);
    playing = true;
    audio.play().finally(() => { playing = false; });
}

Интеграция с глобальной настройкой уведомлений

Можно создать обёртку для Noty, которая автоматически добавляет воспроизведение звука для всех уведомлений:

function createNotyWithSound(options) {
    let audioSrc = options.sound || 'sound/notification.mp3';
    let audio = new Audio(audioSrc);

    options.callbacks = options.callbacks || {};
    let userOnShow = options.callbacks.onShow;
    options.callbacks.onS how = function() {
        audio.play().catch(err => console.log(err));
        if (userOnShow) userOnShow();
    };

    return new Noty(options).show();
}

// Использование:
createNotyWithSound({
    text: 'Данные успешно сохранены',
    type: 'success',
    timeout: 3000
});

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

Оглавление