Browse Source

feat: 音频下载去掉时间戳

TIANYONG 2 months ago
parent
commit
c197755cc5
3 changed files with 27 additions and 7 deletions
  1. 1 1
      src/page-instrument/view-detail/index.tsx
  2. 22 3
      src/state.ts
  3. 4 3
      src/view/audio-list/index.tsx

+ 1 - 1
src/page-instrument/view-detail/index.tsx

@@ -613,7 +613,7 @@ export default defineComponent({
           )}
         </div>
         {/* 曲目渲染完成,再去下载mp3资源 */}
-        {!detailData.isLoading && !detailData.skeletonLoading && <AudioList />}
+        {!detailData.isLoading && <AudioList />}
 
         {/* {!detailData.isLoading && <TheAudio src={tickWav} />} */}
 

+ 22 - 3
src/state.ts

@@ -24,6 +24,7 @@ import { api_lessonTrainingTrainingStudentDetail } from "/src/page-instrument/ap
 import { undoData, moveData } from "/src/view/plugins/move-music-score"
 import { HANDLE_WORK_ADD } from "/src/page-instrument/custom-plugins/work-index";
 import { speedBeatTo, unitImgs } from "/src/helpers/beatConfig"
+import IndexedDBService from "/src/utils/indexedDB";
 
 const query: any = getQuery();
 
@@ -1467,16 +1468,34 @@ export const getMusicDetail = async (id: string, type?: string) => {
 };
 
 
+// 判断有没有xml缓存,有则直接使用
+const queryMusicXml = async (id: string, xmlUr: string) => {
+  let xmlString = ''
+  const dbService = new IndexedDBService("MyDatabase", "MyStore");
+  console.time('缓存获取xml')
+  const storeXmlData = await dbService.get(id).then((data) => data );
+  if (storeXmlData && storeXmlData.xmlString) {
+    xmlString = storeXmlData && storeXmlData.xmlString
+    console.timeEnd('缓存获取xml')
+    // 使用完后删除数据
+    dbService.delete(id)
+  } else {
+    xmlString = await fetch(xmlUr).then((response) => response.text());
+  }
+  return xmlString;
+}
+
 const getMusicInfo = async (res: any) => {
   // 是否支持总谱
   state.isScoreRender = res.data?.isScoreRender
   // 是否默认显示总谱
   state.defaultScoreRender = res.data?.defaultScoreRender
-  /* 获取声轨列表 */
-  let xmlString = await fetch(res.data.xmlFileUrl).then((response) => response.text());
+  // let xmlString = await fetch(res.data.xmlFileUrl).then((response) => response.text());
+  let xmlString: string = await queryMusicXml(res.data.bizId + "", res.data.xmlFileUrl);
   xmlString = xmlAddPartName(xmlString);
   downloadXmlStr.value = xmlString //给musice-score 赋值xmlString 以免加载2次
-  const tracks = xmlToTracks(xmlString) //获取声轨列表  
+  /* 获取声轨列表 */
+  const tracks = xmlToTracks(xmlString)
   // 是否显示节拍器  (管乐迷 默认显示节拍器)
   //state.isMixBeat = res.data?.isMixBeat  
   /* 设置partIndex */

+ 4 - 3
src/view/audio-list/index.tsx

@@ -214,7 +214,8 @@ const createAudio = (src?: string): Promise<HTMLAudioElement | null> => {
 		return Promise.resolve(null)
 	}
 	return new Promise((resolve) => {
-		const a = new Audio(src + '?v=' + Date.now());
+		// const a = new Audio(src + '?v=' + Date.now());
+		const a = new Audio(src);
 		a.onloadedmetadata = () => {
 			resolve(a);
 		};
@@ -253,7 +254,7 @@ async function mergeBeatAudio(music?:string){
 			CrunkerInstance = new Crunker()
 		}
 		console.time("音频加载时间")
-		const [musicBuff, tickBuff, tockBuff] = await CrunkerInstance.fetchAudio(music?`${music}?v=${Date.now()}`:undefined, tickMp3, tockMp3)
+		const [musicBuff, tickBuff, tockBuff] = await CrunkerInstance.fetchAudio(music?`${music}}`:undefined, tickMp3, tockMp3)
 		console.timeEnd("音频加载时间")
 		// 计算音频空白时间
 		const silenceDuration = musicBuff&&!state.isEvxml ? CrunkerInstance.calculateSilenceDuration(musicBuff) : 0
@@ -545,7 +546,7 @@ export default defineComponent({
 			if(state.isPreView){
 				state.isLoading = false;
 				return
-			}			
+			}
 			if (state.playMode !== "MIDI") {
 				console.time("音频加载时间123")
 				// 处理音源