Плагин для звукового сопровождения событий.

Плагин Ion.Sound.

Сегодня рассмотрим JQuery плагин, позволяющий добавить звуковое сопровождение для событий на сайте. Это может быть клик мышки по объекту, наведение или убирание мышки с объекта и другие. Например клик по пункту меню или добавление звуковых комментариев к изображению. Спектр применения плагина будет зависеть только от Вашего воображения.



Итак, приступим к установке. Для начала в корне сайта создадим папку для хранения звуковых файлов. К примеру «Sound». В нее помещаем файлы всех звуков, которые хотим использовать на сайте. Для того, чтобы звуки воспроизводились во всех браузерах, файлы должны быть двух форматов: mp3 и ogg. В архиве с плагином находится коллекция из 25 звуков. Однако Вы можете использовать и любые другие, какие посчитаете нужным. В интернете много бесплатных банков где можно скачать различные звуки. Например corpuscul.net или noise.podst.ru. Для конвертации mp3 файлов в формат ogg можно воспользоваться онлайн сервисом media.io.
В паку «js» помещаем файлы ion.sound.min.js и jquery-1.10.2.min.js и подключаем их между тегами <head> и </head>:
 


Теперь укажем плагину какие файлы мы хотим использовать, а так же путь к папке со звуками и, при желании, запрет или разрешение на одновременное проигрывания разных файлов и громкость звука:


Осталось определить звуки для конкретного действия и объекта. Можем мы это сделать двумя способами.
Первый способ: присваиваем объекту (кнопке, диву, изображению и т. д.) класс или идентификатор. Класс присваиваем в случае, когда один и тот же звук будет использоваться для нескольких объектов: И прописываем в теге script:


Второй способ: подключаем звук непосредственно в свойствах объекта: Отключить воспроизведение конкретного звука можно с помощью следующей команды:

Остановить воспроизведение конкретного звука можно при помощи команды:
$.ionSound.stop("button_tiny");

Удалить звук из списка воспроизведения:
$.ionSound.kill("button_tiny");

И наконец, полностью отключить плагин:
$.ionSound.destroy();

Громкость звука определяется в пределах от 0.0 до 1.0. Чтобы задать индивидуальную громкость отдельным звукам нужно добавить значение громкости после инициализации файла звука: ["any_sound:0.8"].
Официальный сайт: http://ionden.com/a/plugins/ion.sound

3 комментария :

  1. Ссылка на демо не рабочая. Прошу поправить.

    ОтветитьУдалить
  2. Ссылка на демо по прежнему не работает (там реклама)

    ОтветитьУдалить

Ваш комментарий: