fix:bug

src/page-instrument/component/mode-type-mode/icon/iconModel2.svg

@@ -81,6 +81,43 @@
                 <feMergeNode in="SourceGraphic"></feMergeNode>
             </feMerge>
         </filter>
+        <filter x="-39.4%" y="-41.2%" width="178.7%" height="182.5%" filterUnits="objectBoundingBox" id="filter-18">
+            <feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.728316965   0 0 0 0 0.556862745   0 0 0 0 1  0 0 0 0.711565778 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <polygon id="path-19" points="0 0 44.4479803 0 44.4479803 42.4331421 0 42.4331421"></polygon>
+        <linearGradient x1="-1.24344979e-12%" y1="4.43028371%" x2="100%" y2="95.5697163%" id="linearGradient-21">
+            <stop stop-color="#D4A9FF" offset="0%"></stop>
+            <stop stop-color="#8F80FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M33.5648311,0.224284506 C32.0419831,-0.241134498 30.2647887,0.0319221854 28.9381506,0.912224329 C24.7256912,3.70555345 25.1051921,9.49190985 25.1051921,13.9423262 L25.1051921,19.5550675 C22.5358906,16.2311118 18.5406349,14.0857829 14.0399164,14.0857829 C6.2859874,14.0857829 0,20.4312942 0,28.2594625 C0,36.0868157 6.2859874,42.4331421 14.0399164,42.4331421 C20.0303776,42.4331421 25.1318379,38.6380617 27.1480371,33.305713 C27.5226932,32.5696826 27.8004555,31.4652295 27.8723185,31.1481577 C28.8129961,27.0254093 28.9599517,22.6948118 29.1537394,18.5280483 C29.1965342,17.6126971 29.2918131,14.1094206 30.8404995,14.3751415 C30.9123625,14.3873679 30.9834179,14.4069302 31.0528585,14.4297528 C31.8449656,14.6962887 32.5409863,15.3508097 33.3096774,15.7053758 C34.0985547,16.0697231 34.9334565,16.3370741 35.7885446,16.4935723 C37.5051803,16.8090139 39.3203248,16.6696327 40.9158432,15.9270815 C41.86944,15.4836701 42.6776961,14.7769831 43.2687485,13.9023866 C43.716075,13.2388996 44.0414768,12.4939032 44.2497985,11.7203784 C44.2635252,11.6673973 44.470232,10.7088461 44.4460085,10.7072159 C41.3760889,10.4692082 39.0005751,9.08273237 37.706235,6.23153154 C36.7098434,4.03729694 36.1946912,1.02878285 33.5648311,0.224284506 Z" id="path-22"></path>
+        <filter x="-11.2%" y="-11.8%" width="122.5%" height="123.6%" filterUnits="objectBoundingBox" id="filter-23">
+            <feGaussianBlur stdDeviation="2.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="-2" dy="-5" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.429804579   0 0 0 0 0.196855945   0 0 0 0 1  0 0 0 0.361942745 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
+            <feOffset dx="0" dy="5" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.752621357   0 0 0 0 0.539367378   0 0 0 0 1  0 0 0 0.527534965 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner3"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner3" result="shadowOffsetInner3"></feOffset>
+            <feComposite in="shadowOffsetInner3" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner3"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.499919249   0 0 0 0 0.319798018   0 0 0 0 1  0 0 0 0.480687281 0" type="matrix" in="shadowInnerInner3" result="shadowMatrixInner3"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner3"></feMergeNode>
+            </feMerge>
+        </filter>
+        <filter x="-107.1%" y="-80.4%" width="314.3%" height="260.7%" filterUnits="objectBoundingBox" id="filter-24">
+            <feGaussianBlur stdDeviation="2.16471241" in="SourceGraphic"></feGaussianBlur>
+        </filter>
     </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="50、上课页面" transform="translate(-792.000000, -862.000000)">
@@ -131,6 +168,19 @@
                     <g id="向右" filter="url(#filter-17)" transform="translate(51.946334, 32.470686)" fill="#000000" fill-rule="nonzero" opacity="0">
                         <rect id="矩形" x="0" y="0" width="51.9463339" height="51.9530979"></rect>
                     </g>
+                    <g id="编组备份-5" filter="url(#filter-18)" transform="translate(56.998947, 36.937371)">
+                        <mask id="mask-20" fill="white">
+                            <use xlink:href="#path-19"></use>
+                        </mask>
+                        <g id="Clip-2"></g>
+                        <g id="编组-8" mask="url(#mask-20)">
+                            <g id="Fill-1">
+                                <use fill="url(#linearGradient-21)" fill-rule="evenodd" xlink:href="#path-22"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
+                            </g>
+                            <ellipse id="椭圆形" fill-opacity="0.387292395" fill="#FFFFFF" filter="url(#filter-24)" transform="translate(9.091632, 24.247510) rotate(-37.000000) translate(-9.091632, -24.247510) " cx="9.09163233" cy="24.2475098" rx="3.03068703" ry="4.04106107"></ellipse>
+                        </g>
+                    </g>
                 </g>
             </g>
         </g>

