СтатьиРазработка в HTML, CSS, jQuery

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

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

Итак, имеем стандартный тег 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 нужных ссылок.


Комментарии

19.12.2015 16:00 Ruslan [гость]
Звуки на ссылках) это божественно))
01.03.2016 20:27 Андрей [гость]
А как сделать несколько разных звуков,

Звук1
Звук2
Звук3
и тд
03.03.2016 15:12 Антон [администратор]
Андрей, добрый день.
Для ответа на ваш вопрос, дополнил эту статью новым подразделом "Назначение нескольких разных звуков на ссылках". И спасибо за вопрос.
28.04.2016 18:35 Роман [гость]
Спасибо за интересное и главное простое решение.
Имя:
Текст комментария:
* В комментариях запрещено публиковать рекламные объявления. Сообщения, содержащие ссылки на сторонние ресурсы добавляется в скрытом режиме. Они будут открыты, если не нарушают установленных правил, после проверки.
Защита от спам-роботов (* Обязателельно укажите ответ на простой вопрос ниже.)
Сколько ножек у трeхногого табурета? (цифра)