fix(音频消息): 优化音频URL检测逻辑避免CORS问题
修改音频URL检测逻辑,对于阿里云OSS等外部资源直接返回true,避免fetch HEAD请求触发CORS问题。同时调整crossOrigin设置策略,仅在需要访问音频数据时设置该属性。移除了冗余的备用播放方案,简化错误处理流程。
This commit is contained in:
@@ -35,13 +35,20 @@ const parseAudioUrl = (audioUrl: string): AudioData => {
|
||||
};
|
||||
};
|
||||
|
||||
// 测试音频URL是否可访问
|
||||
// 测试音频URL是否可访问(避免CORS问题)
|
||||
const testAudioUrl = async (url: string): Promise<boolean> => {
|
||||
try {
|
||||
// 对于阿里云OSS等外部资源,直接返回true,让Audio对象自己处理
|
||||
// 避免fetch HEAD请求触发CORS问题
|
||||
if (url.includes(".aliyuncs.com") || url.includes("oss-")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const response = await fetch(url, { method: "HEAD" });
|
||||
return response.ok;
|
||||
} catch (error) {
|
||||
return false;
|
||||
// 如果fetch失败(可能是CORS问题),返回true让Audio对象尝试加载
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -88,8 +95,14 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
|
||||
|
||||
const newAudio = new Audio();
|
||||
|
||||
// 设置跨域属性
|
||||
newAudio.crossOrigin = "anonymous";
|
||||
// 对于阿里云OSS等外部资源,不设置crossOrigin避免CORS问题
|
||||
// 只有在需要访问音频数据时才设置crossOrigin
|
||||
if (
|
||||
!actualAudioUrl.includes(".aliyuncs.com") &&
|
||||
!actualAudioUrl.includes("oss-")
|
||||
) {
|
||||
newAudio.crossOrigin = "anonymous";
|
||||
}
|
||||
newAudio.preload = "metadata";
|
||||
|
||||
audioRefs.current[audioId] = newAudio;
|
||||
@@ -120,37 +133,9 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
|
||||
await newAudio.play();
|
||||
setPlayingAudioId(audioId);
|
||||
} catch (error) {
|
||||
// 尝试备用方案:不设置crossOrigin
|
||||
try {
|
||||
const fallbackAudio = new Audio(actualAudioUrl);
|
||||
audioRefs.current[audioId] = fallbackAudio;
|
||||
|
||||
// 重新绑定事件监听器
|
||||
fallbackAudio.addEventListener("timeupdate", () => {
|
||||
const currentProgress =
|
||||
(fallbackAudio.currentTime / fallbackAudio.duration) * 100;
|
||||
setAudioProgress(prev => ({
|
||||
...prev,
|
||||
[audioId]: currentProgress,
|
||||
}));
|
||||
});
|
||||
|
||||
fallbackAudio.addEventListener("ended", () => {
|
||||
setPlayingAudioId(null);
|
||||
setAudioProgress(prev => ({ ...prev, [audioId]: 0 }));
|
||||
});
|
||||
|
||||
fallbackAudio.addEventListener("error", e => {
|
||||
setPlayingAudioId(null);
|
||||
setAudioError("音频播放失败,请稍后重试");
|
||||
});
|
||||
|
||||
await fallbackAudio.play();
|
||||
setPlayingAudioId(audioId);
|
||||
} catch (fallbackError) {
|
||||
setPlayingAudioId(null);
|
||||
setAudioError("音频播放失败,请检查音频格式或网络连接");
|
||||
}
|
||||
setPlayingAudioId(null);
|
||||
setAudioError("音频播放失败,请检查音频格式或网络连接");
|
||||
console.error("音频播放错误:", error);
|
||||
}
|
||||
} else {
|
||||
if (isPlaying) {
|
||||
|
||||
Reference in New Issue
Block a user