Присер использования html5 audio


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


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

 <!DOCTYPE HTML>
   <html> 
 <head>
  <meta charset="windows-1251" /> 
 <title>Воспроизведение звука в html5 при наведении</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   
  </head>
   <body> 
  <ul id="myblock">
          <li>
               <a href="http://justwebber.com/">Изучаем html5 онлайн</a>
             <audio id="myaudio" preload="auto">
            <source src="/templates/justwebber_HTML5/images/audio/oops.ogg">
            <source src="/templates/justwebber_HTML5/images/audio/oops.mp3">
          Ваш браузер не поддерживает воспроизведение аудио при помощи html5.
          </audio>
          </li>
 </ul>
       <script>var myaudio = $("#myaudio")[0];
 $("#myblock a")
    .mouseenter(function() {
       myaudio.play();
    });</script>
  </body>
 </html>
 Сам тег audio так устроен что его функционал состоит в том чтобы управлять музыкой , звуком , но управление событием мышки находится за пределами его компетенции , для этого мы и подключили библиотеку , и создали с помощью query мини-обработчик события наведения мыши на объект , в данном случае это ссылка.

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

Источник - изучаем HTML5 онлайн.

Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями. Для этого воспользуйтесь предлагаемыми ниже кнопками:



Блог: http://romanlovetext.blogspot.com/
Ярлыки: ,