Add new places; add music component; add audio module; add touch events; fixes

src/components/music-component/music-component.ts

@@ -0,0 +1,42 @@
+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'