Привет, последнее время мне частенько приходится обрабатывать всякие события на сайтах, будь то сообщения в чатах, оповещения, напоминания, входящая почта и т.д. Этих событий становится все больше и больше и все они хотят как то привлечь внимание пользователя к себе. Я изощряюсь в разных видах анимации, элементы прыгают, мигают, крутятся и т.д. и т.п. В какой-то момент я понял, что все эти приемы бесполезны, если пользователь, например, отвернулся от экрана или вовсе перешел на соседнюю вкладку в браузере. Решение пришло быстро — звуки. Но как это сделать? Немножко погуглив я не нашел каких либо простых и удобных решений этой задачи. Зато нашел кучи аудио/видео плееров всевозможных видов. Вот я и решил написать собственный плагин для воспроизведения звуков у событий.
Как оказалось в 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);
};
};
Вот собственно и все. Конечно этот плагин можно расширять и дальше, например предусмотреть возможность задавать индивидуальную громкость для каждого из звуков и т.д. Но в целом он отвечает своему назначению — воспроизведению коротких звуков для иллюстрации всяческих событий.
Послесловие
Звуки — это очень мощный инструмент привлечения внимания пользователя. Но этот инструмент так же очень опасен, так как люди не любят лишние звуки или слишком громкие звуки. И я советую вам очень осторожно подходить к подключению звуковых эффектов для ваших веб-сайтов. Не нужно привязывать звуки к каждому клику, это лишнее. Желательно только к очень важным и нужным событиям. И старайтесь делать громкость поменьше, вы ведь не хотите чтобы пользователь подскочил в кресле и расплескал на себя чай? :-)
Информация о плагине
Полностью готовый плагин можно посмотреть здесь:
