Главная / Верстка / Веб решения / Звук при наведении на ссылку

Звук при наведении на ссылку


30.06.2013 11:107637

В данном примере использования html тега audio мы научимся применять звуковой эффект при наведении мышки на ссылку. Вариантов применения данного метода можно придумать множество , главное условие-не ставить звуковые эффекты в тех местах , где посетитель будет вынужден нажимать на ссылку , допустим для перехода  по пунктам навигации.

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

Теперь перейдем к подробному рассмотрению :

Что нужно для воспроизведения аудио звука в html5 при наведении мышки ?
Нам понадобится библиотека jquery - подойдет любая , и аудиофайлы которые будем воспроизводить при наведении на ссылку. Каркас страницы будет стандартным , как и в других уроках , поэтому на нем заострять внимание я не буду , напомню лишь для новичков , что все коды которые описываются в примерах и уроках , нужно вставлять между тегами <body></body>

, а если нужно будет что-нибудь вставить за их пределами , это будет написано. Привожу исходный код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Воспроизведение звука в html5 при наведении</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<body>

 <ul id="myblock">
         <li> Звук при наведении на ссылку: <a href="http://prohtml.net/services/templater" target="_blank">Бесплатный онлайн генератор шаблонов</a>
            <audio id="myaudio" preload="auto">
             <source src="../oops.ogg">
             <source src="../oops.mp3">Ваш браузер не поддерживает воспроизведение аудио при помощи html5.</audio>
         Ваш браузер не поддерживает воспроизведение аудио при помощи html5.
         </audio></li>
  </ul>
 <script>var myaudio = $("#myaudio")[0];$("#myblock a").mouseenter(function(){myaudio.play();});</script>

</body>
</html> 



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



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Audio , Воспроизведение Звука При Наведении





«Звук при наведении на ссылку» - Похожие страницы

разный звук при наведении для ссылок Разный звук при наведении для ссылок В данном примере использования html тега audio мы научимся применять звуковой эффект таким образом , чтобы для нескольких ссылок были разные звуки. Где это может пригодиться ? Да где угодно , наверное везде ...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям