Jump to content

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

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

    Бывает очень хочется сделать так, чтобы при наведении курсора на любой из пунктов меню однократно проигрывался звук. Например, такие приемы часто используют в 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 и сам звуковой файлик.

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

    User Feedback

    Recommended Comments

    Djodas

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

    Share this comment

    Link to comment
    Share on other sites
    Евгений Зубов

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

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

    Share this comment

    Link to comment
    Share on other sites
    Rusty

    Евгений а как для каждого пункта меню разный звук? Возможно ли такое? Заранее спасибо!

    Share this comment

    Link to comment
    Share on other sites
    Rusty

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

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

    Share this comment

    Link to comment
    Share on other sites
    Александра 1992

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

    Share this comment

    Link to comment
    Share on other sites
    Павел Хомерики
    38 минуты назад, Александра 1992 сказал:

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

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

    Share this comment

    Link to comment
    Share on other sites
    wioso
    В 15.10.2015 at 11:45, Rusty сказал:

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

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

    Share this comment

    Link to comment
    Share on other sites
    wioso

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

    Share this comment

    Link to comment
    Share on other sites
    Asad

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

    Share this comment

    Link to comment
    Share on other sites
    Дмитрий Будаев

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

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

    Share this comment

    Link to comment
    Share on other sites
    Дмитрий Будаев
    В 18.5.2017 в 20:19, Asad сказал:

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

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

    Share this comment

    Link to comment
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
×