Доброго времени суток, уважаемые наши подписчики, читатели и те кто интересуется веб программированием. Сегодня я решил подготовить для Вас вторую часть, а вернее продолжение и развитие темы по просьбе нашего постоянного подписчика, который посоветовал мне сделать урок на тему меню со звуком для сайта. Первая часть была посвящена созданию простого меню для сайта на 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. Благодарю всех за внимание, а также жду комментариев и вопросов, если кому чего то не ясно)