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

import { computed, defineComponent, onMounted, onUnmounted, 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";
import { api_playProgress, api_cloudTimeUpdae, api_cloudplayed, api_remove_cloudplayed, api_remove_cloudTimeUpdae } from "/src/helpers/communication";
import { evaluatingData } from "/src/view/evaluating";
import { cloudToggleState } from "/src/helpers/midiPlay"
import { storeData } from "/src/store";
import { handleStartTick } from "../tick";
import Crunker from "/src/utils/crunker"
import tickMp3 from "/src/assets/tick.wav"
import tockMp3 from "/src/assets/tock.wav"
import { metronomeData } from "/src/helpers/metronome";
import { showToast } from "vant"

export const audioData = reactive({
	songEle: null as HTMLAudioElement | null, // 原生
	backgroundEle: null as HTMLAudioElement | null, //伴唱
	mingSongEle: null as HTMLAudioElement | null, //唱名
	songCollection: {  // 音乐源合集 带节拍器和不带节拍器的
		songEle: null as HTMLAudioElement | null,
		backgroundEle: null as HTMLAudioElement | null,
		fanSongEle: null as HTMLAudioElement | null,
		banSongEle: null as HTMLAudioElement | null,
		mingSongEle: null as HTMLAudioElement | null,
		beatSongEle: null as HTMLAudioElement | null,
		beatBackgroundEle: null as HTMLAudioElement | null,
		beatFanSongEle: null as HTMLAudioElement | null,
		beatBanSongEle: null as HTMLAudioElement | null,
		beatMingSongEle: null as HTMLAudioElement | null
	},
	midiRender: false,
	progress: 0, // midi播放进度（单位：秒）
	duration: 0, // 音频总时长（单位：秒）
	mingSongType: 1 as 0 | 1,
	mingSongTypeCollection: {
		mingSongEle: null as HTMLAudioElement | null,
		mingSongGirlEle: null as HTMLAudioElement | null,
		beatMingSongEle: null as HTMLAudioElement | null,
		beatMingSongGirlEle: null as HTMLAudioElement | null
	},
	combineIndex: -1, // 当前 播放的总谱音频索引
	combineMusics: {} as Record<string, any>, // 音频 url
	combineMusicEles:[] as {key:number, value:HTMLAudioElement, beatValue:HTMLAudioElement|null}[] // 存储的音频el 当大于4个时候删除
});
const midiRef = ref();
/** 播放或暂停 */
export const audioListStart = (type: "play" | "paused") => {
	// 开始播放之前, 先设置倍数
	if (type === "play" && state.originSpeed !== 0) {
		const actualRate = state.originAudioPlayRate * state.basePlayRate;
		// console.log('音频播放倍率',actualRate)
		setAudioPlaybackRate(actualRate);
	}
	// console.log('api','midi状态1',type,state.isAppPlay)
	// 如果是midi播放
	if (state.isAppPlay) {
		// handleTogglePlayMidi(type);
		cloudToggleState(type);
		return;
	}
	if (type === "play") {
		if(state.playSource === "mingSong"){
			audioData.mingSongEle?.play();
		}else{
			audioData.songEle?.play();
			audioData.backgroundEle?.play();
		}
	} else if (type === "paused") {
		audioData.songEle?.pause();
		audioData.backgroundEle?.pause();
		audioData.mingSongEle?.pause();
	}
};
/** 设置倍数播放 */
export const setAudioPlaybackRate = (rate: number) => {
	// 如果是midi播放
	if (state.isAppPlay) {
		if (state.modeType === "evaluating") return
		hanldeSetMidiPlaybackRate(rate);
		return;
	}
	audioData.songEle && (audioData.songEle.playbackRate = rate);
	audioData.backgroundEle && (audioData.backgroundEle.playbackRate = rate);
	audioData.mingSongEle && (audioData.mingSongEle.playbackRate = rate);
};

/** 获取当前播放的时间 */
export const getAudioCurrentTime = () => {
	// 如果是midi播放，或者是评测
	if (state.isAppPlay || state.modeType === 'evaluating') {
		// const c = getMidiCurrentTime();
		return audioData.progress;
	}
	if (state.modeType === 'evaluating') {
		return audioData.progress;
	} else {
		// console.log('返回的时间',state.playSource, audioData.songEle?.currentTime,audioData.progress)
		if (state.playSource === "music") return audioData.songEle?.currentTime || audioData.progress;
		if (state.playSource === "background") return audioData.backgroundEle?.currentTime || audioData.progress;
		if (state.playSource === "mingSong") return audioData.mingSongEle?.currentTime || audioData.progress;
		
		return audioData.songEle?.currentTime || audioData.progress;
	}

};
/** 获取曲谱的总时间 */
export const getAudioDuration = () => {
	// 如果是midi播放
	if (state.isAppPlay) {
		// const d = getMidiDuration();
		const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0
		return audioData.duration || songEndTime;
	}
	// 唱名文件时长比较短，和普通文件不一样 所以这里单独处理
	if(state.playSource === "mingSong") return audioData.mingSongEle?.duration || audioData.duration;
	return audioData.songEle?.duration || audioData.backgroundEle?.duration || audioData.mingSongEle?.duration || audioData.duration;
};

/** 设置播放的开始时间 */
export const setAudioCurrentTime = (time: number, index = 0) => {
	// console.log('开始时间12345',time)
	// 如果是midi播放
	if (state.isAppPlay) {
		setMidiCurrentTime(index);
		return;
	}
	if(state.playSource === "mingSong") {
		audioData.mingSongEle && (audioData.mingSongEle.currentTime = time);
	}
	audioData.songEle && (audioData.songEle.currentTime = time);
	audioData.backgroundEle && (audioData.backgroundEle.currentTime = time);
	audioData.progress = 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;
		}
	} else if(source === "mingSong"){
		if (audioData.mingSongEle) {
			audioData.mingSongEle.muted = muted;
		}
	}
};

