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

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

    Share this comment


    Link to comment
    Share on other sites

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

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

    Share this comment


    Link to comment
    Share on other sites

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

    Share this comment


    Link to comment
    Share on other sites

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

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

    Share this comment


    Link to comment
    Share on other sites

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

    Share this comment


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

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

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

    Share this comment


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

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

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

    Share this comment


    Link to comment
    Share on other sites

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

    Share this comment


    Link to comment
    Share on other sites

    А как можно сделать кнопку включения отключения звуков на сайте (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

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Restore formatting

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...