React – 检测音频能否自动播放

检测音频能否自动播放

import { useEffect, useState } from  react 

export const useAllowAutoPlay = () => {

    const [allowAutoPlay, setAllowAutoPlay] = useState(false)

    useEffect(() => {
        const audio = new Audio( data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA )
        audio.onended = () => setAllowAutoPlay(true)
        audio.play().catch(() => {
            setAllowAutoPlay(false)
            // Mobile
            window.addEventListener( touchstart , _ => {
                window.removeEventListener( touchstart , _ => { });
                setAllowAutoPlay(true)
            })
            // Web
            window.addEventListener( mousedown , _ => {
                window.removeEventListener( mousedown , _ => { });
                setAllowAutoPlay(true)
            })
        })
        return () => audio.remove()
    }, [])

    return {
        allowAutoPlay
    }

}

不同格式的静音音频

WAV

data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA

MP3

data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV

OGG

data:audio/ogg;base64,T2dnUwACAAAAAAAAAAAyzN3NAAAAAGFf2X8BM39GTEFDAQAAAWZMYUMAAAAiEgASAAAAAAAkFQrEQPAAAAAAAAAAAAAAAAAAAAAAAAAAAE9nZ1MAAAAAAAAAAAAAMszdzQEAAAD5LKCSATeEAAAzDQAAAExhdmY1NS40OC4xMDABAAAAGgAAAGVuY29kZXI9TGF2YzU1LjY5LjEwMCBmbGFjT2dnUwAEARIAAAAAAAAyzN3NAgAAAKWVljkCDAD/+GkIAAAdAAABICI=