ios 同时播放问题

src/view/audio-list/index.tsx

@@ -42,9 +42,9 @@ export const getAudioCurrentTime = () => {
 		const c = getMidiCurrentTime();
 		return c;
 	}
-	if (state.playSource === 'music') return audioData.songEle?.currentTime
-	if (state.playSource === 'background') return audioData.backgroundEle?.currentTime
-	return audioData.songEle?.currentTime
+	if (state.playSource === "music") return audioData.songEle?.currentTime;
+	if (state.playSource === "background") return audioData.backgroundEle?.currentTime;
+	return audioData.songEle?.currentTime;
 };
 /** 获取曲谱的总时间 */
 export const getAudioDuration = () => {
@@ -103,9 +103,9 @@ export default defineComponent({
 		watch(
 			() => state.playSource,
 			() => {
-				if (state.modeType === 'evaluating' && !state.setting.enableAccompaniment){
-					console.log('评测模式设置了关闭伴奏,不切换原音伴奏')
-					return
+				if (state.modeType === "evaluating" && !state.setting.enableAccompaniment) {
+					console.log("评测模式设置了关闭伴奏,不切换原音伴奏");
+					return;
 				}
 				if (state.playSource === "music") {
 					audioData.songEle && (audioData.songEle.muted = false);
@@ -117,31 +117,51 @@ export default defineComponent({
 			}
 		);
 
-		const createAudio = (src: string) => {
-			const a = new Audio(src);
-			a.load();
-			return a;
+		const createAudio = (src: string): Promise<HTMLAudioElement | null> => {
+			return new Promise((resolve) => {
+				const a = new Audio(src);
+				a.load();
+				a.oncanplay = () => {
+					resolve(a);
+					const _promise = a.play();
+					if (_promise !== undefined) {
+						_promise
+							.then((_) => {
+								// 这里就已经开始播放了
+								a.pause();
+								// console.log("🚀 ~ _promise:", _promise);
+							})
+							.catch((error) => {
+								// 无法自动播放
+								// console.log('无法自动播放')
+							});
+					}
+				};
+				a.onerror = () => {
+					resolve(null);
+				};
+			});
 		};
 
 		onMounted(() => {
 			if (state.playMode !== "MIDI") {
-				try {
-					if (state.music) {
-						audioData.songEle = createAudio(state.music);
+				Promise.all([createAudio(state.music), createAudio(state.accompany)]).then(([music, accompany]) => {
+					// console.log(music, accompany);
+					if (music) {
+						audioData.songEle = music;
 					}
-					if (state.accompany) {
-						audioData.backgroundEle = createAudio(state.accompany);
-						audioData.backgroundEle.muted = true
+					if (accompany) {
+						audioData.backgroundEle = accompany;
 					}
-				} catch (error) {}
-				if (audioData.songEle) {
-					audioData.songEle.addEventListener("play", onPlay);
-					audioData.songEle.addEventListener("ended", onEnded);
-				} else if (audioData.backgroundEle) {
-					audioData.backgroundEle.muted = false
-					audioData.backgroundEle.addEventListener("play", onPlay);
-					audioData.backgroundEle.addEventListener("ended", onEnded);
-				}
+					if (audioData.songEle) {
+						audioData.songEle.addEventListener("play", onPlay);
+						audioData.songEle.addEventListener("ended", onEnded);
+						accompany && (accompany.muted = true)
+					} else if (audioData.backgroundEle) {
+						audioData.backgroundEle.addEventListener("play", onPlay);
+						audioData.backgroundEle.addEventListener("ended", onEnded);
+					}
+				});
 			}
 		});