Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Звук по нажатию на ссылку
logo

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

03.12.2015

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

Другие материалы:

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


Установить, снять галочку, узнать состояние CheckBox в jQuery


Отправка (submit) формы после выбора файла с оформлением input[file]


Написать комментарий

Комментарии

В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.


коммент.

avatar

Владимир

- 01 августа 2020, 15:14 ↓
Спасибо!
avatar

Антон

- 30 июля 2020, 18:48 ↓
Добрый день, Гавриил.
Чтобы остановить проигрывание звука, есть команда pause:
myAudio.pause();

В данной статье рассматривался просто проигрывание звука, а не полноценный плеер. Чтобы реализовать подобную возможность, нужно будет несколько доработать код скрипта. В нашем случае объект аудио создается локально в функции, где и вызывается. Следовательно, если вам нужно будет дальнейшее управление им, нужно будет создавать глобальную переменную, а затем обращаться к ней.
Кроме того, если вы хотите на одну кнопку сделать включение и выключение звука, то нужно будет, чтобы кнопка «запоминала» свой текущий статус. В функции же должно быть условие, по которому ролик будет либо запускаться, либо останавливаться паузой.
avatar

Гавриил

- 30 июля 2020, 08:26 ↓
А как остановить при клике по той же ссылке? Если второй раз кликнуть, запускается тоже аудио опять, но и предыдущее продолжает играть, и так без конца…
avatar

Marshall

- 16 июля 2020, 21:18 ↓
Спасибо за статью!

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных