—»     —»   Запускаем музыку и звуки событием :hover
  Раздел: Аудио, Руководства   Комментариев: 3  

Запускаем музыку и звуки событием :hover



Если вы забьёте в Google запрос о том, как запустить музыку посредством CSS, вы, вероятно, найдёте:

- Что-нибудь об игре Counter Strike: Source
- Что-нибудь о функциях play-during или cue-before или что-нибудь, что выглядит многообещающе, но в реальности это будет лишь посредственной обучающей статьёй.

Мы не считаем, что различные звуки – это неотъемлемая часть любого веб-сайта, однако обидно, что до сих пор посредством CSS не было возможности запускать звук. Для того чтобы запустить звук, когда курсор мыши попадает в определённую область страницы, нам нужно положиться на HTML5 и/или Flash. Но вряд ли здесь кто-то хочет иметь дело с Flash, правда? Итак, давайте сотворим это посредством HTML5, которая позволяет нам запустить музыку посредством нового элемента «audio» (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Для того чтобы выжать из браузера максимальную возможность, мы реализуем это, используя и источник MP3 (для WebKit и IE) и посредством источника OGG (для Firefox и Opera).

<audio>
        <source src="audio/beep.mp3"></source>
        <source src="audio/beep.ogg"></source>
        Your browser isn't invited for super fun audio time.
</audio>

Если вы вставите код в точности так, как отображено сверху, то вы вряд ли что-то увидите или услышите. Если вам нужен маленький элемент плеера, то обязательно используйте атрибут контроллеров («audio controls»). Если вам надо, чтобы плеер можно было слышать, но не видеть, то воспользуйтесь элементом автоматического запуска («audio autoplay»). Либо используйте оба элемента...

Наша цель – заставить звук воспроизводиться, когда курсор мыши будет наведён на конкретный элемент (например, пункт меню). И опять же, к сожалению, мы не можем заставить элемент «audio» работать посредством CSS, нам надо задействовать javascript. Для того, чтобы проиграть звук посредством javascript, воспользуйтесь кодом:

var audio = document.getElementsByTagName("audio")[0];
audio.play();

// or with an ID

var audio = document.getElementById("mySoundClip");
audio.play();

Давайте воспользуемся jQuery потому, что он значительно упрощает рабочий процесс с выделением и созданием событием.

var audio = $("#mySoundClip")[0];
audio.play();

Давайте сделаем так, чтобы звук начинал играть тогда, когда курсор мыши находился поверх конкретного элемента:

var audio = $("#mySoundClip")[0];
$("nav a").mouseenter(function() {
  audio.play();
});


Другими словами…

Страница тизера мобильного приложения Goodfoot использует похожую технику для вставки звуков, когда вы наводите курсор на голову снежного человека. Здесь всё реализовано посредством внедрения нового элемента audio в DOM при каждом наведении на персонаж:

$("#speak").mouseenter(function(){
        $("<audio></audio>").attr({
                'src':'audio/'+Math.ceil(Math.random() * 5)+'.mp3',
                'volume':0.4,
                'autoplay':'autoplay'
        }).appendTo("body");
});

Это можно немного усовершенствовать до поддержки формата OGG. Не думаем, что атрибут уровня звука будет работать, так как мы ещё нигде не встречали поддержки этой функции. Всё это модернизировал Джеффри Уэй (Jeffrey Way):

function addSource(elem, path) {
  $('<source>').attr('src', path).appendTo(elem);
}

$("#speak").mouseenter(function(){
     var audio = $('<audio />', {
       autoPlay : 'autoplay'
     });
     addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.mp3');
     addSource(audio, 'audio/'+Math.ceil(Math.random() * 5)+'.ogg');
     audio.appendTo('body');
});

Мы удовлетворены таким подходом, так как здесь всё работает так, как надо. После того, как звук воспроизведён, он сохраняется в кэш, что значительно ускоряет работу в следующую загрузку.

Ещё один способ реализации заключается во внедрении трёх аудио-элементов в страницу.

<audio preload="auto" id="sound-1" > ... src & fallback ... </audio>
<audio preload="auto" id="sound-2" > ... src & fallback ... </audio>
<audio preload="auto" id="sound-3" > ... src & fallback ... </audio>

А затем следует поочерёдный выбор каждого из них:

$("#speak").mouseenter(function() {
    $("#sound-" + Math.ceil(Math.random() * 3))[0].play();
});

Повторы и проблемы: накладывание звуков

Изначально некоторые хотят встроить систему в навигационное меню при наведении на вкладки. Здесь сразу открывается проблема: функция .play() запускается гораздо быстрее и чаще, чем вы можете прослушать каждый отдельный запускаемый звук. Один и тот же звук не может быть воспроизведён поверх того, который уже воспроизводится. Поэтому последующие функции .play() не запускаются, пока не первый запущенный цикл не будет закончен.

Изначально мы пробовали воспользоваться функцией .pause() для того, чтобы остановить воспроизведение и запустить функцию снова, но это не помогло. Пауза производится, но затем функция .play() не хочет запускаться заново.

Лучший способ, который мы отыскали – это дублирование элемента для каждого пункта меню. Таким образом каждый пункт меню будет иметь собственный отрезок звукового файла, который будет воспроизводиться по отдельным функциям, создавая наложение.

$("nav a") // loop each menu item
  .each(function(i) {
    if (i != 0) { // only clone if more than one needed
      $("#beep")
        .clone()
        .attr("id", "beep-" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beeper", i); // save reference
  })
  .mouseenter(function() {
    $("#beep-" + $(this).data("beeper"))[0].play();
  });
$("#beep").attr("id", "beep-0"); // get first one into naming convention

Посмотреть демо | Скачать файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, javascript, музыка
Опубликовал Mysterious Master   Прочитано (раз): 15997   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 февраля 2012 @ 12:55
Написал: Sana2020 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Неплохая статья,все так подробно написано,в дальнейшем данная информация мне как раз пригодится!
Комментарий #2: 15 марта 2013 @ 23:34
Написал: Владимир Жариков — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная штука получилась. Поставил щелчки на кнопки своего сайта. На локальном сервере все работает прекрасно, а на удаленном молчит как рыба об лед. Все пути к папкам проверял неоднократно. Может ли хост не поддерживать HTML5?
Комментарий #3: 16 января 2014 @ 16:58
Написал: Tim — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хочется отметить одну важную деталь - которую можно даже в статью поместить - скрипт с функциями нужно размещать после тега audio - иначе не будет работать
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Тапочки валяные из шерсти купить
Пальто из валяной шерсти в наличии. Выбери и возьми пальто по выгодной цене
top-valenki.ru
Джелато
джелато
kugelfoods.com
Магазин рыболовных товаров
Интернет-магазин рыболовных товаров
trophy.net.ua
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930