<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<audio id="my_sound1"><source src="https://310401.selcdn.ru/links/Zvuk_-_vinil.mp3"></audio>
<audio id="my_sound2"><source src="https://310401.selcdn.ru/links/the-acoustic-guitar-troubadours.mp3"></audio>
<audio id="my_sound3"><source src="https://310401.selcdn.ru/links/zvuk_-_barabany.mp3"></audio>
<audio id="my_sound4"><source src="https://310401.selcdn.ru/links/violin.mp3"></audio>
<script>
$( document ).ready(function() {
$("a[href^='#playsound']").each(function(){
let elem = $(this);
let parent = elem.closest('.tn-elem');
parent.attr('data-play-attr', elem.attr('href')).addClass('playbtnbg');
elem.removeAttr('href');
});
$("a[href^='#stopsound']").each(function(){
let elem = $(this);
let parent = elem.closest('.tn-elem');
parent.attr('data-stop-attr', elem.attr('href')).addClass('stopbtnbg');
elem.removeAttr('href');
});
let btnLink=0;
let soundMax=0;
//Создаём функцию смены кнопок
function hideshowbtn(){
$('.playbtnbg').removeClass('hide-buton');
$('.stopbtnbg').addClass('hide-buton');
};
//Прописываем события при клике на play
$(".playbtnbg").click(function(e){e.preventDefault();hideshowbtn();
btnLink = $(this).attr('data-play-attr');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.play();
$(this).addClass('hide-buton');
$("[data-stop-attr='#stopsound_"+btnLink+"']").removeClass('hide-buton');
});
//Прописываем события при клике на stop
$(".stopbtnbg").click(function(e) {e.preventDefault();hideshowbtn();
btnLink = $(this).attr('data-stop-attr');btnLink = btnLink.split('_')[1];
soundMax = document.getElementById("my_sound"+btnLink);soundMax.pause();
$(this).addClass('hide-buton');
$("[data-play-attr='#playsound_"+btnLink+"']").removeClass('hide-buton');
});
//Функция прерывания трека
$(function() {
$('audio').on('play', function() {
$('audio').addClass('stoped').removeClass('playing');
$(this).removeClass('stoped').addClass('playing');
$('.stoped').each(function() {
$(this).trigger('pause');
}) }) });
//Регулировка громкости
$('#rec166116037').addClass('speaker');
$(".tn-atom__form").on('change', 'input[name="Range"]', function() {
var findVol = $(this).val(); $('audio').prop("volume", findVol/100);
});
$(".playbtnbg").click(function(e){e.preventDefault();$('.speaker').fadeIn(500);});
$(".stopbtnbg").click(function(e){e.preventDefault();$('.speaker').fadeOut(500);});
$("audio").on("ended", function() {
$('.playbtnbg').removeClass('hide-buton');
});
});
</script>
<style>
.t-range__interval-txt {display: none !important;}
.speaker{
display:none;
position:fixed;
bottom:0;
z-index:999999;
}
.hide-buton{
opacity: 0;
pointer-events: none !important;
}
.playbtnbg,
.stopbtnbg{
cursor: pointer;
}
</style>