/** 切换节拍器音源 */
export const changeSongSourceByBeat = (isDisBeat:boolean) => {
	const currentTime = getAudioCurrentTime()
	// isDisBeat 为true 切换到不带节拍的，为false 切换到带节拍的
	if (isDisBeat) {
		if(state.playType === "play"){
			audioData.songEle = audioData.songCollection.songEle
			audioData.backgroundEle = audioData.songCollection.backgroundEle
		} else {
			audioData.songEle = audioData.songCollection.fanSongEle
			audioData.backgroundEle = audioData.songCollection.banSongEle
			audioData.mingSongEle = audioData.songCollection.mingSongEle
		}
	} else {
		// 没有节拍器资源的时候 用 不带节拍器的资源，防止播放不了
		if(state.playType === "play"){
			audioData.songEle = audioData.songCollection.beatSongEle || audioData.songCollection.songEle
			audioData.backgroundEle = audioData.songCollection.beatBackgroundEle || audioData.songCollection.backgroundEle
		} else {
			audioData.songEle = audioData.songCollection.beatFanSongEle || audioData.songCollection.fanSongEle
			audioData.backgroundEle = audioData.songCollection.beatBanSongEle || audioData.songCollection.banSongEle
			audioData.mingSongEle = audioData.songCollection.beatMingSongEle || audioData.songCollection.mingSongEle
		}
	}
	// 设置进度
	setAudioCurrentTime(currentTime)
	// 设置静音与取消静音
	if (state.playSource === "music") {
		audioData.songEle && (audioData.songEle.muted = false);
		audioData.backgroundEle && (audioData.backgroundEle.muted = true);
		audioData.mingSongEle && (audioData.mingSongEle.muted = true);
	} else if (state.playSource === "background") {
		audioData.songEle && (audioData.songEle.muted = true);
		audioData.backgroundEle && (audioData.backgroundEle.muted = false);
		audioData.mingSongEle && (audioData.mingSongEle.muted = true);
	}else {
		audioData.songEle && (audioData.songEle.muted = true);
		audioData.backgroundEle && (audioData.backgroundEle.muted = true);
		audioData.mingSongEle && (audioData.mingSongEle.muted = false);
	}
}
/** 切换男声女声唱名  */
export const changeMingSongType = () =>{
	// 当有男声女声都有值时候才能切换 
	const { mingSongEle, mingSongGirlEle, beatMingSongEle, beatMingSongGirlEle } = audioData.mingSongTypeCollection
	if(mingSongEle&&mingSongGirlEle){
		const mingSongType = audioData.mingSongType
		audioData.songCollection.mingSongEle = mingSongType === 1 ? mingSongEle : mingSongGirlEle
		audioData.songCollection.beatMingSongEle = mingSongType === 1 ? beatMingSongEle : beatMingSongGirlEle
	}
}

