<!-- Прописываем наши плееры и ссылки на аудио файлы.. -->
<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.addEventListener("DOMContentLoaded", function() {
(function () {
// Обработка элементов с ссылками на звуки
document.querySelectorAll("a[href^='#playsound']").forEach(function(elem) {
let parent = elem.closest('.tn-elem');
if (parent) {
parent.setAttribute('data-play-attr', elem.getAttribute('href'));
parent.classList.add('playbtnbg');
elem.removeAttribute('href');
}
});
document.querySelectorAll("a[href^='#stopsound']").forEach(function(elem) {
let parent = elem.closest('.tn-elem');
if (parent) {
parent.setAttribute('data-stop-attr', elem.getAttribute('href'));
parent.classList.add('stopbtnbg');
elem.removeAttribute('href');
}
});
let btnLink = 0;
let soundMax = null;
// Функция смены кнопок
function hideshowbtn() {
document.querySelectorAll('.playbtnbg').forEach(function(btn) {
btn.classList.remove('hide-buton');
});
document.querySelectorAll('.stopbtnbg').forEach(function(btn) {
btn.classList.add('hide-buton');
});
};
// Обработчики для кнопок play
document.addEventListener('click', function(e) {
const playBtn = e.target.closest('.playbtnbg');
if (playBtn) {
e.preventDefault();
hideshowbtn();
btnLink = playBtn.getAttribute('data-play-attr').split('_')[1];
soundMax = document.getElementById("my_sound" + btnLink);
soundMax.play();
playBtn.classList.add('hide-buton');
const stopBtn = document.querySelector("[data-stop-attr='#stopsound_" + btnLink + "']");
if (stopBtn) stopBtn.classList.remove('hide-buton');
}
});
// Обработчики для кнопок stop
document.addEventListener('click', function(e) {
const stopBtn = e.target.closest('.stopbtnbg');
if (stopBtn) {
e.preventDefault();
hideshowbtn();
btnLink = stopBtn.getAttribute('data-stop-attr').split('_')[1];
soundMax = document.getElementById("my_sound" + btnLink);
soundMax.pause();
stopBtn.classList.add('hide-buton');
const playBtn = document.querySelector("[data-play-attr='#playsound_" + btnLink + "']");
if (playBtn) playBtn.classList.remove('hide-buton');
}
});
// Функция прерывания трека
document.querySelectorAll('audio').forEach(function(audio) {
audio.addEventListener('play', function() {
document.querySelectorAll('audio').forEach(function(a) {
if (a !== audio && !a.paused) {
a.classList.add('stoped');
a.classList.remove('playing');
a.pause();
}
});
audio.classList.remove('stoped');
audio.classList.add('playing');
});
});
// Регулировка громкости
const recElement = document.getElementById('rec166116037');
if (recElement) recElement.classList.add('speaker');
document.addEventListener('change', function(e) {
if (e.target.matches('input[name="Range"]')) {
const findVol = e.target.value;
document.querySelectorAll('audio').forEach(function(audio) {
audio.volume = findVol / 100;
});
}
});
// Показ/скрытие регулятора громкости
document.addEventListener('click', function(e) {
const speaker = document.querySelector('.speaker');
if (!speaker) return;
if (e.target.closest('.playbtnbg')) {
speaker.style.display = 'block';
setTimeout(function() {
speaker.style.opacity = 1;
}, 10);
} else if (e.target.closest('.stopbtnbg')) {
speaker.style.opacity = 0;
setTimeout(function() {
speaker.style.display = 'none';
}, 500);
}
});
// Сброс кнопок при завершении воспроизведения
document.querySelectorAll('audio').forEach(function(audio) {
audio.addEventListener('ended', function() {
document.querySelectorAll('.playbtnbg').forEach(function(btn) {
btn.classList.remove('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>