Javascript Fade Audio

[heinetz]

Hallo Forum,

ich habe in einer REACT-Komponente einen Mute-Button für ein Video einbaut. Die Methode ist schlicht:

mute = muted => this.setState({ muted });

Nun soll der Sound nicht abrupt aus- und angehen, sondern ein- und ausgefaded werden.

Mein Versuch:

  mute = muted => {
    console.log('mute()');
    console.log(this.intro.current.volume);
    this.intro.current.volume = 0.5;
    const fadeAudio = setTimeout(() => {
      if (this.intro.current.volume >= 0) {
        console.log(this.intro.current.volume);
        this.intro.current.volume = this.intro.current.volume - 0.1;
        console.log(this.intro.current.volume);
      } else {
        clearTimeout(fadeAudio);
        this.setState({ muted });
      }
    }, 100);
  };

... scheint grundsätzlich zu funktionieren. Die Ausgabe sieht aber so aus:

0.5
0.4
0.30000000000000004
0.10000000000000003
2.7755575615628914e-17

Das Incrementieren scheint irgendwie fehlerhaft zu sein, was ich nicht verstehe. Wo ich mir auch nicht sicher bin, ist der Timeout. Wird der auf diese Weise sauber wieder entfernt?

danke für Tipps und

gruss, heinetz