xinghen.work/src/components/ProtectedAudio.tsx

import { useEffect, useState } from 'react'
import { privateImageUrl } from '../api'

export function ProtectedAudio({ src }: { src: string }) {
  const [url, setUrl] = useState('')
  useEffect(() => {
    let alive = true
    let created = ''
    privateImageUrl(src).then(value => { created = value; if (alive) setUrl(value); else URL.revokeObjectURL(value) }).catch(() => setUrl(''))
    return () => { alive = false; if (created) URL.revokeObjectURL(created) }
  }, [src])
  return url ? <audio controls preload="none" src={url}>您的浏览器不支持音频播放</audio> : null
}