Browse Source

增加唱名男生女生

黄琪勇 11 tháng trước cách đây
mục cha
commit
9116d29e81
4 tập tin đã thay đổi với 102 bổ sung14 xóa
  1. 20 0
      src/page-instrument/header-top/settting/index.tsx
  2. 29 6
      src/state.ts
  3. 3 1
      src/store.ts
  4. 50 7
      src/view/audio-list/index.tsx

+ 20 - 0
src/page-instrument/header-top/settting/index.tsx

@@ -11,6 +11,7 @@ import { resetRenderMusicScore } from "/src/view/music-score";
 import ScreenModel from "../../custom-plugins/helper-model/screen-model";
 import { getQuery } from "/src/utils/queryString";
 import { reCheckDelay } from "/src/page-instrument/evaluat-model"
+import { audioData, changeMingSongType } from "/src/view/audio-list"
 
 export default defineComponent({
 	name: "settting",
@@ -61,6 +62,25 @@ export default defineComponent({
                                     <div class={styles.tit}>循环播放</div>
                                     <Switch v-model={state.setting.repeatAutoPlay}></Switch>
                                 </div>
+                        }                        
+                        {
+                            state.modeType === 'practise' && state.mingSong && state.mingSongGirl &&
+                            <div class={styles.cellBox}>
+                                <div class={styles.tit}>唱名类型</div>
+                                <div class={styles.radioBox}>
+                                    {
+                                        [{name:'男生',value:1}, {name:'女生',value:0}].map(item=>{
+                                            return <div class={ audioData.mingSongType===item.value && styles.active } onClick={ ()=>{ 
+                                                if(audioData.mingSongType === item.value){
+                                                    return
+                                                }
+                                                audioData.mingSongType = item.value as 0|1
+                                                changeMingSongType()
+                                            } }>{item.name}</div>
+                                        })
+                                    }
+                                </div>
+                            </div>                     
                         }
                         {
                             state.isSingleLine && state.modeType === "practise" && !state.isCombineRender && !state.isPercussion && 

+ 29 - 6
src/state.ts

@@ -333,13 +333,16 @@ const state = reactive({
   banSong: "",
   /** 唱名 */
   mingSong: "",
+  /** 唱名女 如果有男唱名的情况下*/
+  mingSongGirl:"",
   /** 节拍器音乐资源 */
   beatSong: {
     music: "",
     accompany: "",
     fanSong: "",
     banSong: "",
-    mingSong: ""
+    mingSong: "",
+    mingSongGirl: ""
   },
   /** midiURL */
   midiUrl: "",
@@ -481,7 +484,11 @@ const state = reactive({
   /** 乐器code,用于评测传参 */
   musicalCode: '' as any,
   /** 合奏曲目是否合并展示 */
-  isCombineRender: false,
+  isCombineRender: false,  
+  /** 是否支持总谱 */
+  isScoreRender: false,  
+  /** 是否默认显示总谱 */
+  defaultScoreRender: false,
   /** 小节的持续时长,以后台设置的播放速度计算 */
   measureTime: 0,
   /** 跟练模式,节拍器播放的时间 */
@@ -1349,7 +1356,7 @@ function initMusicSource(data: any, track?: string) {
   let musicObj, accompanyObj, fanSongObj, banSongObj
   // 独奏
   if (musicSheetType === "SINGLE") {
-    // 适用声部(instrumentId)为true 时候没有乐器只有一个原音;当前用户有乐器就匹配  不然取第一个原音
+    // 适用声部(isAllSubject)为true 时候没有乐器只有一个原音;当前用户有乐器就匹配  不然取第一个原音
     musicObj = musicSheetSoundList.find((item: any) => {
       return (isAllSubject || !instrumentId) ? item.audioPlayType === "PLAY" : (item.audioPlayType === "PLAY" && item.musicalInstrumentId == instrumentId)
     })
@@ -1387,15 +1394,27 @@ function initMusicSource(data: any, track?: string) {
     accompany: accompanyObj?.audioFileUrl,
     fanSong: fanSongObj?.audioFileUrl,
     banSong: banSongObj?.audioFileUrl,
-    mingSong: fanSongObj?.solmizationFileUrl
   })
+  // 如果没有男唱名
+  if(!fanSongObj?.solmizationFileUrl){
+    state.mingSong = fanSongObj?.femaleSolmizationFileUrl
+  }else{
+    state.mingSong = fanSongObj?.solmizationFileUrl
+    state.mingSongGirl = fanSongObj?.femaleSolmizationFileUrl
+  }
   Object.assign(state.beatSong, {
     music: musicObj?.audioBeatMixUrl,
     accompany: accompanyObj?.audioBeatMixUrl,
     fanSong: fanSongObj?.audioBeatMixUrl,
-    banSong: banSongObj?.audioBeatMixUrl,
-    mingSong: fanSongObj?.solmizationBeatUrl
+    banSong: banSongObj?.audioBeatMixUrl
   })
+  // 如果没有男唱名
+  if(!fanSongObj?.solmizationBeatUrl){
+    state.beatSong.mingSong = fanSongObj?.femaleSolmizationBeatUrl
+  }else{
+    state.beatSong.mingSong = fanSongObj?.solmizationBeatUrl
+    state.beatSong.mingSongGirl = fanSongObj?.femaleSolmizationBeatUrl
+  }
   return musicObj
 }
 const setState = (data: any, index: number) => {
@@ -1443,6 +1462,10 @@ const setState = (data: any, index: number) => {
   state.cbsExamSongId = data.id + "";
   state.examSongName = data.name;
   state.coverImg = data.musicCover ?? "";
+  // 是否支持总谱
+  state.isScoreRender = data.isScoreRender
+  // 是否默认显示总谱
+  state.defaultScoreRender = data.defaultScoreRender
   // 单声部多声轨合并展示
   state.isCombineRender = data.musicSheetType === "SINGLE" && data.musicSheetSoundList?.length > 1
   // 如果是simple页面,只显示单轨

+ 3 - 1
src/store.ts

@@ -22,7 +22,9 @@ type IUser = {
   phone?: string;
   schoolInfos?: any[];
   // 当前用户 绑定 的乐器
-  instrumentId: string 
+  instrumentId?: string;
+  // 性别
+  gender?: 1|0;
 };
 type IStatus = "init" | "login" | "logout" | "error";
 type IPlatformType = "STUDENT" | "TEACHER" | "WEB" | "";

+ 50 - 7
src/view/audio-list/index.tsx

@@ -33,7 +33,14 @@ export const audioData = reactive({
 	},
 	midiRender: false,
 	progress: 0, // midi播放进度(单位:秒)
-	duration: 0 // 音频总时长(单位:秒)
+	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();
 /** 播放或暂停 */
@@ -183,6 +190,16 @@ export const changeSongSourceByBate = (isDisBate:boolean) => {
 		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.betaMingSongEle = mingSongType === 1 ? beatMingSongEle : beatMingSongGirlEle
+	}
+}
 export default defineComponent({
 	name: "audio-list",
 	setup() {
@@ -299,11 +316,11 @@ export default defineComponent({
 		}
 		// 加载音源
 		function loadAudio(){
-			return Promise.all([createAudio(state.music), createAudio(state.accompany), createAudio(state.fanSong), createAudio(state.banSong), createAudio(state.mingSong)])
+			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)])
+			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 () => {
 			// 预览的时候不走音频加载逻辑
@@ -314,7 +331,7 @@ export default defineComponent({
 			if (state.playMode !== "MIDI") {
 				console.time("音频加载时间")
 				// 处理音源
-				const [music, accompany, fanSong, banSong, mingSong] = await loadAudio()
+				const [music, accompany, fanSong, banSong, mingSong, mingSongGirl] = await loadAudio()
 				audioData.backgroundEle = accompany;
 				audioData.songEle = music;
 				Object.assign(audioData.songCollection, {
@@ -324,6 +341,10 @@ export default defineComponent({
 					banSongEle:banSong,
 					mingSongEle:mingSong
 				})
+				Object.assign(audioData.mingSongTypeCollection, {
+					mingSongEle: mingSong,
+					mingSongGirlEle:mingSongGirl
+				})
 				if (music) {
 					music.addEventListener("play", onPlay);
 					music.addEventListener("ended", onEnded);
@@ -346,14 +367,22 @@ export default defineComponent({
 					mingSong.addEventListener("play", onPlay);
 					mingSong.addEventListener("ended", onEnded);
 				}
+				if(mingSongGirl){
+					mingSongGirl.addEventListener("play", onPlay);
+					mingSongGirl.addEventListener("ended", onEnded);
+				}
 				// 处理带节拍器的音源
-				const [beatMusic, beatAccompany, beatFanSong, beatBanSong, beatMingSong] = await loadBeatAudio()
+				const [beatMusic, beatAccompany, beatFanSong, beatBanSong, beatMingSong, beatMingSongGirl] = await loadBeatAudio()
 				Object.assign(audioData.songCollection, {
 					beatSongEle:beatMusic,
 					betaBackgroundEle:beatAccompany,
 					betaFanSongEle:beatFanSong,
 					betaBanSongEle:beatBanSong,
-					betaMingSongEle:beatMingSong
+					beatMingSongEle:beatMingSong
+				})
+				Object.assign(audioData.mingSongTypeCollection, {
+					beatMingSongEle: beatMingSong,
+					beatMingSongGirlEle: beatMingSongGirl
 				})
 				if (beatMusic) {
 					beatMusic.addEventListener("play", onPlay);
@@ -372,10 +401,24 @@ export default defineComponent({
 					beatBanSong.addEventListener("play", onPlay);
 					beatBanSong.addEventListener("ended", onEnded);
 					beatMingSong && (beatMingSong.muted = true);
-				} else if(beatMingSong){
+				} 
+				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("音频加载时间")