This commit is contained in:
Kendall Garner
2024-01-24 19:59:32 -08:00
parent c8701d1da4
commit 1f3cd6ca48
+20 -16
View File
@@ -39,6 +39,9 @@ type WebAudio = {
gain: GainNode; gain: GainNode;
}; };
const EMPTY_SOURCE =
'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBIAAAABAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAAAAAABkYXRhAAAAAA==';
export const AudioPlayer = forwardRef( export const AudioPlayer = forwardRef(
( (
{ {
@@ -69,6 +72,7 @@ export const AudioPlayer = forwardRef(
const [player2Source, setPlayer2Source] = useState<MediaElementAudioSourceNode | null>( const [player2Source, setPlayer2Source] = useState<MediaElementAudioSourceNode | null>(
null, null,
); );
const calculateReplayGain = useCallback( const calculateReplayGain = useCallback(
(song: Song): number => { (song: Song): number => {
if (playback.replayGainMode === 'no') { if (playback.replayGainMode === 'no') {
@@ -244,10 +248,7 @@ export const AudioPlayer = forwardRef(
useEffect(() => { useEffect(() => {
if (webAudio && player1Source) { if (webAudio && player1Source) {
if (player1 === undefined) { if (player1 && currentPlayer === 1) {
player1Source.disconnect();
setPlayer1Source(null);
} else if (currentPlayer === 1) {
webAudio.gain.gain.setValueAtTime(calculateReplayGain(player1), 0); webAudio.gain.gain.setValueAtTime(calculateReplayGain(player1), 0);
} }
} }
@@ -255,10 +256,7 @@ export const AudioPlayer = forwardRef(
useEffect(() => { useEffect(() => {
if (webAudio && player2Source) { if (webAudio && player2Source) {
if (player2 === undefined) { if (player2 && currentPlayer === 2) {
player2Source.disconnect();
setPlayer2Source(null);
} else if (currentPlayer === 2) {
webAudio.gain.gain.setValueAtTime(calculateReplayGain(player2), 0); webAudio.gain.gain.setValueAtTime(calculateReplayGain(player2), 0);
} }
} }
@@ -266,9 +264,12 @@ export const AudioPlayer = forwardRef(
const handlePlayer1Start = useCallback( const handlePlayer1Start = useCallback(
async (player: ReactPlayer) => { async (player: ReactPlayer) => {
if (!webAudio || player1Source) return; if (!webAudio) return;
if (webAudio.context.state !== 'running') { if (player1Source) {
await webAudio.context.resume(); if (webAudio.context.state !== 'running') {
await webAudio.context.resume();
}
return;
} }
const internal = player.getInternalPlayer() as HTMLMediaElement | undefined; const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
@@ -284,9 +285,12 @@ export const AudioPlayer = forwardRef(
const handlePlayer2Start = useCallback( const handlePlayer2Start = useCallback(
async (player: ReactPlayer) => { async (player: ReactPlayer) => {
if (!webAudio || player2Source) return; if (!webAudio) return;
if (webAudio.context.state !== 'running') { if (player2Source) {
await webAudio.context.resume(); if (webAudio.context.state !== 'running') {
await webAudio.context.resume();
}
return;
} }
const internal = player.getInternalPlayer() as HTMLMediaElement | undefined; const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
@@ -312,7 +316,7 @@ export const AudioPlayer = forwardRef(
playbackRate={playbackSpeed} playbackRate={playbackSpeed}
playing={currentPlayer === 1 && status === PlayerStatus.PLAYING} playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
progressInterval={isTransitioning ? 10 : 250} progressInterval={isTransitioning ? 10 : 250}
url={player1?.streamUrl} url={player1?.streamUrl || EMPTY_SOURCE}
volume={volume} volume={volume}
width={0} width={0}
onEnded={handleOnEnded} onEnded={handleOnEnded}
@@ -331,7 +335,7 @@ export const AudioPlayer = forwardRef(
playbackRate={playbackSpeed} playbackRate={playbackSpeed}
playing={currentPlayer === 2 && status === PlayerStatus.PLAYING} playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
progressInterval={isTransitioning ? 10 : 250} progressInterval={isTransitioning ? 10 : 250}
url={player2?.streamUrl} url={player2?.streamUrl || EMPTY_SOURCE}
volume={volume} volume={volume}
width={0} width={0}
onEnded={handleOnEnded} onEnded={handleOnEnded}