Проигрываем звук при наведении курсора мыши на элемент

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

  1. Ссылки на материалы о Counter Strike: Source.
  2. Что-нибудь о 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>
        Ваш браузер не поддерживает замечательный элемент <audio>.
</audio>

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

Нашей целью является проигрывание звука, когда курсор мыши оказывается над определённым элементом. К сожалению,  мы не можем управлять элементом <audio> из CSS, поэтому потребуется использовать JavaScript:

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

// или с использованием 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 используется подобная технология для проигрывания разных звуков, когда курсор мыши проходит над ртом снежного человека (работает в браузерах Webkit). Данный эффект выполнен встраиванием нового элемента audio в структуру DOM каждый раз, когда курсор мыши проходит над ртом снежного человека:

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

Метод можно немного улучшить, добавив поддержку файла OGG:

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 на странице сразу:

<audio preload="auto" id="sound-1" > ... источник ... </audio>
<audio preload="auto" id="sound-2" > ... источник ... </audio>
<audio preload="auto" id="sound-3" > ... источник ... </audio>

И случайным образом выбирать один для проигрывания:

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

 

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

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

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

Самый лучший метод решения возникшей проблемы - дублировать элемент audio для каждого пункта меню. Таким образом, независимые элементы audio могут проигрывать перекрывающиеся звуки.

