Ion.Sound — плагин для воспроизведения звуков. Создание и особенности

Привет, последнее время мне частенько приходится обрабатывать всякие события на сайтах, будь то сообщения в чатах, оповещения, напоминания, входящая почта и т.д. Этих событий становится все больше и больше и все они хотят как то привлечь внимание пользователя к себе. Я изощряюсь в разных видах анимации, элементы прыгают, мигают, крутятся и т.д. и т.п. В какой-то момент я понял, что все эти приемы бесполезны, если пользователь, например, отвернулся от экрана или вовсе перешел на соседнюю вкладку в браузере. Решение пришло быстро — звуки. Но как это сделать? Немножко погуглив я не нашел каких либо простых и удобных решений этой задачи. Зато нашел кучи аудио/видео плееров всевозможных видов. Вот я и решил написать собственный плагин для воспроизведения звуков у событий.



Как оказалось в html5 уже есть подходящий API, и это элемент audio. Его кроссбраузерная поддержка оказалась очень даже неплохой. В JavaScript этот элемент доступен через конструктор Audio и обладает множеством настроек. В общем вооружимся описанием и начнем.

Описывать тонкости создания jQuery-плагина я не буду, на Хабре есть полно статей на эту тему, опишу сразу нужные части:

Создание звуков

Несмотря на то что элемент аудио поддерживает очень много браузеров, с поддержкой кодеков все обстоит не так уж радужно. Mp3 понимают не все, по этому каждый звук, что мы захотим использовать нужно будет дополнительно конвертировать в Ogg. Это можно сделать очень просто прямо онлайн. Например тут или тут.

Подключение звуков к нашему сценарию:

Вначале объявим нужные нам переменные:

var settings = {},
    soundsNum,
    canMp3,
    url,
    i,

    sounds = {},
    playing = false;

Создадим функцию, принимающую аргументом имя звукового файла

var createSound = function(name){
    // В объект sounds записываем создаваемые экземпляры Audio
    sounds[name] = new Audio();
    
    // Переменная canMp3 - определяет может ли браузер проигрывать mp3,
    // для этой проверки есть специальный метод canPlayType *.
    // Метод при желании может провести проверку поддержки любого формата,
    // ну а мы проверим поддержку mp3
    canMp3 = sounds[name].canPlayType("audio/mp3");

    // У метода canPlayType есть интересная особенность, он не определяет наличие кодека
    // со стопроцентной точностью, вместо этого он возвращает строку "probably", "maybe" или "".
    // В общем верим ему на слово и выбираем mp3 или ogg
    if(canMp3 === "probably" || canMp3 === "maybe") {
        url = settings.path + name + ".mp3";
    } else {
        url = settings.path + name + ".ogg";
    }

    $(sounds[name]).prop("src", url);          // устанавливаем ссылку на звуковой файл
    sounds[name].load();                       // для старых браузеров потребуется теперь загрузить этот звук
    sounds[name].volume = settings.volume;     // устанавливаем громкость
};

* Подробнее о методе canPlayType

Проигрывание звуков:

Создаем еще одну функцию, принимающую аргументом имя звукового файла

var playSound = function(name){
    var $sound = sounds[name],
        playingInt;

    // проверяем есть ли у нас что проигрывать
    if(typeof $sound === "object" && $sound !== null) {

        // Вначале о переменной settings.multiPlay. Эта переменная была задумана чтобы ограничить возможность
        // бесконтрольного воспроизведения звуков. Если установить ей значение false, то плагин будет
        // проигрывать звуки строго по одному за раз, иначе в некоторых ситуациях можно получить жуткую какофонию

        // Проверяем играет ли звук
        if(!settings.multiPlay && !playing) {
            // Запускаем воспроизведение методом play
            $sound.play();
            playing = true;

            // И запускаем интервал, ждущий окончания воспроизведения
            playingInt = setInterval(function(){
                // Чтобы понять, когда кончилось воспроизведение, существует специальная переменная ended,
                // принимает значение true, если воспроизведение файла закончилось
                if($sound.ended) {
                    clearInterval(playingInt);
                    playing = false;
                }
            }, 250);
        } else if(settings.multiPlay) {
            // Если же multiPlay включен то просто играем звук
            if($sound.ended) {
                $sound.play();
            } else {
                // Если звук еще проигрывается, пытаемся отмотать его назад, устанавливая значение 0
                // переменной currentTime, но как выяснилось, это переменная не всегда доступна,
                // например в iOS браузерах, так что нужно проверить возможность
                try {
                    $sound.currentTime = 0;
                } catch (e) {}
                $sound.play();
            }
        }

    }
};

Инициализация плагина и запуск воспроизведения:

// Создаем функцию, запускающую наш плагин
$.pluginName = function(options){

    // загружаем и запоминаем настройки
    settings = $.extend({
        // массив имен звуковых фалов
        sounds: [
            "sound_name_1",
            "sound_name_2"
        ],

        // путь до папки со звуками
        path: "sounds/",

        // возможность воспроизведения нескольких звуков за раз
        multiPlay: true,

        // громкость в формате 0.0 - 1.0
        volume: "0.5"
    }, options);

    // определяем сколько всего звуков нужно загрузить
    soundsNum = settings.sounds.length;

    // узнаем поддерживается ли вообще конструктор Audio
    if(typeof Audio === "function" || typeof Audio === "object") {

        // и подключаем наши звуки
        for(i = 0; i < soundsNum; i += 1){
            createSound(settings.sounds[i]);
        }
    }

    // создаем метод воспроизводящий звуки по их именам
    $.pluginName.play = function(name) {
        playSound(name);
    };
};

Вот собственно и все. Конечно этот плагин можно расширять и дальше, например предусмотреть возможность задавать индивидуальную громкость для каждого из звуков и т.д. Но в целом он отвечает своему назначению — воспроизведению коротких звуков для иллюстрации всяческих событий.

Послесловие

Звуки — это очень мощный инструмент привлечения внимания пользователя. Но этот инструмент так же очень опасен, так как люди не любят лишние звуки или слишком громкие звуки. И я советую вам очень осторожно подходить к подключению звуковых эффектов для ваших веб-сайтов. Не нужно привязывать звуки к каждому клику, это лишнее. Желательно только к очень важным и нужным событиям. И старайтесь делать громкость поменьше, вы ведь не хотите чтобы пользователь подскочил в кресле и расплескал на себя чай? :-)

Информация о плагине

Полностью готовый плагин можно посмотреть здесь:

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends:

• Massacres That Matter - Part 1 - 'Responsibility To Protect' In Egypt, Libya And Syria


• Massacres That Matter - Part 2 - The Media Response On Egypt, Libya And Syria


• National demonstration: No attack on Syria - Saturday 31 August, 12 noon, Temple Place, London, UK