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

Если сделать запрос поисковым серверам на тему проигрывания звука с помощью 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"); // изменяем первый элемент в соответствии с условиями именования


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fDHOuyNvNe8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Проигрываем звук при наведении курсора мыши на элемент | | 2012-06-19 12:10:05 | | Статьи Web-мастеру | | Если сделать запрос поисковым серверам на тему проигрывания звука с помощью CSS, то вы найдете:Ссылки на материалы о Counter Strike: Source. Что-нибудь о play-during и cue-before и подобных | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: