<audio id="bg-sound">
<source src="https://310401.selcdn.ru/MIXED/caitlin-de-ville-attention.mp3">
</audio>
<script>
(function () {
document.addEventListener("DOMContentLoaded", function() {
const myAudio = document.getElementById("bg-sound");
const fadeTime = 300;//Врямя смены иконок
myAudio.volume = 0.4;//Задаём громкость
const stopBtn = document.querySelector('.stopbgmusic');
const playBtn = document.querySelector('.playbgmusic');
stopBtn.classList.add('hide-btn');
playBtn.addEventListener('click', function(event) {
myAudio.play();
this.classList.toggle('hide-btn');
stopBtn.classList.toggle('hide-btn');
});
stopBtn.addEventListener('click', function(event) {
myAudio.pause();
this.classList.toggle('hide-btn');
playBtn.classList.toggle('hide-btn');
});
myAudio.addEventListener('ended', function(event) {
playBtn.classList.remove('hide-btn');
stopBtn.classList.add('hide-btn');
});
});
})();
</script>
<style>
div[class*="bgmusic"] {
cursor: pointer;
z-index:99 !important;
}
.hide-btn{
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
}
</style>