fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(AudioMessage): 移除调试日志并优化音频播放逻辑

Browse Source 
清理了多余的console日志输出，简化了音频播放的错误处理流程
This commit is contained in:
超级老白兔
2025-09-09 18:45:44 +08:00
parent 98a9aa7701
commit 543e274737
1 changed files with 0 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Cunkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/AudioMessage/AudioMessage.tsx
View File

@@ -27,7 +27,6 @@ const parseAudioUrl = (audioUrl: string): AudioData => {
}
} catch (error) {
// 如果解析失败，说明是纯URL字符串
console.log("音频URL为纯字符串格式");
}
// 返回纯URL格式
@@ -40,10 +39,8 @@ const parseAudioUrl = (audioUrl: string): AudioData => {
const testAudioUrl = async (url: string): Promise<boolean> => {
try {
const response = await fetch(url, { method: "HEAD" });
console.log("音频URL测试结果:", response.status, response.statusText);
return response.ok;
} catch (error) {
console.error("音频URL测试失败:", error);
return false;
}
};
@@ -79,13 +76,9 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
const handleAudioToggle = async () => {
const audio = audioRefs.current[audioId];
if (!audio) {
console.log("创建新音频实例:", actualAudioUrl);
console.log("音频数据:", audioData);
// 先测试URL是否可访问
const isUrlAccessible = await testAudioUrl(actualAudioUrl);
if (!isUrlAccessible) {
console.error("音频URL不可访问，无法播放");
setAudioError("音频文件无法访问，请检查网络连接");
return;
}
@@ -101,22 +94,6 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
audioRefs.current[audioId] = newAudio;
newAudio.addEventListener("loadstart", () => {
console.log("音频开始加载");
});
newAudio.addEventListener("loadedmetadata", () => {
console.log("音频元数据加载完成，时长:", newAudio.duration);
});
newAudio.addEventListener("canplay", () => {
console.log("音频可以播放");
});
newAudio.addEventListener("canplaythrough", () => {
console.log("音频可以完整播放");
});
newAudio.addEventListener("timeupdate", () => {
const currentProgress =
(newAudio.currentTime / newAudio.duration) * 100;
@@ -127,39 +104,23 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
});
newAudio.addEventListener("ended", () => {
console.log("音频播放结束");
setPlayingAudioId(null);
setAudioProgress(prev => ({ ...prev, [audioId]: 0 }));
});
newAudio.addEventListener("error", e => {
console.error("音频播放失败:", e);
console.error("音频URL:", actualAudioUrl);
console.error("错误详情:", newAudio.error);
if (newAudio.error) {
console.error("错误代码:", newAudio.error.code);
console.error("错误消息:", newAudio.error.message);
}
setPlayingAudioId(null);
setAudioError("音频播放失败，请稍后重试");
});
// 设置音频源并尝试播放
newAudio.src = actualAudioUrl;
console.log("设置音频源:", actualAudioUrl);
try {
console.log("尝试播放音频...");
await newAudio.play();
console.log("音频播放成功");
setPlayingAudioId(audioId);
} catch (error) {
console.error("播放失败:", error);
console.error("错误名称:", error.name);
console.error("错误消息:", error.message);
// 尝试备用方案：不设置crossOrigin
console.log("尝试备用播放方案...");
try {
const fallbackAudio = new Audio(actualAudioUrl);
audioRefs.current[audioId] = fallbackAudio;
@@ -175,22 +136,18 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
});
fallbackAudio.addEventListener("ended", () => {
console.log("备用音频播放结束");
setPlayingAudioId(null);
setAudioProgress(prev => ({ ...prev, [audioId]: 0 }));
});
fallbackAudio.addEventListener("error", e => {
console.error("备用音频播放也失败:", e);
setPlayingAudioId(null);
setAudioError("音频播放失败，请稍后重试");
});
await fallbackAudio.play();
console.log("备用方案播放成功");
setPlayingAudioId(audioId);
} catch (fallbackError) {
console.error("备用方案也失败:", fallbackError);
setPlayingAudioId(null);
setAudioError("音频播放失败，请检查音频格式或网络连接");
}
@@ -208,7 +165,6 @@ const AudioMessage: React.FC<AudioMessageProps> = ({ audioUrl, msgId }) => {
await audio.play();
setPlayingAudioId(audioId);
} catch (error) {
console.error("重新播放失败:", error);
setPlayingAudioId(null);
setAudioError("音频播放失败，请稍后重试");
}