Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Access the fade method

See original GitHub issue

How can I access the fade method to fade in and out tracks? It’s probably obvious but I can’t find it…

I tried using the player function in useAudioPlayer but that doesn’t seem to be the right approach

 const { togglePlayPause, ready, loading, playing, stop, play, player } = useAudioPlayer({
    src: file,
    format: "mp3",
    loop: true,
    autoplay: true,
    html5: isIos,
    // try here? nope
    onplay: () => {
      player.fade(0, 1, 5000);

  useEffect(() => {
    // trying here - nope
    isPlaying ? play() : player.fade(1, 0, 100)
  }, [isPlaying]);

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

E-Kuerschnercommented, Dec 20, 2021

@brianshano sorry for such a long delay for returning to this. I think you should be able to access fade through the player object in your useEffect, however you will need to have the player as a dependency in the array as it initially starts as null.

useEffect(() => {
  if (player) {
    isPlaying ? play() : player.fade(1, 0, 100)
  }, [player, isPlaying]);
E-Kuerschnercommented, May 12, 2021

@brianshano thanks for the issue! Your approach looks very straight forward, I’m actually surprised it doesn’t work. Tbh I have never used the fader method in my own apps, so I’m glad someone such as yourself has come along with that use case. Let me take a look next week and see if I can get a release out for you

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Fading Method: Baby Sleep Training Technique THAT ...
It is considered to be one of the more gentle sleep training methods because it is based of working with your baby's natural...
Read more >
Can't Get on Board with Cry It Out? Try the Fade It Out Sleep ...
Introducing the gentle sleep training method where you slowly fade out your baby's bedtime routine until it's no longer necessary.
Read more >
How To Use The Fade Tool - Logic Pro X Tutorial - YouTube
In this video I go into how to use the fade tool to draw fade -ins and fade -outs into your audio regions,...
Read more >
jQuery Effect fadeOut() Method - W3Schools
The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). Note: Hidden elements will not be ...
Read more >
Fading Sleep Training: A Gentle Approach to Baby Sleep
Unlike other sleep training methods, the fading sleep training method uses a gentle approach to teaching your baby how to fall asleep independently....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found