TIANYONG vor 1 Jahr
Ursprung
Commit
d7b7f8dae3
2 geänderte Dateien mit 37 neuen und 5 gelöschten Zeilen
  1. 2 2
      src/view/music-score/index.tsx
  2. 35 3
      src/view/tick/index.tsx

+ 2 - 2
src/view/music-score/index.tsx

@@ -10,7 +10,7 @@ import { getGradualLengthByXml } from "/src/helpers/calcSpeed";
 import { resetFormate, resetGivenFormate, setGlobalMusicSheet } from "/src/helpers/customMusicScore"
 
 export const musicRenderTypeKey = "musicRenderType";
-
+let osmd: any = null;
 const musicData = reactive({
 	showSelection: false, // 可以加载点击浮层
 	isRenderLoading: true,
@@ -69,7 +69,7 @@ export default defineComponent({
 			const container = document.getElementById("musicAndSelection");
 			if (!container || !musicData.score) return;
 			setGlobalMusicSheet();
-			const osmd = new OpenSheetMusicDisplay(container, {
+			osmd = new OpenSheetMusicDisplay(container, {
 				drawTitle: false,
 				drawSubtitle: false,
 				// drawMeasureNumbers: false,

+ 35 - 3
src/view/tick/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive } from "vue";
+import { defineComponent, reactive, onMounted } from "vue";
 import tockAndTick from "/src/constant/tockAndTick.json";
 import { Howl } from "howler";
 import { Popup } from "vant";
@@ -20,7 +20,7 @@ export const tickData = reactive({
 	show: false,
 });
 
-const handlePlay = (i: number, source: Howl | null) => {
+const handlePlay = (i: number, source: any | null) => {
 	return new Promise((resolve) => {
 		setTimeout(() => {
 			if (tickData.tickEnd) {
@@ -34,6 +34,25 @@ const handlePlay = (i: number, source: Howl | null) => {
 	});
 };
 
+// HTMLAudioElement 音频
+const audioData = reactive({
+	tick: null as unknown as HTMLAudioElement,
+	tock: null as unknown as HTMLAudioElement,
+});
+
+const createAudio = (src: string): Promise<HTMLAudioElement | null> => {
+	return new Promise((resolve) => {
+		const a = new Audio(src + '?v=' + Date.now());
+		a.load();
+		a.onloadedmetadata = () => {
+			resolve(a);
+		};
+		a.onerror = () => {
+			resolve(null);
+		};
+	});
+};
+
 /** 设置节拍器
  * @param beatLengthInMilliseconds 节拍间隔时间
  * @param beat 节拍数
@@ -54,9 +73,9 @@ export const handleStartTick = async () => {
 			// 如果是ios手机,需要强制使用audio,不然部分系统版本第一次播放没有声音
 			html5: browserInfo.ios,
 		});
+
 		tickData.source2 = new Howl({
 			src: tockAndTick.tock,
-			html5: browserInfo.ios,
 		});
 		tickData.state = "ok";
 	}
@@ -66,6 +85,7 @@ export const handleStartTick = async () => {
 		// 提前结束, 直接放回false
 		if (tickData.tickEnd) return false;
 		const source = i === 0 ? tickData.source1 : i === tickData.len ? null : tickData.source2;
+		// const source = i === 0 ? audioData.tick : i === tickData.len ? null : audioData.tock;
 		await handlePlay(i, source)
 	}
 	tickData.show = false;
@@ -79,6 +99,18 @@ export default defineComponent({
 		const handleClose = () => {
 			tickData.tickEnd = true
 		};
+		onMounted(() => {
+			Promise.all([createAudio(tockAndTick.tick), createAudio(tockAndTick.tock)]).then(
+				([tick, tock]) => {
+					if (tick) {
+						audioData.tick = tick;
+					}
+					if (tock) {
+						audioData.tock = tock;
+					}
+				}
+			);
+		});		
 		return () => (
 			<Popup class={styles.popup} v-model:show={tickData.show} closeable onClickCloseIcon={handleClose}>
 				<div class={styles.dots}>