music-score/src/view/audio-list/index.tsx

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, onPlay } from "/src/state";

const audioData = reactive({
	songEle: null as unknown as HTMLAudioElement,
	backgroundEle: null as unknown as HTMLAudioElement,
	midiRender: false,
});
const midiRef = ref();
/** 播放或暂停 */
export const audioListStart = (type: "play" | "paused") => {
	// 如果是midi播放
	if (audioData.midiRender) {
		handleTogglePlayMidi(type);
		return;
	}
	if (type === "play") {
		audioData.songEle?.play();
		audioData.backgroundEle?.play();
	} else if (type === "paused") {
		audioData.songEle?.pause();
		audioData.backgroundEle?.pause();
	}
};
/** 设置倍数播放 */
export const setAudioPlaybackRate = (rate: number) => {
	// 如果是midi播放
	if (audioData.midiRender) {
		hanldeSetMidiPlaybackRate(rate);
		return;
	}
	audioData.songEle && (audioData.songEle.playbackRate = rate);
	audioData.backgroundEle && (audioData.backgroundEle.playbackRate = rate);
};

/** 获取当前播放的时间 */
export const getAudioCurrentTime = () => {
	// 如果是midi播放
	if (audioData.midiRender) {
		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;
};
/** 获取曲谱的总时间 */
export const getAudioDuration = () => {
	// 如果是midi播放
	if (audioData.midiRender) {
		const d = getMidiDuration();
		return d;
	}
	return audioData.songEle?.duration || audioData.backgroundEle?.duration || 0;
};

/** 设置播放的开始时间 */
export const setAudioCurrentTime = (time: number, index = 0) => {
	// 如果是midi播放
	if (audioData.midiRender) {
		setMidiCurrentTime(index);
		return;
	}
	audioData.songEle && (audioData.songEle.currentTime = time);
	audioData.backgroundEle && (audioData.backgroundEle.currentTime = time);
};

/** 设置当前没有播放的音频静音 */
export const toggleMutePlayAudio = (source: IPlayState, muted: boolean) => {
	if (source === "music") {
		if (audioData.songEle) {
			audioData.songEle.muted = muted;
		}
	} else if (source === "background") {
		if (audioData.backgroundEle) {
			audioData.backgroundEle.muted = muted;
		}
	}
};

/** 检测音源数量 */
export const detectTheNumberOfSoundSources = () => {
	let total = 0;
	if (audioData.songEle) total += 1;
	if (audioData.backgroundEle) total += 1;
	return total;
};

export default defineComponent({
	name: "audio-list",
	setup() {

		/** iframe 加载完成后, 加载midiURL */
		const handleLoad = () => {
			midiRef.value.contentWindow.handleRendered = () => {
				audioData.midiRender = true;
			};
			hanldeInitMidiData(midiRef.value);
		};

		watch(
			() => state.playSource,
			() => {
				if (state.modeType === "evaluating" && !state.setting.enableAccompaniment) {
					console.log("评测模式设置了关闭伴奏,不切换原音伴奏");
					return;
				}
				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): Promise<HTMLAudioElement | null> => {
			return new Promise((resolve) => {
				const a = new Audio(src);
				a.load();
				a.onloadedmetadata = () => {
					resolve(a);
				};
				a.onerror = () => {
					resolve(null);
				};
			});
		};

		onMounted(() => {
			if (state.playMode !== "MIDI") {
				Promise.all([createAudio(state.music), createAudio(state.accompany)]).then(([music, accompany]) => {
					// console.log(music, accompany);
					if (music) {
						audioData.songEle = music;
					}
					if (accompany) {
						audioData.backgroundEle = accompany;
					}
					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);
					}
				});
			}
		});

		// 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} />}
			</div>
		);
	},
});