src/page-instrument/header-top/index.module.less

@@ -50,9 +50,6 @@
     border-radius: 4px;
     color: #999;
     cursor: pointer;
-    &:hover{
-        background-color: rgba(0, 0, 0, .1);
-    }
     .iconBtn {
         display: block;
         width: 25px;
@@ -119,7 +116,6 @@
     position: fixed;
     right: 88px;
     bottom: 32px;
-    padding: 0;
 
     .iconBtn {
         display: block;

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

@@ -13,7 +13,7 @@ import {
 } from "vue";
 import { formateTimes } from "../../helpers/formateMusic";
 import Metronome, { metronomeData } from "../../helpers/metronome";
-import state, { IAudioState, IPlatform, isRhythmicExercises } from "/src/state";
+import state, { EnumMusicRenderType, handleSetSpeed, IAudioState, IPlatform, isRhythmicExercises } from "/src/state";
 import { setGlobalData } from "../../utils";
 import AudioList from "../../view/audio-list";
 import MusicScore, { resetMusicScore } from "../../view/music-score";
@@ -69,7 +69,6 @@ export default defineComponent({
 				if (state.setting.camera) {
 					api_openCamera();
 				}
-				// console.log("🚀 ~ settting:", settting)
 			}
 		});
 		// console.log(route.params, query)
@@ -144,6 +143,9 @@ export default defineComponent({
 			if (state.platform === IPlatform.PC) {
 				state.zoom = 1.5;
 			}
+
+			//课堂乐器,默认简谱
+			state.musicRenderType = EnumMusicRenderType.firstTone
 		};
 
 		const setCustom = () => {
@@ -154,7 +156,7 @@ export default defineComponent({
 
 		onMounted(() => {
 			(window as any).appName = "colexiu";
-			const id = '43541' || query.id;
+			const id = "43541" || query.id;
 			Promise.all([sysMusicScoreAccompanimentQueryPage(id)]).then((values) => {
 				getMusicInfo(values[0]);
 			});
@@ -165,9 +167,14 @@ export default defineComponent({
 		const handleRendered = (osmd: any) => {
 			detailData.skeletonLoading = false;
 			state.osmd = osmd;
-			const saveSpeed = (store.get("speeds") || {})[state.examSongId];
-			const bpm = (osmd as any).bpm || osmd.Sheet.userStartTempoInBPM;
-			state.speed = saveSpeed || bpm || 100;
+			const saveSpeed =
+				(store.get("speeds") || {})[state.examSongId] ||
+				(osmd as any).bpm ||
+				osmd.Sheet.userStartTempoInBPM;
+			// 加载本地缓存的速度
+			if (saveSpeed) {
+				handleSetSpeed(saveSpeed);
+			}
 			state.times = formateTimes(osmd);
 			console.log("🚀 ~ state.times:", state.times);
 			try {
@@ -176,8 +183,8 @@ export default defineComponent({
 			} catch (error) {}
 			// 设置节拍器
 			if (state.needTick) {
-				const beatLengthInMilliseconds =
-					osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds || (60 / bpm) * 1000;
+				const beatLengthInMilliseconds = (60 / state.speed) * 1000;
+				// console.log(state.speed, osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds , (60 / state.speed) * 1000)
 				handleInitTick(
 					beatLengthInMilliseconds,
 					osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4
@@ -246,7 +253,7 @@ export default defineComponent({
 			() => state.playState,
 			() => {
 				detailData.headerHide = state.playState === "play" ? true : false;
-				sendParentMessage(state.playState)
+				sendParentMessage(state.playState);
 			}
 		);
 		onMounted(() => {
@@ -257,7 +264,11 @@ export default defineComponent({
 		});
 		return () => (
 			<div
-				class={[styles.detail, state.setting.eyeProtection && "eyeProtection", query.platform === "pc" && styles.PC]}
+				class={[
+					styles.detail,
+					state.setting.eyeProtection && "eyeProtection",
+					query.platform === "pc" && styles.PC,
+				]}
 				style={{
 					paddingLeft: detailData.paddingLeft,
 					opacity: state.setting.camera ? `${state.setting.cameraOpacity / 100}` : "",

src/state.ts

@@ -12,7 +12,15 @@ import { browser, setStorageSpeed } from "./utils";
 
 /** 入门 | 进阶 | 大师 */
 export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";
-export type IMusicRenderType = "staff" | "firstTone" | "fixedTone";
+/** 渲染类型: 五线谱,简谱 */
+export enum EnumMusicRenderType {
+	/** 五线谱 */
+	staff = "staff",
+	/** 简谱 */
+	firstTone = "firstTone",
+	/** 固定音高 */
+	fixedTone = "fixedTone"
+}
 export const musicscoresettingKey = "musicscoresetting";
 /** 有声音的是那个音源 */
 export type IPlayState = "music" | "background"
@@ -29,7 +37,7 @@ const state = reactive({
 	/** 来源 : PC , app */
 	platform: '' as IPlatform,
 	appName: "" as "GYM" | "COLEXIU",
-	musicRenderType: "staff" as IMusicRenderType,
+	musicRenderType: EnumMusicRenderType.staff as EnumMusicRenderType,
 	/**曲谱是否渲染完成 */
 	musicRendered: false,
 	/** 当前曲谱数据ID, 和曲谱ID不一致 */
@@ -384,11 +392,6 @@ export const handleResetPlay = () => {
 export const handleSetSpeed = (speed: number) => {
 	setStorageSpeed(state.examSongId, speed)
 	state.speed = speed;
-	const playbackRate = speed / state.originSpeed;
-	console.log("🚀 ~ playbackRate:", speed, state.originSpeed);
-
-	// 按照比例设置速度
-	setAudioPlaybackRate(playbackRate);
 };
 /** 清除选段状态 */
 export const clearSelection = () => {

src/style.css

@@ -3,6 +3,7 @@
   padding   : 0;
   box-sizing: border-box;
 }
+img { -webkit-touch-callout: none; }
 
 :root {
   --cursor-color        : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAABRJREFUCB1jZDy49T8DEDCBCBAAACTkAnq23WmtAAAAAElFTkSuQmCC);

src/view/audio-list/index.tsx

@@ -11,6 +11,10 @@ const audioData = reactive({
 const midiRef = ref();
 /** 播放或暂停 */
 export const audioListStart = (type: "play" | "paused") => {
+	// 开始播放之前, 先设置倍数
+	if( type === "play" && state.originSpeed !== 0){
+		setAudioPlaybackRate(state.speed / state.originSpeed)
+	}
 	// 如果是midi播放
 	if (audioData.midiRender) {
 		handleTogglePlayMidi(type);

src/view/music-score/index.tsx

@@ -2,7 +2,7 @@ import { computed, defineComponent, onMounted, reactive, ref } from "vue";
 import { formatXML, onlyVisible } from "../../helpers/formateMusic";
 // // @ts-ignore
 import { OpenSheetMusicDisplay } from "/osmd-extended/src";
-import state from "/src/state";
+import state, { EnumMusicRenderType } from "/src/state";
 import Selection from "../selection";
 import styles from "./index.module.less";
 import queryString from "query-string";
@@ -40,7 +40,10 @@ export default defineComponent({
 		/** 设置 曲谱模式,五线谱还是简谱 */
 		const setRenderType = () => {
 			const musicRenderType: any = sessionStorage.getItem(musicRenderTypeKey);
-			state.musicRenderType = ["staff", "firstTone", "fixedTone"].includes(musicRenderType) ? musicRenderType : "staff";
+			if (musicRenderType in EnumMusicRenderType) {
+				state.musicRenderType = musicRenderType;
+			}
+			
 		};
 		const getXML = async () => {
 			const res = await fetch(state.xmlUrl).then((response) => response.text());
@@ -73,9 +76,9 @@ export default defineComponent({
 			osmd.EngravingRules.PageTopMarginNarrow = 3;
 			osmd.EngravingRules.PageLeftMargin = 2;
 			osmd.EngravingRules.PageBottomMargin = 2;
-			osmd.EngravingRules.DYMusicScoreType = state.musicRenderType === "staff" ? "staff" : "jianpu";
+			osmd.EngravingRules.DYMusicScoreType = state.musicRenderType === EnumMusicRenderType.staff ? "staff" : "jianpu";
 			// 如果为固定调,需要加入全局
-			if (state.musicRenderType === "fixedTone") {
+			if (state.musicRenderType === EnumMusicRenderType.fixedTone) {
 				(window as any).sett = {
 					keySignature: true,
 				};

src/view/tick/index.tsx

@@ -3,6 +3,7 @@ import tockAndTick from "/src/constant/tockAndTick.json";
 import { Howl } from "howler";
 import { Popup } from "vant";
 import styles from "./index.module.less";
+import state from "/src/state";
 
 const tickData = reactive({
 	list: [] as number[],
@@ -31,7 +32,10 @@ const handlePlay = (i: number, source: Howl | null) => {
 	});
 };
 
-/** 设置节拍器 */
+/** 设置节拍器
+ * @param beatLengthInMilliseconds 节拍间隔时间
+ * @param beat 节拍数
+ */
 export const handleInitTick = (beatLengthInMilliseconds: number, beat: number) => {
 	tickData.state = "";
 	tickData.beatLengthInMilliseconds = beatLengthInMilliseconds
@@ -52,6 +56,7 @@ export const handleStartTick = async () => {
 		tickData.state = "ok";
 	}
 	tickData.index = 0;
+	tickData.beatLengthInMilliseconds = (60 / state.speed) * 1000;
 	for(let i = 0; i <= tickData.len; i++){
 		// 提前结束, 直接放回false
 		if (tickData.tickEnd) return false;