Воспроизведение аудио при нажатии на кнопку

8459

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

Итак, приступим:

1 Для начала подключаем к сайту библиотеку jquery. Если она у вас уже подключена- отлично! Если нет, то ее необходимо скачать по этой ссылке после чего подключить в хедере вашего сайта.
Если лень качать, то можно подключить ее удаленно с ресурсов Google, для чего в хедере необходимо разместить следующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 Далее нам необходимо сделать разметку нашей кнопки/ссылки и аудио:

<p>Metallica - Nothing Else Matters</p>
<audio class="music" controls src="Metallica.mp3" style="display:none"></audio>
<button class="musicstart">Слушать</button>
<button class="pause">Пауза</button>

где src="Metallica.mp3" - путь до вашего аудио на сайте.

3 Отлично. Осталось только прописать скрипт, запускающий и останавливающий музыку при нажатии на кнопку:

<script>
jQuery(function($){
$('.musicstart').on('click', function(){
$('.music')[0].play()
});
$('.pause').on('click', function(){
$('.music')[0].pause();
})
});
</script>

На этом все. Надеюсь, что статья была вам полезной!
ДЕМОСКАЧАТЬ

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code