Звук по нажатию на ссылку

Воспроизвести звуковой файл на сайте достаточно просто, не зависимо от того каким образом выполнять запуск этого файла. Давайте рассмотрим эту задачу на примере проигрывания звукового эффекта по нажатию на ссылку. Итак, имеем стандартный тег html ссылки:

<a href="#" id="myLink">Звук</a>

Для проигрывания звука используем объект Audio JavaScript. Его нужно создать, назначить ему звуковой файл, а после этого можно будет его проиграть.

var myAudio = new Audio; // создание экземпляра класса Audio
myAudio.src = "warning.wav"; // назначение звукового файла
myAudio.play(); // воспроизвести звук

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

<script type="text/javascript">
   function playAudio(){
      var myAudio = new Audio;
      myAudio.src = "warning.wav";
      myAudio.play();
   }
</script>

Теперь в нужной ссылке назначаем выполнение функции playAudio() на событие onclick (или любое другое событие).

<a href="#" id="myLink" onclick="playAudio();">Звук</a>

Для большего удобства можно назначать эту функцию с использованием jQuery.

<script type="text/javascript">
   function playAudio(){
     var myAudio = new Audio;
     myAudio.src = "warning.wav";
     myAudio.play();
   }
   jQuery(function(){
     $('#myLink').click(function(){
       playAudio();
     });
  });
</script>

В приведенном примере, обработчик на событие click (нажатие мышью) назначен объекту с идентификатором myLink. Аналогично можно назначить:

$('.mylinks')... – все объекты с классом mylinks. $('a')...– все ссылки на странице.

Таким образом, можно назначить воспроизведение звукового файла на любое событие любого объекта.

Однако, при назначении звука на ссылках, стоит отметить небольшую проблему. Если назначить звук на ссылку, вызывающую переход на другую страницу, проигрывание звука выполняться не будет. Это происходит потому, что страница, на которой должен проиграться звуковой файл закроется и откроется новая. Если все же нужно воспроизвести звук при открытии другой страницы, можно воспроизводить его и при загрузке страницы:

<script type="text/javascript">
jQuery(function(){
playAudio();
});
</script>

Назначение нескольких разных звуков на ссылках

Если нужно сделать разные звуки на разные ссылки, то можно: либо создать отдельные функции для каждого звука; либо добавить в функцию параметр, который будет указывать, какой из звуковых роликов проигрывать в каждом случае. Пример:

<script type="text/javascript">
   function playAudio(s){
      var myAudio = new Audio;
      if (s == 1){
         myAudio.src = "warning.wav";
      }else if (s == 2){
         myAudio.src = "w1.wav";
      }
      myAudio.play();
   }
   jQuery(function(){
      $('#myLink1').click(function(){
          playAudio(1);
      });
      $('#myLink2').click(function(){
          playAudio(2);
      });
   });
</script>

Здесь myLink1 и myLink2, соответствующие id нужных ссылок.