fix

src/state.ts

@@ -163,10 +163,6 @@ export const customData = reactive({
 	/** 自定义音符按读取到的时值 */
 	customNoteCurrentTime: false
 })
-/** 音频加载完成 */
-export const onLoadedmetadata = (evt: Event) => {
-	// console.log(evt)
-};
 /** 在渲染前后计算光标应该走到的音符 */
 const setStep = () => {
 	if (state.playState !== "play") {
@@ -196,10 +192,6 @@ export const onPlay = () => {
 	offset_duration = browserInfo.xiaomi ? 0.2 : 0.08
 	setStep();
 };
-/** 播放中事件 */
-export const onTimeupdate = (evt: Event) => {
-	
-};
 
 /** 播放模式结束自动重播 */
 const autoResetPlay = () => {

src/view/audio-list/index.tsx

@@ -1,7 +1,7 @@
-import { computed, defineComponent, reactive, ref } from "vue";
+import { computed, defineComponent, onMounted, reactive, ref, watch } from "vue";
 import styles from "./index.module.less";
 import { getMidiCurrentTime, getMidiDuration, handleTogglePlayMidi, hanldeInitMidiData, hanldeSetMidiPlaybackRate, setMidiCurrentTime } from "./midiPlayer";
-import state, { IPlayState, onEnded, onLoadedmetadata, onPlay, onTimeupdate } from "/src/state";
+import state, { IPlayState, onEnded, onPlay } from "/src/state";
 
 const audioData = reactive({
 	songEle: null as unknown as HTMLAudioElement,
@@ -80,19 +80,15 @@ export const toggleMutePlayAudio = (source: IPlayState, muted: boolean) => {
 
 /** 检测音源数量 */
 export const detectTheNumberOfSoundSources = () => {
-	let total = 0
-	if (audioData.songEle) total += 1
-	if (audioData.backgroundEle) total += 1
-	return total
-}
+	let total = 0;
+	if (audioData.songEle) total += 1;
+	if (audioData.backgroundEle) total += 1;
+	return total;
+};
 
 export default defineComponent({
 	name: "audio-list",
 	setup() {
-		/** 原音是否静音 */
-		const isMusicMuted = computed(() => {
-			return state.playSource === "music";
-		});
 
 		/** iframe 加载完成后, 加载midiURL */
 		const handleLoad = () => {
@@ -102,42 +98,50 @@ export default defineComponent({
 			hanldeInitMidiData(midiRef.value);
 		};
 
+		watch(
+			() => state.playSource,
+			() => {
+				if (state.playSource === "music") {
+					audioData.songEle && (audioData.songEle.muted = false);
+					audioData.backgroundEle && (audioData.backgroundEle.muted = true);
+				} else {
+					audioData.songEle && (audioData.songEle.muted = true);
+					audioData.backgroundEle && (audioData.backgroundEle.muted = false);
+				}
+			}
+		);
+
+		const createAudio = (src: string) => {
+			const a = new Audio(src);
+			a.load();
+			return a;
+		};
+
+		onMounted(() => {
+			if (state.playMode !== "MIDI") {
+				try {
+					if (state.music) {
+						audioData.songEle = createAudio(state.music);
+					}
+					if (state.accompany) {
+						audioData.backgroundEle = createAudio(state.accompany);
+					}
+				} catch (error) {}
+
+				if (audioData.songEle) {
+					audioData.songEle.addEventListener("play", onPlay);
+					audioData.songEle.addEventListener("ended", onEnded);
+				} else if (audioData.backgroundEle) {
+					audioData.backgroundEle.addEventListener("play", onPlay);
+					audioData.backgroundEle.addEventListener("ended", onEnded);
+				}
+			}
+		});
+
 		// console.log(state.playMode, state.midiUrl);
 		return () => (
 			<div class={styles.audioList}>
 				{state.playMode === "MIDI" && state.speed != 0 && <iframe style={{ display: "none" }} ref={midiRef} src={`/midi/index.html`} onLoad={handleLoad} />}
-				{state.playMode !== "MIDI" && (
-					<div>
-						<audio
-							muted={!isMusicMuted.value}
-							preload="auto"
-							ref={(el: any) => {
-								if (state.music) {
-									audioData.songEle = el as HTMLAudioElement;
-									el.play()
-									el.pause()
-								}
-							}}
-							src={state.music}
-							onLoadedmetadata={onLoadedmetadata}
-							onPlay={onPlay}
-							onTimeupdate={onTimeupdate}
-							onEnded={onEnded}
-						/>
-						<audio
-							muted={isMusicMuted.value}
-							preload="auto"
-							ref={(el: any) => {
-								if (state.accompany) {
-									audioData.backgroundEle = el as HTMLAudioElement;
-									el.play()
-									el.pause()
-								}
-							}}
-							src={state.accompany}
-						/>
-					</div>
-				)}
 			</div>
 		);
 	},