|
@@ -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("音频加载时间")
|