const createAudio = (src?: string): Promise<HTMLAudioElement | null> => {
	if(!src){
		return Promise.resolve(null)
	}
	return new Promise((resolve) => {
		// const a = new Audio(src + '?v=' + Date.now());
		const a = new Audio(src);
		a.onloadedmetadata = () => {
			resolve(a);
		};
		a.onerror = () => {
			resolve(null);
		};
		// 当未加载 资源之前 切换到其他浏览器标签，浏览器可能会禁止资源加载所以无法触发onloadedmetadata事件，导致一直在加载中，这里做个兼容
		if (document.visibilityState === 'visible') {
			a.load();
		} else {
			const onVisibilityChange = () => {
				if (document.visibilityState === 'visible') {
					document.removeEventListener('visibilitychange', onVisibilityChange);
					a.load();
				}
			};
			document.addEventListener('visibilitychange', onVisibilityChange);
		}
	});
};

// 合成节拍器资源
let CrunkerInstance: Crunker
async function mergeBeatAudio(music?:string){
	let beatMusic
	if(!state.isMixBeat) {
		return beatMusic
	}
	if(!music){
		return beatMusic
	}
	console.time("音频合成时间")
	try{
		/* 音频合成 */
		if(!CrunkerInstance){
			CrunkerInstance = new Crunker()
		}
		console.time("音频加载时间")
		const [musicBuff, tickBuff, tockBuff] = await CrunkerInstance.fetchAudio(music?`${music}`:undefined, tickMp3, tockMp3)
		console.timeEnd("音频加载时间")
		// 计算音频空白时间
		const silenceDuration = musicBuff&&!state.isEvxml ? CrunkerInstance.calculateSilenceDuration(musicBuff) : 0
		console.log(`音频空白时间:${silenceDuration}`)
		const beats:AudioBuffer[] = []
		const beatsTime:number[] = []
		metronomeData.metroMeasure.map(measures=>{
			measures.map((item:any)=>{
				beats.push(item.isTick?tickBuff!:tockBuff!)
				beatsTime.push(item.time + silenceDuration) // xml 计算的时候 加上空白的时间
			})
		})
		console.time("音频合并时间")
		const musicBuffMeg = musicBuff && CrunkerInstance.mergeAudioBuffers([musicBuff,...beats],[0,...beatsTime])
		console.timeEnd("音频合并时间")
		console.time("音频audioDom生成时间")
		beatMusic = musicBuffMeg && CrunkerInstance.exportAudioElement(musicBuffMeg)
		console.timeEnd("音频audioDom生成时间")
	}catch(err){
		console.log(err)
	}
	console.timeEnd("音频合成时间")
	return beatMusic
}

