CODEWITHSUNDEEP
jqueryaudiovolumesmoothing
Igor Laszlo
Igor Laszlo

Reputation: 742

Audio loop smooth start/end

I have two buttons. When I click on the start, it starts the audio which plays in loop, and with the end button click it stops playing. Now the audio starts and ends as it is, but I would like to fade the audio in smoothly and also stop smoothly and not suddenly. I read a lot of solution but non of them uses the same embed method like me and no idea how to integrate them.

My code:

$(document).ready(function() {

    var audioElement = document.createElement('audio');
    audioElement.loop=true;
    audioElement.volume=0;
    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
    audioElement.addEventListener('ended', function() {
        this.pause();
    }, true);

    $('.button-start').click(function(){
        audioElement.setAttribute('src', 'media/music.mp3');
        audioElement.animate({volume: 1}, 1000);
        audioElement.play();
    });
    $('.button-end').click(function(){
        audioElement.animate({volume: 0}, 1000);
        audioElement.pause();
        audioElement.currentTime = 0;
    });

});

I added audioElement.volume=0 and on start click function audioElement.animate({volume: 1}, 1000);, and volume:0 on stop click function, but in this case the audio does not even start.

If someone knows the solution, please try to give me a clear answer because I am coding my personal websites by hobby, I am not professional.

Upvotes: 0

Views: 80

Answers (1)

SKJ
SKJ

Reputation: 2326

The best way is to make it with a loop using setInterval function.

$(document).ready(function() {
  var audioElement      = document.createElement('audio');
  audioElement.id       = 'audio-player';
  audioElement.controls = 'controls';
  audioElement.loop     = true;
  audioElement.type     = 'audio/mpeg';
  audioElement.src      = 'https://upnow-prod.ff45e40d1a1c8f7e7de4e976d0c9e555.r2.cloudflarestorage.com/d1ssYtCPdBd5hm6PO3SfNKbf51I2/80b1f91d-045f-4a2d-8dbd-34ebd2bf65f9?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=cdd12e35bbd220303957dc5603a4cc8e%2F20231005%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20231005T150523Z&X-Amz-Expires=43200&X-Amz-Signature=f6196f97ceed3262d53b4c94876f7947bca5d9dbbe724de5d593a900cbd6ad47&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22BF3%20-%20Prgressive.mp3%22';
  document.getElementById('song').appendChild(audioElement);

  audioElement.addEventListener('ended', function() {
      this.currentTime = 0;
      this.play();
  }, false);
  audioElement.addEventListener('ended', function() {
      this.pause();
  }, true);

  $('.button-start').click(function(){
      audioElement.play();
      fadeInAudio(audioElement, 1000);
  });
  $('.button-stop').click(function(){
      fadeOutAudio(audioElement, 1000);
  });
});

function fadeInAudio(audio, fadeTime){ 
  audio.volume = 0; // set volume to the minimum 
  var steps = 500;
  var stepTime = fadeTime/steps;
  var audioIncrement = parseFloat(audio.volume + ("0.00" + steps));

  var timer = setInterval(function(){
    audio.volume += audioIncrement;
    console.clear();
    console.log(audio.volume);

    if (audio.volume >= 0.99){ //if its already audible stop the loop
       console.clear();
       console.log("1");
       audio.volume = 1;
       clearInterval(timer);
    }
  }, stepTime);
}

function fadeOutAudio(audio, fadeTime){ 
  audio.volume = 1; // set volume to the maximum 
  var steps = 150;
  var stepTime = fadeTime/steps;
  var audioDecrement = audio.volume / steps;

  var timer = setInterval(function(){
    audio.volume -= audioDecrement;
    console.clear();
    console.log(audio.volume);

    if (audio.volume <= 0.03){ //if its already inaudible stop the loop
       console.clear();
       console.log("0");
       audio.volume = 0;
       audio.pause(); 
       clearInterval(timer);
    }
  }, stepTime);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song"></div>

<button class="button-start">Start</button>
<button class="button-stop">Stop</button>

Upvotes: 0

Related Questions