22 июня 2017
3971
меню, звуковое меню, меню со звуком

Меню со звуком для сайта

JavaScript
Демонстрация » Скачать »

Доброго времени суток, уважаемые наши подписчики, читатели и те кто интересуется веб программированием. Сегодня я решил подготовить для Вас вторую часть, а вернее продолжение и развитие темы по просьбе нашего постоянного подписчика, который посоветовал мне сделать урок на тему меню со звуком для сайта. Первая часть была посвящена созданию простого меню для сайта на HTML и CSS, оболочку которого мы будем использовать и внедрять в данный урок.

 

Материал получился не большим, поэтому на выбор Вам предлагаю два варианта изучения: либо текст, либо видео. А Вы уже сами решайте, кому как удобнее. Главное чтобы Вы уловили смысл создания подобного меню со звуком, а остальное уже сможете поправить или что-то дописать на свой вкус и фантазию.

 

 

И так, для начала нам потребуется подключить, собственно говоря, наш скрипт. Я назвал его play.js. А также давайте не забудем в папку audio закинуть наши аудио файлы, которые я подготовил заранее: audio.mp3 и audio.ogg. Советую всем конвертировать аудио файлы в сжатое расширение ogg Vorbis, это позволит проигрывать звуковой файл с меньшим весом, что значительно ускорит процесс воспроизведения.

А теперь мы можем перейти к JavaScript коду, где мы первым делом должны создать функцию playAudio, которой мы указываем переменную myAudio, присваивая ей новый объект Audio. После чего мы можем указать путь к нашему аудио файлу, а также инициализировать функцию с последующим воспроизведением объекта.

 

function playAudio(){
	var myAudio = new Audio;
	myAudio.src = "../audio/audio.ogg";
	myAudio.play();
}

 

Далее мы создаем переменную audio в которой будем хранить DOM дерево, возвращающее ссылку на элемент идентификатора и тега.

 

var audio = document.getElementById('nav').getElementsByTagName('a');

 

После чего нам потребуется создать цикл и реализовать я его решил с помощью функцию for. Перебирая массив DOM дерева, мы сможем определить область элемента меню на которую навел пользователь, тем самым инициализируем объект функции. 

 

for(var i = 0; i < audio.length; i++){
	audio[i].onmouseenter = function() { 
    	playAudio();
	}
}

 

Как бы и все! Скрипт получился, как я сказал уже ранее, компактным и вполне подойдет для использования на JavaScript. Благодарю всех за внимание, а также жду комментариев и вопросов, если кому чего то не ясно)