Skillbox

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

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

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

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

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

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

<button class="musicstart">Слушать</button>
<audio class="music" preload="auto" loop="loop">
<source src="https://freeuk17.listen2myradio.com/live.mp3?typeportmount=s1_4271_stream_647901959" controls="" autobuffer="" />
</audio>

где src="https://freeuk17.listen2myradio.com/live.mp3?typeportmount=s1_4271_stream_647901959" - путь до вашего аудио на сайте.

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

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

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

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

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