Эффект с музыкой JS

Question

Нужна помощь! Есть сайт - https://unitk.ai/ Как добиться таких же эффектов с музыкой с помощью JS? Чтобы, когда мышка выходила за пределы сайта, звук имел такой же эффект как и на сайте по ссылке (также плавное потухание музыки при клике (плавное выключение))

Answer 1

Этот пример предусматривает оба случая:

let myinterval;
let audio = new Audio("http://tolmatux.strana.de/audio/razminka.mp3");
let isplay = false;
let ispause = true;
document.onmouseover = () => {
  if (ispause == false) play();
}
document.onmouseleave = () => {
  if (isplay) pause();
}
document.onclick = () => {
  if (isplay) {
    ispause = true;
    pause();
  } else {
    ispause = false;
    play();
  }
}

function play() {
  isplay = true;
  paused.style.display = "none";
  clearInterval(myinterval);
  audio.volume = 1;
  audio.play();
}

function pause() {
  if (isplay) {
    isplay = false;
    paused.style.display = "block";
    myinterval = setInterval(function() {
      audio.volume -= 0.03;
      if (audio.volume <= 0.03) {
        clearInterval(myinterval);
        audio.pause();
      }
    }, 100);
  }
}

#paused {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 15px;
  color: #811;
  width: 100px;
  text-align: center;
  display: none;
}

<div id=paused>PAUSED</div>

Answer 2

Этот ответ является доработкой предыдущего в плане того, что теперь когда курсор выходит за пределы страницы, частотная характеристика музыки плавно меняется в сторону выделения низких частот и восстанавливается после возвращения курсора на страницу:

<style>
#paused{
    position: absolute;
    left: 50%;
    margin-left: -50px;
    bottom: 15px;
    color: #811;
    width: 100px;
    text-align: center;
}
</style>    
<div id=paused>PAUSED</div>
<script>
let myinterval;
let audio = new Audio("sound.mp3");
let api = false;
document.onclick = () => {
    if (!api){
        api = true;
        let a = new AudioContext();
        pt = [a.createMediaElementSource(audio), a.createBiquadFilter(), a.destination];
        pt[1].frequency.value = 18000;
        pt[1].Q.value = 15;
        pt[1].type = "lowpass";
        for (let i = 0; i < 2; i ++) pt[i].connect(pt[i + 1]);
    }
    if (audio.paused){
        audio.play();
        paused.hidden = true;
    } else {
        audio.pause();
        paused.hidden = false;
    }
}
document.onmouseover = () => {
    if (!audio.paused){
        clearInterval(myinterval);
        myinterval = setInterval(function(){
            pt[1].frequency.value *= 1.2;
            if (pt[1].frequency.value >= 18000){
                clearInterval(myinterval);
            }
        }, 100);
    }
}
document.onmouseleave = () => {
    if (!audio.paused){
        clearInterval(myinterval);
        pt[1].frequency.value = 8000;
        myinterval = setInterval(function(){
            pt[1].frequency.value /= 1.05;
            if (pt[1].frequency.value <= 500) clearInterval(myinterval);
        }, 100);
    }
}
</script>

Аудиофайл должен находиться в пределах того же самого домена, что и HTML-документ.

БЛОГ НА HUSL

Эффект с музыкой JS

Ответы (2 шт):