Перейти к содержимому

  • Как добавить звук при наведении курсора на пункты меню?

    Евгений Зубов Евгений Зубов,

    Бывает очень хочется сделать так, чтобы при наведении курсора на любой из пунктов меню однократно проигрывался звук. Например, такие приемы часто используют в Flash сайтах. Вот пример. Так вот, такой же эффекта можно добиться в Adobe Muse.

    Для этого, на понадобится:

    1. Звуковой файлик с тем звуком, который должен проигрываться (в этом уроке используется файл с названием error.wav)
      Можно как .wav так и .mp3
    2. Любой сайт в Adobe Muse и виджет меню в нем.

    Теперь пошаговый план как это реализовать:

    1. Создаете новый сайт.
    2. Добавляете виджет меню.
    3. Открываете свойства мастер-шаблона и во вкладке Метаданные, в поле HTML для <head>, вставляете этот код:
      <script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".MenuItemContainer" ).click(function() {
$('.sound').html('<audio id="soundcard" src="assets/error.wav"></audio>');
document.getElementById("soundcard").play();
});
})
</script>
<div class="sound"> </div>

    4. Потом, переходите в главное меню Файл - Добавить файлы для передачи...

    5. В появившемся окне укажите на тот .wav файл который должен проигрываться при наведении курсора (в этом уроке это error.wav)
    6. Экспортируйте или опубликуйте сайт и все работает как надо.

    Теперь при наведении курсора на пункты меню будет проигрываться единоразово файл error.wav. Само собой Вы можете подставить любой другой звук, только не забудьте изменить название файла в коде на свое. Во вложении к этому уроку пример проекта для Muse и сам звуковой файлик.

    Вопросы по этому уроку задавайте тут же в комментария.

    Отзывы пользователей

    Рекомендуемые комментарии

    Djodas

    У меня при нажатии на кнопку меню звук проигрывается, а как сделать чтобы при наведении мышки один звук был, а при клике на меню другой? Не совсем так как в примере :)

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Евгений Зубов

    У меня при нажатии на кнопку меню звук проигрывается, а как сделать чтобы при наведении мышки один звук был, а при клике на меню другой? Не совсем так как в примере :)

    ​Чуть позже дополню урок. Конечно если не забуду. 

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Rusty

    У меня при нажатии на кнопку меню звук проигрывается, а как сделать чтобы при наведении мышки один звук был, а при клике на меню другой? Не совсем так как в примере :)

    click заменить на mouseover в коде.

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Александра 1992

    Добрый день. Все сделала и музыка есть при нажатии на кнопку, но только при предпросмотре. А после загрузки на хостинг нет, в чем может быть проблема?

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Павел Хомерики
    38 минуты назад, Александра 1992 сказал:

    Добрый день. Все сделала и музыка есть при нажатии на кнопку, но только при предпросмотре. А после загрузки на хостинг нет, в чем может быть проблема?

    Проблема может быть в том что аудио файл назван кириллицей или в названии есть большие буквы или спец. символы. Предпросмотр осуществляется внутри системы вашего компьютера. Если система Windows то она кушает всё, поэтому в предпросмотре всё работает. А  нормальные хостинги обычно базируются на системе  Unix - она не понимает кириллицу, большие буквы и спец символы в названии файлов.
     

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    wioso
    В 15.10.2015 at 11:45, Rusty сказал:

    click заменить на mouseover в коде.

    Привет, скажи вот поставил место click, mouseover. А как добавить еще звук что бы был отдельно при наводке на любую выделяющую ссылку ? Как прописать код к этому дополнению со старым ?

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    wioso

    Я использую не шапку в странице сайта, а отдельный виджет для вставки кода в саму часть страницы . Можно ли таким методом ? 

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Asad

    А как можно сделать кнопку включения отключения звуков на сайте (Mute/unMute)?
    Т.е. используя скрип прописанный в теме можно повесить звуки на различные объекты на сайте + фоновая музыка. А как теперь к этим скриптам сделать кнопку, которая будет включать и выключать все звуки на сайте?
     

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Дмитрий Будаев

    Потрясающе! Работает! Фоновую музыку сумел поставить по написанному вами коду. Теперь попробую этот скрипт. (а купил виджет Sound Effekts заточенный на это - он почему-то не работает).

    Теперь другая головная боль: хорошо бы научиться как-то прописывать в коде уровень громкости этой фоновой музыки (голь на выдумку хитра - можно конечно в звуковом редакторе перезаписать файл уменьшив уровень звука, но это не дело). Громкая музыка - раздражает. Тут тонко и нежно надо подходить к этому вопросу - помещать или нет фоновую музыку. Скажем - тихонько Вальс цветов Чайковского запустить - это можно. А вот если Хеви-металл - то на такой странице только сумасшедший останется (лично я сразу с таких страниц сматываюсь).

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах
    Дмитрий Будаев
    В 18.5.2017 в 20:19, Asad сказал:

    А как можно сделать кнопку включения отключения звуков на сайте (Mute/unMute)?
    Т.е. используя скрип прописанный в теме можно повесить звуки на различные объекты на сайте + фоновая музыка. А как теперь к этим скриптам сделать кнопку, которая будет включать и выключать все звуки на сайте?
     

    Я бы пожалуй дополнил вопрос: как сделать так,чтобы при уходе курсора с объекта звук прерывался. (Очень важная и нужная функция. В готовом виджете Sound Effercts к сожалению такой функции нет). Пример применения: назначены звуки нескольким объектам (несколько тактов  узнаваемой всеми  мелодии). Звуки относительно длинные (2-3 сек. звучания). Пробежав мышью по экрану и задев несколько объектов - получаешь какофонию звуков. А вместе с тем, в интернете встречаются сайты на которых эта функция прерывания осуществлена.

    Поделиться комментарием

    Ссылка на комментарий
    Поделиться на других сайтах

    Оставлять сообщения могут только участники клуба

    Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения

    Вступить в клуб

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
×