diff options
author | Mina Her <minacle@live.com> | 2023-01-25 00:24:46 +0900 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2023-01-24 20:37:37 +0100 |
commit | 78b822c61d19bc258117a7b186da491c9f793a2e (patch) | |
tree | 0672c13eaa8bc7abdf9d6814a08ef9d67c7f9cbe /app/javascript | |
parent | cf3ad10e7557a03295d1b86e981a501097615127 (diff) |
[Glitch] Make <Audio> to handle volume change
Port 3cf60ba26735e8d3a5113241a488e1e96969c21a to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/flavours/glitch/features/audio/index.js | 34 |
1 files changed, 18 insertions, 16 deletions
diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js index 014a0a213..3a0d49100 100644 --- a/app/javascript/flavours/glitch/features/audio/index.js +++ b/app/javascript/flavours/glitch/features/audio/index.js @@ -59,7 +59,7 @@ class Audio extends React.PureComponent { duration: null, paused: true, muted: false, - volume: 0.5, + volume: 1, dragging: false, revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'), }; @@ -80,8 +80,8 @@ class Audio extends React.PureComponent { _pack() { return { src: this.props.src, - volume: this.audio.volume, - muted: this.audio.muted, + volume: this.state.volume, + muted: this.state.muted, currentTime: this.audio.currentTime, poster: this.props.poster, backgroundColor: this.props.backgroundColor, @@ -117,7 +117,8 @@ class Audio extends React.PureComponent { this.audio = c; if (this.audio) { - this.setState({ volume: this.audio.volume, muted: this.audio.muted }); + this.audio.volume = 1; + this.audio.muted = false; } } @@ -208,7 +209,9 @@ class Audio extends React.PureComponent { const muted = !this.state.muted; this.setState({ muted }, () => { - this.audio.muted = muted; + if (this.gainNode) { + this.gainNode.gain.value = muted ? 0 : this.state.volume; + } }); } @@ -286,7 +289,9 @@ class Audio extends React.PureComponent { if(!isNaN(x)) { this.setState({ volume: x }, () => { - this.audio.volume = x; + if (this.gainNode) { + this.gainNode.gain.value = this.state.muted ? 0 : x; + } }); } }, 15); @@ -319,20 +324,12 @@ class Audio extends React.PureComponent { } handleLoadedData = () => { - const { autoPlay, currentTime, volume, muted } = this.props; + const { autoPlay, currentTime } = this.props; if (currentTime) { this.audio.currentTime = currentTime; } - if (volume !== undefined) { - this.audio.volume = volume; - } - - if (muted !== undefined) { - this.audio.muted = muted; - } - if (autoPlay) { this.togglePlay(); } @@ -342,11 +339,16 @@ class Audio extends React.PureComponent { const AudioContext = window.AudioContext || window.webkitAudioContext; const context = new AudioContext(); const source = context.createMediaElementSource(this.audio); + const gainNode = context.createGain(); + + gainNode.gain.value = this.state.muted ? 0 : this.state.volume; this.visualizer.setAudioContext(context, source); - source.connect(context.destination); + source.connect(gainNode); + gainNode.connect(context.destination); this.audioContext = context; + this.gainNode = gainNode; } handleDownload = () => { |