React.js应用音频报错：元素无支持源，点击按钮无法正常播放音频

1. 先排除代码语法造成的日志假象 #

你控制台同时输出Working和报错，本质是then的写法错误导致的：

• 当前代码里.then(console.log("Working")) 会立刻执行console.log("Working")，把console.log的返回值（undefined）当作then的成功回调传入，根本不会等音频播放成功才打印日志。也就是说你看到的“Working”不是播放成功的信号，是同步代码执行的结果，真实的播放流程全程都是失败的。

2. 触发DOMException: The element has no supported sources的真实原因 #

• 音频源本身无效：传入new Audio()的props.audio值不合法，比如是undefined、404失效链接、相对路径拼接错误，导致Audio元素拿不到可解析的音频资源
• 跨域配置不匹配：你给Audio设置crossOrigin = "anonymous"的前提是，音频资源的服务端必须返回匹配的CORS响应头，如果服务端没有配置对应头，前端单独设置这个属性反而会触发浏览器的跨域拦截，导致资源被判定为不可用
• 音频格式不兼容：传入的音频格式不在原生Audio元素的支持范围内（比如直接传m3u8、加密的音频文件），没有对应解码逻辑的情况下，浏览器会判定没有可支持的播放源
• 资源加载时机异常：你在组件函数体中直接创建Audio实例，组件每次重渲染都会新建实例，没有绑定生命周期的情况下，容易出现实例状态异常、元数据未加载完成就触发播放的问题，进而被判定为无有效源

import { useEffect, useRef } from 'react'
function WordCard(props){
    // 用ref保存音频实例，避免重复创建
    const wordAudioRef = useRef(null)

    useEffect(() => {
        // 前置校验传入的音频源有效性
        if (!props.audio) return
        const audioInstance = new Audio(props.audio)
        // 仅在确认服务端CORS配置正确时设置跨域属性
        audioInstance.crossOrigin = "anonymous"
        // 预加载音频元数据，减少播放触发延迟
        audioInstance.preload = "metadata"
        wordAudioRef.current = audioInstance
    }, [props.audio])

    const play = () => {
        if (!wordAudioRef.current) {
            console.log("音频实例未初始化，无有效播放源")
            return
        }
        wordAudioRef.current.play()
        .then(() => {
            // 修正写法：真正等待播放流程触发成功后再打印日志
            console.log("Working")
        })
        .catch(err => {
            console.log("播放失败", err)
            // 可通过networkState属性排查资源加载状态
            console.log("当前资源网络状态值：", wordAudioRef.current.networkState)
        })
    }

    return (
        <Card>
            <button onClick={play}>
                <h1>{props.word}</h1>
            </button>
        </Card>
    )
}

• 打开浏览器开发者工具的Network面板，定位对应的音频请求，确认返回状态为200，响应头包含匹配的CORS配置
• 确认音频请求返回的Content-Type属于浏览器原生支持的音频格式（如audio/mpeg、audio/wav、audio/ogg）
• 打印props.audio的实际值，确认传入的不是空值、无效路径

内容的提问来源于stack exchange，提问作者christinakerr