64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { useEffect, useRef } from 'react'
|
|
|
|
interface AmbientSoundProps {
|
|
url: string
|
|
volume?: number
|
|
}
|
|
|
|
export function AmbientSound({ url, volume = 0.5 }: AmbientSoundProps) {
|
|
const audioRef = useRef<HTMLAudioElement | null>(null)
|
|
const targetVolumeRef = useRef<number>(volume)
|
|
|
|
targetVolumeRef.current = volume
|
|
|
|
useEffect(() => {
|
|
const audio = new Audio(url)
|
|
audio.loop = true
|
|
audio.volume = 0
|
|
audioRef.current = audio
|
|
|
|
let componentsMounted = true
|
|
|
|
const attemptPlay = () => {
|
|
if (!audioRef.current || !componentsMounted) return
|
|
|
|
audio.volume = targetVolumeRef.current
|
|
|
|
if (audio.volume > 0 && audio.paused) {
|
|
audio.play().catch((err) => {
|
|
console.warn('Autoplay management holding clip playback execution.', err)
|
|
})
|
|
}
|
|
}
|
|
|
|
attemptPlay()
|
|
|
|
window.addEventListener('click', attemptPlay)
|
|
window.addEventListener('keydown', attemptPlay)
|
|
|
|
return () => {
|
|
componentsMounted = false
|
|
window.removeEventListener('click', attemptPlay)
|
|
window.removeEventListener('keydown', attemptPlay)
|
|
audio.pause()
|
|
audio.src = ''
|
|
audioRef.current = null
|
|
}
|
|
}, [url])
|
|
|
|
useEffect(() => {
|
|
const audio = audioRef.current
|
|
if (!audio) return
|
|
|
|
if (volume === 0) {
|
|
if (!audio.paused) audio.pause()
|
|
} else {
|
|
audio.volume = volume
|
|
if (audio.paused) {
|
|
audio.play().catch(() => {})
|
|
}
|
|
}
|
|
}, [volume])
|
|
|
|
return null
|
|
} |