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";

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

		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());
				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);
				}
			});
		};

		/**
		 * #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)])
		}
		// 合成节拍器资源
		async function mergeBeatAudio(){
			let beatMusic, beatAccompany
			if(!state.isMixBeat) {
				return [beatMusic, beatAccompany]
			}
			console.time("音频合成时间")
			try{
				const crunker = new Crunker()
				console.time("音频加载时间")
				const [musicBuff, accompanyBuff, tickBuff, tockBuff] = await crunker.fetchAudio(state.music?`${state.music}?v=${Date.now()}`:undefined, state.accompany?`${state.accompany}?v=${Date.now()}`:undefined, tickMp3, tockMp3)
				console.timeEnd("音频加载时间")
				// 计算音频空白时间
				const silenceDuration = musicBuff&&!state.isEvxml ? crunker.calculateSilenceDuration(musicBuff) : 0
				const silenceBgDuration = accompanyBuff&&!state.isEvxml ? crunker.calculateSilenceDuration(accompanyBuff) : 0
				console.log(`音频空白时间:${silenceDuration};${silenceBgDuration}`)
				const beats:AudioBuffer[] = []
				const beatsTime:number[] = []
				const beatsBgTime:number[] = []
				metronomeData.metroMeasure.map(measures=>{
					measures.map((item:any)=>{
						beats.push(item.isTick?tickBuff!:tockBuff!)
						beatsTime.push(item.time + silenceDuration) // xml 计算的时候 加上空白的时间
						beatsBgTime.push(item.time + silenceBgDuration) // xml 计算的时候 加上空白的时间 没有背景不赋值
					})
				})
				console.time("音频合并时间")
				const musicBuffMeg = musicBuff && crunker.mergeAudioBuffers([musicBuff,...beats],[0,...beatsTime])
				const accompanyBuffMeg = accompanyBuff && crunker.mergeAudioBuffers([accompanyBuff,...beats],[0,...beatsBgTime])
				console.timeEnd("音频合并时间")
				console.time("音频audioDom生成时间")
				beatMusic = musicBuffMeg && crunker.exportAudioElement(musicBuffMeg)
				beatAccompany = accompanyBuffMeg && crunker.exportAudioElement(accompanyBuffMeg)
				console.timeEnd("音频audioDom生成时间")
			}catch(err){
				console.log(err)
			}
			console.timeEnd("音频合成时间")
			return [beatMusic, beatAccompany]
		}
		onMounted(async () => {
			// 预览的时候不走音频加载逻辑
			if(state.isPreView){
				state.isLoading = false;
				return
			}			
			if (state.playMode !== "MIDI") {
				console.time("音频加载时间123")
				// 处理音源
				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()
				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("音频加载时间123")
				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);
			}
		});
		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>
			</>
		);
	},
});