OpenAI Speech API音频链接加载后canplaythrough事件不触发求助

核心原因 #

后端返回的audio_url只是OpenAI Speech API生成的临时链接，但此时音频文件可能还在流式生成过程中并未完全就绪。直接设置给Audio对象时，浏览器请求该链接会因为文件未生成完成而失败或超时，导致canplaythrough事件无法触发；3秒延迟能工作，只是刚好等音频生成完毕了。

可靠解决方案：轮询检查音频可用性 #

我们需要先确认音频链接对应的文件已经可以正常访问，再将其设置给Audio对象。具体步骤：

• 轮询请求音频链接，验证返回状态是否正常（200 OK）且是音频类型
• 确认可用后，再设置audio.src并监听加载事件
• 加入超时机制，避免无限等待

修改后的完整代码 #

speech.addEventListener('click', async (e) => {
    e.preventDefault();
    let speechText = currentAnswer.replace(/[^\p{L}\d\s.,\-+!?:;]/gu, '');
    
    if (paidVoice === 2) {
        // 事件转Promise工具函数，新增错误处理
        function getPromiseFromEvent(item, successEvent, errorEvent) {
            return new Promise((resolve, reject) => {
                const successListener = () => {
                    item.removeEventListener(successEvent, successListener);
                    if (errorEvent) item.removeEventListener(errorEvent, errorListener);
                    resolve();
                };
                const errorListener = () => {
                    item.removeEventListener(successEvent, successListener);
                    if (errorEvent) item.removeEventListener(errorEvent, errorListener);
                    reject(new Error('音频加载失败'));
                };
                
                item.addEventListener(successEvent, successListener);
                if (errorEvent) item.addEventListener(errorEvent, errorListener);
            });
        }

        // 轮询检查音频链接是否可用
        async function checkAudioAvailable(audioUrl, maxAttempts = 10, interval = 500) {
            let attempts = 0;
            while (attempts < maxAttempts) {
                try {
                    const response = await fetch(audioUrl, { method: 'HEAD' });
                    // 检查状态码和内容类型
                    if (response.ok && response.headers.get('Content-Type')?.includes('audio/mpeg')) {
                        return true;
                    }
                } catch (err) {
                    // 链接不可用时忽略错误，继续轮询
                }
                attempts++;
                await new Promise(resolve => setTimeout(resolve, interval));
            }
            throw new Error('音频生成超时，请重试');
        }
        
        async function waitForAudioLoad() {
            const audio = new Audio();
            const audioURL = await getOpenaiVoice(voiceAPI, voiceID, speechText);
            
            // 先轮询确认音频可用
            await checkAudioAvailable(audioURL);
            
            // 设置src并等待加载完成
            audio.src = audioURL;
            
            // 监听加载完成事件，同时处理错误
            try {
                await getPromiseFromEvent(audio, "canplay", "error");
                audio.play();
                console.log('音频开始播放');
            } catch (err) {
                console.error(err);
                // 这里可以添加错误提示逻辑
            }
        }
        waitForAudioLoad();
    }
});

关键说明 #

• checkAudioAvailable函数通过HEAD请求检查音频链接的可用性，避免下载整个音频文件，节省带宽
• 增加了错误事件监听，能捕获音频加载失败的情况，避免代码陷入无限等待
• 轮询的次数和间隔可以根据实际情况调整（比如maxAttempts设为10，interval设500，最多等待5秒）
• 使用canplay替代canplaythrough，因为只要有足够的数据开始播放就可以触发，不需要等全部加载完成，提升用户体验

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