$("nav a") // цикл по всем пунктам меню
  .each(function(i) {
    if (i != 0) { // Клонирование нужно только в случае более одного пункта
      $("#beep")
        .clone()
        .attr("id", "beep-" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beeper", i); // сохраняем ссылку
  })
  .mouseenter(function() {
    $("#beep-" + $(this).data("beeper"))[0].play();
  });
$("#beep").attr("id", "beep-0"); // изменяем первый элемент в соответствии с условиями именования

demosourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/play-sound-on-hover
Перевел: Сергей Фастунов
Урок создан: 16 Апреля 2011
Просмотров: 80150
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Апреля 2011 20:15
    antosha
    класс спасибо за пост
  • 16 Апреля 2011 20:34
    krlmisha
    Пригодится! спс за урок :)
  • 16 Апреля 2011 21:14
    Revy
    это нужная весчь
  • 16 Апреля 2011 21:41
    notbot
    Спасибо, но лучше бы просто рассказали про <AUDIO>
  • 17 Апреля 2011 02:18
    profesor08
    .pause() ставит проигрывание на паузу (вывод следует из названия функции). И при вызове .play() возобновит воспроизведение. а раз есть эти функции, то должна быть .stop(), НО ее вообще нет!! Так что использование проверенного кроссбраузерного флэш наилучшее решение. В отношении видео и аудио.
    • 17 Апреля 2011 07:04
      alexsave
      Согласен Flash намного лучше
  • 17 Апреля 2011 06:58
    alexsave
    Небольшая ошибка: mp3 нужен для Opera и Firefox, а ogg для Webkit, знаю это по личному опыту, т.к. делал музыкальный чат для одного из сайтов и никак не мог догнать почему Opera и Firefox не воспроизводят .ogg ))
    • 17 Апреля 2011 11:02
      user46577
      опера ogg как раз таки воспроизводит а вот mp3 нет (по личному опыту) в таблице на этом сайте http://htmlbook.ru/html/audio приведена поддержка кодеков, но в Firefox почему-то не воспросизводит ogg
    • 17 Апреля 2011 14:32
      rubyx
      у меня всё проигрывается кроме Internet Explorer 9:)) самый "тупой" и медленный браузер))))) огг и мп3 играют все.
  • 17 Апреля 2011 07:32
    art_reklama_com
    Хм, а кому и зачем это нужно? Неожиданные звуки на сайтах это зло, об этом писалось тысячу раз. А если еще нет кнопочки выключения... Такая страница сразу же закрывается.
    • 17 Апреля 2011 14:03
      ushim
      Идея состоит не в том, что музыка начинает проигрываться при заходе на страницу, а она проигрывается от действий пользователя. В данном случае наведение на меню, но по этому уроку не составит труда сделать какой-нибудь музыкальный плеер без использования flesh
      • 17 Апреля 2011 14:35
        Ygreec
        Многие любят гулять по инету, слушая любимую музыку... И представьте, если какой-то создатель сайта решит что звук должен быть дольше, и это будет фрагмент из хэви-металл... Конечно юзер моментально уйдет после пары прохождений по пунктам меню! Но сам механизм отличный, можно применить в другом месте, как предпрослушка чего-то... главное требование - это должно происходить с ведома и по желанию пользователя, а меню - не лучшее применение... Спасибо за статью!
      • 18 Апреля 2011 10:36
        art_reklama_com
        Зачем мне слушать звуки при наведении на пункт меню? Это не компьютерная игра
        • 18 Апреля 2011 21:38
          ushim
          "Это не компьютерная игра". Не буду навязывать своё мнение, но сайт может быть и о компьютерной игре, и создатель сайта может захотеть его максимально приблизить к игре. Так что мотивы могут быть разные, но главное что они могут БЫТЬ
          • 20 Апреля 2011 00:30
            art_reklama_com
            Мотив один - такой сайт закрывается и добавляется в бан лист в антивирусник. Точка.
  • 17 Апреля 2011 10:28
    Евгений Ечкалов
    Да, кнопочка выключения звука нужна, кому-то эти звуки могут понравится, а кому-то и нет.
    • 18 Апреля 2011 01:36
      Никита Никитин
      В принципе, это совсем нетрудно воссоздать.
  • 17 Апреля 2011 12:44
    qwerty1007482
    Хорошая идея, надо развивать!
  • 17 Апреля 2011 14:34
    rubyx
    интересно использовать не только "щелчки" но и музыку:) короче урок отличный!
  • 17 Апреля 2011 21:56
    vanikad
    Cool, nice and useful
  • 21 Апреля 2011 12:12
    gufon
    уже плеера делают на java script
  • 28 Апреля 2011 21:55
    Ygreec
    Объясните пожалуйста, почему у меня Файрфоксе 4 демо проигрывает все как надо, а в исходниках (то есть в компе) - нет? Вместо плеера крестик, но и сообщения о том, что браузер не поддерживает аудио - тоже нет...
  • 14 Августа 2011 13:00
    RaftKorn
    Подскажите, а как сделать на сайте кнопочку Вкл./выкл. чтоб можно было включать/отключать эти звуки на сайте?
  • 8 Декабря 2011 18:36
    Romeo_
    Спасибо, мне помогло
  • 12 Июля 2012 18:28
    Anonymous Kiwiman
    Товарищи, пробовал на статике, все пашет. Не могу такую штуку в вордпресс организовать. Сделал меню с помощью виджета в сайд баре, из исходника далее вставил код в текстовый виджет с кодом. Меню отображается как следует, плеер вылазит, на плей играет. Но эффекта при наведении нет. Смотрел фаербагом, пишет что со скриптом проблема, пробовал его файлом выносить отдельным, не помогло. В общем на статике все пашет, а при переносе на ВП не хочет. Подскажите как реализовать.
  • 12 Февраля 2013 09:48
    afr0
    Перестало работать на iPad (после обновления iOS) Как решить данную проблему?
  • 10 Августа 2013 05:13
    riteres
    Спасибо, пригодилось.
  • 5 Февраля 2014 22:25
    Loneador
    Лучше при наведении на элемент создавать новый элемент <audio> с автоплеем, а через время удалять.
  • 30 Декабря 2015 10:45
    indogo
    здравствуйте... нужна помощь! есть скрипт function soundClick() { var audio = new Audio(); // Создаём новый элемент Audio audio.src = 'click.mp3'; // Указываем путь к звуку "клика" audio.autoplay = true; // Автоматически запускаем } подскажите как сделать воспроизвидение через 5 или 10 сек, после нажатия на ссылку..спасибо.
^ Наверх ^