obergodmar
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { useEffect, useMemo } from 'react'
|
|
import { randomNumber, soundLoad, UI_MUSIC_VOLUME } from '../../utils'
|
|
import Sound from '../../modules/sound'
|
|
|
|
interface Props {
|
|
music: string[]
|
|
setPlaying: (value: boolean) => void
|
|
setCurrentPlaying: (value: Sound | undefined) => void
|
|
}
|
|
|
|
export const MusicComponent = ({ music, setPlaying, setCurrentPlaying }: Props) => {
|
|
const musicArray = useMemo(() => (
|
|
music.map(sound => soundLoad(sound, UI_MUSIC_VOLUME))
|
|
), [music])
|
|
|
|
useEffect(() => {
|
|
musicArray.forEach(sound => {
|
|
sound.audio.onplay = () => {
|
|
setPlaying(true)
|
|
setCurrentPlaying(sound)
|
|
}
|
|
sound.audio.onended = () => {
|
|
musicArray[randomNumber(0, musicArray.length)].playMusic()
|
|
}
|
|
})
|
|
setCurrentPlaying(musicArray[randomNumber(0, musicArray.length)])
|
|
|
|
return () => {
|
|
musicArray.forEach(({ audio }) => {
|
|
audio.onplay = null
|
|
audio.onended = null
|
|
audio.pause()
|
|
audio.currentTime = 0
|
|
})
|
|
setCurrentPlaying(undefined)
|
|
}
|
|
}, [musicArray, setPlaying, setCurrentPlaying])
|
|
|
|
return null
|
|
}
|
|
|
|
MusicComponent.displayName = 'MusicComponent'
|