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