Make <Audio> to handle volume change (#23187)
This commit is contained in:
parent
624d7ae51d
commit
3cf60ba267
1 changed files with 18 additions and 16 deletions
|
@ -59,7 +59,7 @@ class Audio extends React.PureComponent {
|
||||||
duration: null,
|
duration: null,
|
||||||
paused: true,
|
paused: true,
|
||||||
muted: false,
|
muted: false,
|
||||||
volume: 0.5,
|
volume: 1,
|
||||||
dragging: false,
|
dragging: false,
|
||||||
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
|
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() {
|
_pack() {
|
||||||
return {
|
return {
|
||||||
src: this.props.src,
|
src: this.props.src,
|
||||||
volume: this.audio.volume,
|
volume: this.state.volume,
|
||||||
muted: this.audio.muted,
|
muted: this.state.muted,
|
||||||
currentTime: this.audio.currentTime,
|
currentTime: this.audio.currentTime,
|
||||||
poster: this.props.poster,
|
poster: this.props.poster,
|
||||||
backgroundColor: this.props.backgroundColor,
|
backgroundColor: this.props.backgroundColor,
|
||||||
|
@ -115,7 +115,8 @@ class Audio extends React.PureComponent {
|
||||||
this.audio = c;
|
this.audio = c;
|
||||||
|
|
||||||
if (this.audio) {
|
if (this.audio) {
|
||||||
this.setState({ volume: this.audio.volume, muted: this.audio.muted });
|
this.audio.volume = 1;
|
||||||
|
this.audio.muted = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -202,7 +203,9 @@ class Audio extends React.PureComponent {
|
||||||
const muted = !this.state.muted;
|
const muted = !this.state.muted;
|
||||||
|
|
||||||
this.setState({ muted }, () => {
|
this.setState({ muted }, () => {
|
||||||
this.audio.muted = muted;
|
if (this.gainNode) {
|
||||||
|
this.gainNode.gain.value = muted ? 0 : this.state.volume;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -280,7 +283,9 @@ class Audio extends React.PureComponent {
|
||||||
|
|
||||||
if(!isNaN(x)) {
|
if(!isNaN(x)) {
|
||||||
this.setState({ volume: x }, () => {
|
this.setState({ volume: x }, () => {
|
||||||
this.audio.volume = x;
|
if (this.gainNode) {
|
||||||
|
this.gainNode.gain.value = this.state.muted ? 0 : x;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 15);
|
}, 15);
|
||||||
|
@ -313,20 +318,12 @@ class Audio extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLoadedData = () => {
|
handleLoadedData = () => {
|
||||||
const { autoPlay, currentTime, volume, muted } = this.props;
|
const { autoPlay, currentTime } = this.props;
|
||||||
|
|
||||||
if (currentTime) {
|
if (currentTime) {
|
||||||
this.audio.currentTime = currentTime;
|
this.audio.currentTime = currentTime;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (volume !== undefined) {
|
|
||||||
this.audio.volume = volume;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (muted !== undefined) {
|
|
||||||
this.audio.muted = muted;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (autoPlay) {
|
if (autoPlay) {
|
||||||
this.togglePlay();
|
this.togglePlay();
|
||||||
}
|
}
|
||||||
|
@ -336,11 +333,16 @@ class Audio extends React.PureComponent {
|
||||||
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
const AudioContext = window.AudioContext || window.webkitAudioContext;
|
||||||
const context = new AudioContext();
|
const context = new AudioContext();
|
||||||
const source = context.createMediaElementSource(this.audio);
|
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);
|
this.visualizer.setAudioContext(context, source);
|
||||||
source.connect(context.destination);
|
source.connect(gainNode);
|
||||||
|
gainNode.connect(context.destination);
|
||||||
|
|
||||||
this.audioContext = context;
|
this.audioContext = context;
|
||||||
|
this.gainNode = gainNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDownload = () => {
|
handleDownload = () => {
|
||||||
|
|
Loading…
Reference in a new issue