Feature request, or: add fade-in before the audio / fade-out affter the audio

[sangtv123]

Hey, thank you for testing and contributing to wavesurfer.js!

Please make sure you can check all of these points below before opening an issue:

(You don't have to post this section)

• I have checked the FAQ and it doesn't solve my problem.
• I have checked the documentation and it doesn't solve my problem
• I have searched for already open issues which desribe my problem.
• The issue I'm having is related to and caused by wavesurfer.js, not by other software (which maybe packages and uses wavesurfer incorrectly) – In that case you should open the issue on the respective project pages.

Please make sure you provide the following information (if applicable):

Wavesurfer.js version(s):

Browser and operating system version(s):

Code needed to reproduce the issue:

(Please reduce your code as much as possible and only post the minimum code needed to reproduce the issue. A Code pen is an excellent way to share such code)

Use behaviour needed to reproduce the issue:

[daslicht]

I solved it manually but just setting teh volume 2 0 before playback and then just fade it in via js

[entonbiba]

@quynhanhsang you can do this two ways, one using requestAnimationFrame. I'll see if I can add this as a option to the library soon for fade in and fade out effects.

var start = 0;

function fadeIn(time) {
    if (!start){
        start = time;
    }
    var progress = time - start;
    wavesurfer.setVolume(progress / 5000);
    if (progress < 5000) {
        window.requestAnimationFrame(fadeIn);
    }        
}
 
wavesurfer.on('waveform-ready', function () {
    wavesurfer.setVolume(0);
});

wavesurfer.on('play', function () {
    window.requestAnimationFrame(fadeIn);
});

wavesurfer.on('finish', function () {
    start = 0;
});

[lucastheis]

Are there any downsides to fading-in using AudioContext() as follows (assuming backend is set to 'MediaElement')?

const audioContext = new AudioContext()
const mediaNode = audioContext.createMediaElementSource(wavesurfer.media);
const gainNode = audioContext.createGain();
mediaNode.connect(gainNode).connect(audioContext.destination);

gainNode.gain.setValueAtTime(0, start);
gainNode.gain.linearRampToValueAtTime(1, start + duration);

Using requestAnimationFrame has the limitation that it only updates the volume every 16ms or so, which may be too slow for fast fade-ins.

[zerosonesfun]

For me, using the above solutions work on desktop, but I failed to make them work on my iPhone. I thought that maybe I needed to tie a user interaction to the fade-out, but that didn't work either. Also, using AudioContext() with the gainNode route as mentioned directly above worked on desktop (not mobile), but there was a skip in the audio glitch. Right as the fade-out started, it would skip. The first @entonbiba solution above works best for me. But again, only on desktop browsers.

I'm fine with this because I know how insane and frustrating iOS and mobile browsers in general are when it comes to audio. At least I have fade-out on desktop now. 👍

Example here: https://thirtythreeseconds.com/browse/