如何预判或恢复createMediaElementSource调用失败的问题

当使用createMediaElementSource处理跨域媒体资源时，若资源未配置正确的CORS权限，浏览器会静默返回无输出的音频节点，同时导致原媒体元素静音，仅在控制台输出警告。针对这个问题，你提出的两种方案均可行，具体实现如下：

方案1：预判失败，避免执行操作 #

通过提前检查媒体资源的跨域权限，可以在调用createMediaElementSource前就判断操作是否会失败，从而避免破坏媒体播放。

实现思路 #

1. 给媒体元素设置crossOrigin属性（如anonymous），这样当服务器拒绝跨域请求时，媒体元素会触发error事件，可提前捕获。
2. 尝试访问媒体的buffered属性：若资源存在跨域限制，访问该属性会抛出SecurityError，以此判定操作风险。

代码示例 #

async function canUseMediaElementSource(audioElement) {
    // 等待媒体加载完成或出错
    if (audioElement.readyState < 2) {
        await new Promise(resolve => {
            audioElement.addEventListener('loadedmetadata', resolve, { once: true });
            audioElement.addEventListener('error', resolve, { once: true });
        });
    }

    // 检查媒体加载是否出错
    if (audioElement.error) return false;

    // 通过访问buffered属性检测跨域限制
    try {
        audioElement.buffered.start(0);
        return true;
    } catch (e) {
        if (e instanceof DOMException && e.name === 'SecurityError') {
            return false;
        }
        throw e;
    }
}

async function createAudioNode() {
    const audioElement = document.querySelector('audio');
    if (!(await canUseMediaElementSource(audioElement))) {
        alert('无法创建音频节点：媒体资源存在跨域限制');
        return;
    }

    const audioContext = new AudioContext();
    const audioNode = audioContext.createMediaElementSource(audioElement);
    audioNode.connect(audioContext.destination);
}

方案2：检测失败后恢复播放 #

如果预判逻辑有遗漏，也可以在创建音频节点后，检测是否出现静默输出，若判定失败则断开连接，恢复原媒体元素的播放状态。

实现思路 #

1. 创建分析器节点（AnalyserNode）连接到源节点，用于检测音频输出。
2. 定期检查分析器的音频数据：若连续多次检测到全静音状态，判定操作失败。
3. 断开源节点与AudioContext的连接，关闭上下文，恢复媒体元素的正常播放。

代码示例 #

function createAudioNode() {
    const audioElement = document.querySelector('audio');
    const audioContext = new AudioContext();
    const audioNode = audioContext.createMediaElementSource(audioElement);
    
    // 创建分析器节点检测音频输出
    const analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    
    audioNode.connect(analyser);
    audioNode.connect(audioContext.destination);
    
    // 检测静音状态
    let silenceCount = 0;
    const checkInterval = setInterval(() => {
        analyser.getByteTimeDomainData(dataArray);
        // 音频时域数据全为128表示静音
        const isSilent = dataArray.every(val => val === 128);
        
        if (isSilent) {
            silenceCount++;
            if (silenceCount >= 3) {
                clearInterval(checkInterval);
                // 断开连接并恢复媒体播放
                audioNode.disconnect();
                audioContext.close();
                if (!audioElement.paused) {
                    audioElement.play().catch(err => console.error(err));
                }
                alert('音频节点创建失败：已恢复媒体播放');
            }
        } else {
            silenceCount = 0;
        }
    }, 100);
}

总结 #

两种方案均能有效解决跨域导致的静默失败问题：

• 预判方案更高效，能从源头避免无效操作；
• 恢复方案可作为兜底，处理预判逻辑覆盖不到的边缘情况。

内容的提问来源于stack exchange，提问作者Aran-Fey