В этой статье я расскажу, как сделать воспроизведение скрытого аудиофайла на сайте при нажатии на кнопку или ссылку.
Итак, приступим:
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>
<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>
jQuery(function($){
$('.musicstart').on('click', function(){
$('.music')[0].play()
});
$('.pause').on('click', function(){
$('.music')[0].pause();
})
});
</script>
На этом все. Надеюсь, что статья была вам полезной!
ДЕМОСКАЧАТЬ