// 处理加载节拍器音频
export const handleLoadBeatMusic = async () => {
	if(metronomeData.disable) {
		return
	}
	const playType = state.playType
	const playSource = state.playSource
	const mingSongType = audioData.mingSongType
	// 当前模式下 如果已经有合成音频了，就不走合成逻辑了
	let isBeatMusic = false
	let currentMusic  //当前的音频
	const beatPlayObj = {
		"play_music":"beatSongEle",
		"play_background":"beatBackgroundEle",
		"sing_music":"beatFanSongEle",
		"sing_background":"beatBanSongEle"
	}
	const playObj = {
		"play_music":"music",
		"play_background":"accompany",
		"sing_music":"fanSong",
		"sing_background":"banSong",
	}
	if(playSource === "mingSong") {
		// 当男声女声都有的时候 才区分
		if(state.mingSong && state.mingSongGirl){
			isBeatMusic = mingSongType === 1 ? !!audioData.mingSongTypeCollection.beatMingSongEle : !!audioData.mingSongTypeCollection.beatMingSongGirlEle
			currentMusic = mingSongType === 1 ? state.mingSong : state.mingSongGirl
		}else{
			isBeatMusic = !!audioData.mingSongTypeCollection.beatMingSongEle
			currentMusic = state.mingSong
		}
	}else{
		// @ts-ignore
		isBeatMusic = !!audioData.songCollection[beatPlayObj[`${playType}_${playSource}`]]
		// @ts-ignore
		currentMusic = state[playObj[`${playType}_${playSource}`]]
	}
	if(isBeatMusic || !currentMusic){
		return
	}
	state.loadingText = "资源加载中，请稍后…"
	state.isLoading = true
	const musicAudio = await mergeBeatAudio(currentMusic) as any
	const playEleObj = {
		"play_music":"beatSongEle",
		"play_background":"beatBackgroundEle",
		"sing_music":"beatFanSongEle",
		"sing_background":"beatBanSongEle"
	}
	// 给音频赋值
	if(playSource === "mingSong"){
		// 当男声女声都有的时候 才区分
		if(state.mingSong && state.mingSongGirl){
			if(mingSongType === 1) {
				audioData.mingSongTypeCollection.beatMingSongEle = musicAudio
			}else {
				audioData.mingSongTypeCollection.beatMingSongGirlEle = musicAudio
			}
		}else{
			audioData.songCollection.beatMingSongEle = musicAudio
			audioData.mingSongTypeCollection.beatMingSongEle = musicAudio
		}
		if(musicAudio){
			musicAudio.addEventListener("play", onPlay);
			musicAudio.addEventListener("ended", onEnded);
		}
		changeMingSongType()
	}else{
		if(playType === "play" && !audioData.songCollection.beatSongEle && !audioData.songCollection.beatBackgroundEle){
			if(musicAudio){
				musicAudio.addEventListener("play", onPlay);
				musicAudio.addEventListener("ended", onEnded);
			}
		}		
		if(playType === "sing" && !audioData.songCollection.beatFanSongEle && !audioData.songCollection.beatBanSongEle){
			if(musicAudio){
				musicAudio.addEventListener("play", onPlay);
				musicAudio.addEventListener("ended", onEnded);
			}
		}
		// @ts-ignore
		audioData.songCollection[playEleObj[`${playType}_${playSource}`]] = musicAudio
	}
	state.isLoading = false
}

