Звуковые эффекты при наведении на ссылку через HTML5 Audio
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<pre><script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code //** Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) //** Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("Тут ваш Медео файл whistle.ogg", "Тут ваш Медео файл whistle.mp3") var clicksound=createsoundbite("Тут ваш Медео файл click.ogg", "Тут ваш Медео файл click.mp3") </script> |
2#: Ссылки оформляем так:
|
1 2 3 4 5 6 7 8 9 |
<a href="Ваша ссылка" onmouseover="mouseoversound.playclip()">Название блока1</a> <a href="Ваша ссылка" onmouseover="mouseoversound.playclip()">Название блока2</a> <a href="Ваша ссылка" onmouseover="mouseoversound.playclip()">Название блока3</a> <a href="Ваша ссылка" onmouseover="mouseoversound.playclip()">Название блока3</a> <p align="left"><b>Эффект кликов:</b></p> <a href="Ваша ссылка" onclick="clicksound.playclip()">Название блока 1</a> <a href="Ваша ссылка" onclick="clicksound.playclip()">Название блока 2</a> <a href="Ваша ссылка" onclick="clicksound.playclip()">Название блока3</a> |
Автор публикации
Комментарии: 47Публикации: 59Регистрация: 13-06-2015
