CODEWITHSUNDEEP
javascriptjqueryaudio
Coco Yuan
Coco Yuan

Reputation: 107

How to fade in and out of audio?

I have an audio on my website and I have a button to play/pause it. Everything is working fine at the moment but I just find the play and pause too abrupt. I would like to fade in and out the audio whenever play/pause button is pressed. How would I be able to do this?

Any help is appreciated, thanks in advance!

Please see my codepen here:https://codepen.io/cocotx/pen/rNLjbPK?editors=1010

<audio id="audio" loop>
        <source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
      </audio>

<button id="play-pause">play/pause</button>

const song = document.querySelector("#audio");

  let pPause = document.querySelector('#play-pause');

  let playing = true;
  function playPause() {
      if (playing) {
          const song = document.querySelector('#audio');

          song.play();
          playing = false;
      } else {

          song.pause();
          playing = true;
      }
  }

$('#play-pause').click(function() {
    playPause();
  });

Upvotes: 1

Views: 2331

Answers (4)

Antony Harris
Antony Harris

Reputation: 49

This has worked for me without needing jQuery and is very configurable. It also has a delay before the fade-in starts

function fadeIn(audioElement, maxVol, startDelay, fadeInTime, steps) {
  let i = 0;
  let interval = fadeInTime / steps;
  setTimeout(function () {
    let intervalId = setInterval(function() {
      let volume = (maxVol / steps) * i;
      audioElement.volume = volume;
      if(++i >= steps)
        clearInterval(intervalId);
    }, interval);
  }, startDelay);
}

Upvotes: 1

Coco Yuan
Coco Yuan

Reputation: 107

I ended up using jQuery to animate the audio volume and this worked really well for me:

let playing = true;
  function playPause() {
      if (playing) {
          const song = document.querySelector('#audio');

          //relevant part to fading in audio
          song.volume = 0;
          $('#audio').animate({volume: 1.0}, 1000);
          song.play();

          playing = false;
      } else {
          //relevant part to fading out audio
          song.volume = 1;
          $('#audio').animate({volume: 0}, 1000, function() {
            song.pause();
          });

          playing = true;
      }
  }

I find this suits my need the most but still appreciates anyone who's tried to help!

Upvotes: 2

Vijay Kumar
Vijay Kumar

Reputation: 197

You can simply achieve those fade in and fade out effect using CSS.

const song = document.querySelector("#audio");

let pPause = document.querySelector('#play-pause');

let playing = true;

function playPause() {
  if (playing) {
    const song = document.querySelector('#audio');
    song.play();
    playing = false;
  } else {

    song.pause();
    playing = true;
  }
}

$('#play-pause').click(function() {
  playPause();
});
#play-pause {
  opacity: 0.4;
  transition: opacity 0.5s ease-out;
}

#play-pause:hover {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" loop>
        <source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
      </audio>

<button id="play-pause">play/pause</button>

I just use hover with transition property. If you want total fade out, you can change the opacity to 0, and of course, you can change the transition as you want. Hope this will help. Have a great day.

Upvotes: -1

JohnAlexINL
JohnAlexINL

Reputation: 626

If you have a variable set for audiolength and currenttime, and setfade to the length of the fade in and out you want, you could accomplish this quick and easy.

Moreoreless, the function would look like this. You're going to need to call this function when the page first loads, but it'll keep itself running.

volc = 1 / fade

function Fade() {
    if (currenttime + fade >= audiolength) {
    song.volume = song.volume - volc;
    }

    if (currenttime <= fade) {
        song.volume = song.volume + volc
    }

    setTimeout(Fade, 50)
}

If you have any more questions, I'm happy to help!

Upvotes: 0

Related Questions