// 切换对应的声轨，并且配置当前的audio
export async function changeCombineAudio (combineIndex: number){
	// 重复点击的时候取消选中 原音
	if(combineIndex === audioData.combineIndex){
		audioData.combineIndex = -1
		state.playSource = "background"
		state.music = ""
		// 当没有背景音文件的时候
		if(!state.accompany) {
			state.noMusicSource = true
		}
		return
	}
	state.loadingText = "资源加载中，请稍后…";
	state.isLoading = true;
	const musicUrl = audioData.combineMusics[combineIndex]
	// 有就拿缓存，没有就加载
	const cacheMusicIndex = audioData.combineMusicEles.findIndex(ele => {
		return ele.key === combineIndex
	})
	const cacheMusic = audioData.combineMusicEles[cacheMusicIndex]
	if(cacheMusic?.value){
		audioData.songCollection.songEle = cacheMusic.value
		audioData.songCollection.beatSongEle = cacheMusic.beatValue
		// 使用缓存之后 当前数据位置向后偏移，删除缓存的时候以使用顺序位置
		const itemMusic = audioData.combineMusicEles.splice(cacheMusicIndex, 1)
		audioData.combineMusicEles.push(...itemMusic)
	}else{
		const music = await createAudio(musicUrl)
		const beatMusic = await mergeBeatAudio(musicUrl)
		// 当没有背景音的时候 需要绑定事件
		if(!state.accompany){
			if(music){
				music.addEventListener("play", onPlay);
				music.addEventListener("ended", onEnded);
			}			
			if(beatMusic){
				beatMusic.addEventListener("play", onPlay);
				beatMusic.addEventListener("ended", onEnded);
			}
		}
		audioData.combineMusicEles.push({
			key: combineIndex,
			value: music!,
			beatValue: beatMusic!
		})
		// 当大于4个数据的时候 删除掉最前面的数据
		if(audioData.combineMusicEles.length > 4){
			audioData.combineMusicEles.splice(0,1)
		}
		audioData.songCollection.songEle = music
		audioData.songCollection.beatSongEle = beatMusic!
	}
	audioData.combineIndex = combineIndex
	state.music = musicUrl
	state.playSource = "music"
	// 当没有背景音文件的时候
	if(!state.accompany) {
		state.noMusicSource = false
	}
	showToast({
		message:  "已开启原声",
		position: "top",
		className: "selectionToast",
	});
	state.isLoading = false;
}
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);
					audioData.mingSongEle && (audioData.mingSongEle.muted = true);
				} else if (state.playSource === "background") {
					audioData.songEle && (audioData.songEle.muted = true);
					audioData.backgroundEle && (audioData.backgroundEle.muted = false);
					audioData.mingSongEle && (audioData.mingSongEle.muted = true);
				}else {
					audioData.songEle && (audioData.songEle.muted = true);
					audioData.backgroundEle && (audioData.backgroundEle.muted = true);
					audioData.mingSongEle && (audioData.mingSongEle.muted = false);
				}
			}
		);

		/**
		 * #11046
		 * 声音与圆点消失的节点不一致，可能原因是部分安卓手机没有立即播放，所以需要等待有音频进度返回时再播放节拍器
		 * mp3节拍器的圆点动画
		 */
		const tickAnimate = (time: number) => {
			if (storeData.isApp && state.modeType === 'evaluating' && evaluatingData.needPlayTick && time > 0) {
				evaluatingData.needPlayTick = false;
				handleStartTick()
			}
		}

		// 监听评测曲谱音频播放进度，返回
		const progress = (res: any) => {
			const currentTime = res?.currentTime || res?.content?.currentTime;
			const total = res?.totalDuration || res?.content?.totalDuration;
			const time = currentTime / 1000;
			audioData.progress = time;
			tickAnimate(time);
			// audioData.songEle && (audioData.songEle.currentTime = time);
			// audioData.backgroundEle && (audioData.backgroundEle.currentTime = time);
			// audioData.mingSongEle && (audioData.mingSongEle.currentTime = time);
			audioData.duration = total / 1000;
			if (
				res?.content?.totalDuration > 1000 &&
				currentTime >= total
			) {
				console.log('播放结束1111',evaluatingData.isAudioPlayEnd,currentTime,total)
				if (evaluatingData.isAudioPlayEnd) return
				evaluatingData.isAudioPlayEnd = true
				onEnded();
			}
		};

		// midi播放进度回调
		const midiProgress = (res: any) => {
			// console.log('api',res)
			if (audioData.duration == 0) {
				const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0
				audioData.duration = songEndTime
			}
			const currentTime = res?.currentTime || res?.content?.currentTime;
			const total = res?.totalDuration || res?.content?.totalDuration;
			const time = currentTime / 1000;
			audioData.progress = time;
			// if (
			// 	audioData.duration > 1000 &&
			// 	currentTime >= audioData.duration * 1000
			// ) {
			// 	console.log('midi结束')
			// 	onEnded();
			// }
			// 选段模式，播放结束
			if (state.sectionStatus && state.section.length == 2 && currentTime >= state.section) {
				//
			}
		}
		// midi播放结束回调
		const midiPlayEnd = (res: any) => {
			if (res) {
				console.log('midi结束')
				audioData.progress = 0
				onEnded();
			}
		}
		// 加载音源
		function loadAudio(){
			return Promise.all([createAudio(state.music), createAudio(state.accompany), createAudio(state.fanSong), createAudio(state.banSong), createAudio(state.mingSong), createAudio(state.mingSongGirl)])
		}
		// 加载节拍器音源
		function loadBeatAudio(){
			return Promise.all([createAudio(state.beatSong.music), createAudio(state.beatSong.accompany), createAudio(state.beatSong.fanSong), createAudio(state.beatSong.banSong), createAudio(state.beatSong.mingSong), createAudio(state.beatSong.mingSongGirl)])
		}
		onMounted(async () => {
			// 预览的时候不走音频加载逻辑
			if(state.isPreView){
				state.isLoading = false;
				return
			}
			if (state.playMode !== "MIDI") {
				console.time("音频加载耗时")
				// 处理音源
				const [music, accompany, fanSong, banSong, mingSong, mingSongGirl] = await loadAudio()
				audioData.backgroundEle = accompany;
				audioData.songEle = music;
				Object.assign(audioData.songCollection, {
					songEle:music,
					backgroundEle:accompany,
					fanSongEle:fanSong,
					banSongEle:banSong,
					mingSongEle:mingSong
				})
				Object.assign(audioData.mingSongTypeCollection, {
					mingSongEle: mingSong,
					mingSongGirlEle:mingSongGirl
				})
				if (music) {
					music.addEventListener("play", onPlay);
					music.addEventListener("ended", onEnded);
					accompany && (accompany.muted = true);
				} else if (accompany) {
					accompany.addEventListener("play", onPlay);
					accompany.addEventListener("ended", onEnded);
				}
				if(fanSong){
					fanSong.addEventListener("play", onPlay);
					fanSong.addEventListener("ended", onEnded);
					banSong && (banSong.muted = true);
					mingSong && (mingSong.muted = true);
				}else if(banSong){
					banSong.addEventListener("play", onPlay);
					banSong.addEventListener("ended", onEnded);
					mingSong && (mingSong.muted = true);
				}
				if(mingSong){
					mingSong.addEventListener("play", onPlay);
					mingSong.addEventListener("ended", onEnded);
				}
				if(mingSongGirl){
					mingSongGirl.addEventListener("play", onPlay);
					mingSongGirl.addEventListener("ended", onEnded);
				}
				// 处理带节拍器的音源
				//const [beatMusic, beatAccompany, beatFanSong, beatBanSong, beatMingSong, beatMingSongGirl] = await loadBeatAudio()
				/*// 客户端合成节拍器
				const [beatMusic, beatAccompany, beatFanSong, beatBanSong, beatMingSong, beatMingSongGirl] = await mergeBeatAudio(state.music, state.accompany)
				Object.assign(audioData.songCollection, {
					beatSongEle:beatMusic,
					beatBackgroundEle:beatAccompany,
					beatFanSongEle:beatFanSong,
					beatBanSongEle:beatBanSong,
					beatMingSongEle:beatMingSong
				})
				Object.assign(audioData.mingSongTypeCollection, {
					beatMingSongEle: beatMingSong,
					beatMingSongGirlEle: beatMingSongGirl
				})
				if (beatMusic) {
					beatMusic.addEventListener("play", onPlay);
					beatMusic.addEventListener("ended", onEnded);
					beatAccompany && (beatAccompany.muted = true);
				} else if (beatAccompany) {
					beatAccompany.addEventListener("play", onPlay);
					beatAccompany.addEventListener("ended", onEnded);
				}
				if(beatFanSong){
					beatFanSong.addEventListener("play", onPlay);
					beatFanSong.addEventListener("ended", onEnded);
					beatBanSong && (beatBanSong.muted = true);
					beatMingSong && (beatMingSong.muted = true);
				}else if(beatBanSong){
					beatBanSong.addEventListener("play", onPlay);
					beatBanSong.addEventListener("ended", onEnded);
					beatMingSong && (beatMingSong.muted = true);
				} 
				if(beatMingSong){
					beatMingSong.addEventListener("play", onPlay);
					beatMingSong.addEventListener("ended", onEnded);
				}				
				if(beatMingSongGirl){
					beatMingSongGirl.addEventListener("play", onPlay);
					beatMingSongGirl.addEventListener("ended", onEnded);
				} */
				// 给男声女声赋值
				const userGender = storeData.user.gender
				// 当不为null 和undefined的时候 取userGender的值
				if(userGender!==undefined && userGender!==null){
					audioData.mingSongType = userGender
				}
				// 重新根据性别赋值
				changeMingSongType()

				state.audioDone = true;
				// state.isLoading = false
				console.timeEnd("音频加载耗时")
				console.timeLog('加载过程','音频加载完成')
				console.log("音频数据：",audioData)
				api_playProgress(progress);
			} else {
				state.audioDone = true;
				state.isLoading = false
				const songEndTime = state.times[state.times.length - 1 || 0]?.endtime || 0
				audioData.duration = songEndTime
				// 监听midi播放进度
				api_cloudTimeUpdae(midiProgress);
				// 监听midi播放结束
				api_cloudplayed(midiPlayEnd);
			}
			console.timeEnd('加载过程')
		});
		onUnmounted(() => {
			api_remove_cloudplayed(midiPlayEnd);
			api_remove_cloudTimeUpdae(midiProgress);
		});

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