...

суббота, 21 сентября 2013 г.

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:



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

Отправить комментарий