state.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847
  1. import { closeToast, showToast } from "vant";
  2. import { nextTick, reactive } from "vue";
  3. import { OpenSheetMusicDisplay } from "../osmd-extended/src";
  4. import { metronomeData } from "./helpers/metronome";
  5. import { GradualNote, GradualTimes, GradualVersion } from "./type";
  6. import { handleEndEvaluat, handleStartEvaluat } from "./view/evaluating";
  7. import { IFingering, mappingVoicePart, subjectFingering, matchVoicePart } from "/src/view/fingering/fingering-config";
  8. import { handleStartTick } from "./view/tick";
  9. import { audioListStart, getAudioCurrentTime, getAudioDuration, setAudioCurrentTime, setAudioPlaybackRate } from "./view/audio-list";
  10. import { toggleFollow } from "./view/follow-practice";
  11. import { browser, setStorageSpeed, setGlobalData } from "./utils";
  12. import { api_createMusicPlayer } from "./helpers/communication";
  13. import { verifyCanRepeat } from "./helpers/formateMusic";
  14. import { getMusicSheetDetail } from "./utils/baseApi"
  15. import { getQuery } from "/src/utils/queryString";
  16. const query: any = getQuery();
  17. /** 入门 | 进阶 | 大师 */
  18. export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";
  19. /** 渲染类型: 五线谱,简谱 */
  20. export enum EnumMusicRenderType {
  21. /** 五线谱 */
  22. staff = "staff",
  23. /** 简谱 */
  24. firstTone = "firstTone",
  25. /** 固定音高 */
  26. fixedTone = "fixedTone",
  27. }
  28. export const musicscoresettingKey = "musicscoresetting";
  29. /** 有声音的是那个音源 */
  30. export type IPlayState = "music" | "background";
  31. /** 播放状态 */
  32. export type IAudioState = "play" | "paused";
  33. /** 来源 */
  34. export enum IPlatform {
  35. APP = "APP",
  36. PC = "PC",
  37. }
  38. /**
  39. * 特殊教材分类id
  40. */
  41. const classids = [1, 2, 6, 7, 8, 9, 3, 10, 11, 12, 13, 4, 14, 15, 16, 17, 30, 31, 35, 36, 46, 108]; // 大雅金唐, 竖笛教程, 声部训练展开的分类ID
  42. // 乐器code码
  43. const musicalInstrumentCodeInfo = [
  44. {
  45. name: '排箫',
  46. code: 'Panpipes',
  47. id: 1
  48. },
  49. {
  50. name: '陶笛',
  51. code: 'Ocarina',
  52. id: 2
  53. },
  54. {
  55. name: '葫芦丝',
  56. code: 'Woodwind',
  57. id: 3
  58. },
  59. {
  60. name: '德式竖笛',
  61. code: 'Tenor Recorder',
  62. id: 4
  63. },
  64. {
  65. name: '口风琴',
  66. code: 'Nai',
  67. id: 5
  68. },
  69. {
  70. name: '英式竖笛',
  71. code: 'BaroqueRecorder',
  72. id: 6
  73. },
  74. {
  75. name: '打击乐',
  76. code: 'PERCUSSION',
  77. id: 7
  78. },
  79. {
  80. name: '长笛',
  81. code: 'FLUTE',
  82. id: 8
  83. },
  84. {
  85. name: '萨克斯',
  86. code: 'SAX',
  87. id: 9
  88. },
  89. {
  90. name: '单簧管',
  91. code: 'CLARINET',
  92. id: 10
  93. },
  94. {
  95. name: '小号',
  96. code: 'TRUMPET',
  97. id: 11
  98. },
  99. {
  100. name: '长号',
  101. code: 'TROMBONE',
  102. id: 12
  103. },
  104. {
  105. name: '圆号',
  106. code: 'HORN',
  107. id: 13
  108. },
  109. {
  110. name: '上低音号',
  111. code: 'BARITONE',
  112. id: 14
  113. },
  114. {
  115. name: '大号',
  116. code: 'TUBA',
  117. id: 15
  118. }
  119. ]
  120. const state = reactive({
  121. /** 来源 : PC , app */
  122. platform: "" as IPlatform,
  123. appName: "" as "GYM" | "COLEXIU",
  124. musicRenderType: EnumMusicRenderType.staff as EnumMusicRenderType,
  125. /**曲谱是否渲染完成 */
  126. musicRendered: false,
  127. /** 当前曲谱数据ID, 和曲谱ID不一致 */
  128. detailId: "",
  129. /** 曲谱资源URL */
  130. xmlUrl: "",
  131. /** 声部ID */
  132. subjectId: 0 as number,
  133. trackId: 0 as string | number,
  134. /** 分类ID */
  135. categoriesId: 0,
  136. /** 分类名称 */
  137. categoriesName: "",
  138. /** 是否支持评测 */
  139. enableEvaluation: true,
  140. /** 是否支持转谱 */
  141. enableNotation: false,
  142. /** 曲谱ID */
  143. examSongId: "",
  144. /** 曲谱名称 */
  145. examSongName: "",
  146. /** 曲谱封面 */
  147. coverImg: "",
  148. /** 扩展字段 */
  149. extConfigJson: {} as any,
  150. /** 扩展样式字段 */
  151. extStyleConfigJson: {} as any,
  152. /** 是否开启节拍器 */
  153. isOpenMetronome: false,
  154. /** 是否显示指法 */
  155. isShowFingering: false,
  156. /** 原音 */
  157. music: "",
  158. /** 伴奏 */
  159. accompany: "",
  160. /** midiURL */
  161. midiUrl: "",
  162. /** 父分ID */
  163. parentCategoriesId: 0,
  164. /** 分类ID */
  165. musicSheetCategoriesId: 0,
  166. /** 资源类型: mp3 | midi */
  167. playMode: "MP3" as "MP3" | "MIDI",
  168. /** 设置的速度 */
  169. speed: 0,
  170. /** 曲谱音频正常的速度 */
  171. originSpeed: 0,
  172. /** 分轨名称 */
  173. track: "",
  174. /** 当前显示声部索引 */
  175. partIndex: 0,
  176. /** 是否需要节拍器 */
  177. needTick: false,
  178. /** 曲谱实例 */
  179. osmd: null as unknown as OpenSheetMusicDisplay,
  180. /**是否是特殊乐谱类型, 主要针对管乐迷 */
  181. isSpecialBookCategory: false,
  182. /** 播放状态 */
  183. playState: "paused" as IAudioState,
  184. /** 播放结束状态 */
  185. playEnd: false,
  186. /** 播放那个: 原音,伴奏 */
  187. playSource: "music" as IPlayState,
  188. /** 播放进度 */
  189. playProgress: 0,
  190. /** 激活的note index */
  191. activeNoteIndex: 0,
  192. /** 激活的小节 */
  193. activeMeasureIndex: 0,
  194. /** 选段状态 */
  195. sectionStatus: false,
  196. /** 选段数据 */
  197. section: [] as any[],
  198. /** 选段背景 */
  199. sectionBoundingBoxs: [] as any[],
  200. /** 开启选段预备 */
  201. isOpenPrepare: false,
  202. /** 选段预备 */
  203. sectionFirst: null as any,
  204. /** 音符数据 */
  205. times: [] as any[],
  206. /** 播放模式 */
  207. modeType: "practise" as "practise" | "follow" | "evaluating",
  208. /** 设置 */
  209. setting: {
  210. /** 效音提醒 */
  211. soundEffect: true,
  212. /** 护眼模式 */
  213. eyeProtection: false,
  214. /** 摄像头 */
  215. camera: false,
  216. /** 摄像头透明度 */
  217. cameraOpacity: 70,
  218. /** 循环播放 */
  219. repeatAutoPlay: true,
  220. /** 显示指法 */
  221. displayFingering: true,
  222. /** 显示光标 */
  223. displayCursor: true,
  224. /** 频率 */
  225. frequency: 442,
  226. /** 评测难度 */
  227. evaluationDifficulty: "ADVANCED" as IDifficulty,
  228. /** 保存到相册 */
  229. saveToAlbum: true,
  230. /** 开启伴奏 */
  231. enableAccompaniment: true,
  232. /** 反应时间 */
  233. reactionTimeMs: 0,
  234. },
  235. /** 节拍器的时间 */
  236. fixtime: 0,
  237. /** 指法信息 */
  238. fingeringInfo: {} as IFingering,
  239. /** 滚动容器的ID */
  240. scrollContainer: "musicAndSelection",
  241. /** 是否是打击乐 */
  242. isPercussion: false,
  243. /** 是否重复节拍器的时间 */
  244. repeatedBeats: 0,
  245. /**当前曲谱中所有声部名字 */
  246. partListNames: [] as any,
  247. /** 渐变速度信息 */
  248. gradual: [] as GradualNote[],
  249. /** 渐变速度版本 */
  250. gradualVersion: GradualVersion.BASE as GradualVersion,
  251. /** 渐变时间信息 */
  252. gradualTimes: null as GradualTimes,
  253. /** 单声部多声轨 */
  254. multitrack: 0,
  255. /** 缩放 */
  256. zoom: 0.8,
  257. /** 渲染曲谱比例 */
  258. musicZoom: 1,
  259. /** 练习,评测是否是选段模式 */
  260. isSelectMeasureMode: false,
  261. /** 是否是评分显示 */
  262. isReport: false,
  263. /** 是否隐藏评测报告弹窗,保存演奏按钮,默认不隐藏 */
  264. isHideEvaluatReportSaveBtn: false,
  265. /** 是否是合奏 */
  266. isConcert: false,
  267. /** 用户选择的结束小节数 */
  268. userChooseEndIndex: 0,
  269. /** 重播小节集合信息 */
  270. repeatInfo: [],
  271. /** 多分轨的曲子,可支持筛选的分轨 */
  272. canSelectTracks: "",
  273. /** 声部codeId,用于匹配乐器指法、声部转调、特殊声部处理等 */
  274. subjectCodeId: 0 as number,
  275. });
  276. const browserInfo = browser();
  277. let offset_duration = 0;
  278. /** 自定义数据 */
  279. export const customData = reactive({
  280. /** 自定义音符时值 */
  281. customNoteRealValue: [] as any,
  282. /** 自定义音符按读取到的时值 */
  283. customNoteCurrentTime: false,
  284. });
  285. /** 在渲染前后计算光标应该走到的音符 */
  286. const setStep = () => {
  287. if (state.playState !== "play") {
  288. console.log("暂停播放");
  289. return;
  290. }
  291. let startTime = Date.now();
  292. requestAnimationFrame(() => {
  293. const endTime = Date.now();
  294. // 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
  295. if (endTime - startTime < 16.7) {
  296. handlePlaying();
  297. setStep();
  298. } else {
  299. setTimeout(() => {
  300. handlePlaying();
  301. setStep();
  302. }, 16.7);
  303. }
  304. });
  305. };
  306. /** 开始播放 */
  307. export const onPlay = () => {
  308. console.log("开始播放");
  309. state.playEnd = false;
  310. offset_duration = browserInfo.xiaomi ? 0.2 : 0.08;
  311. setStep();
  312. };
  313. /** 播放模式结束自动重播 */
  314. const autoResetPlay = () => {
  315. if (state.modeType !== "practise") return;
  316. skipNotePlay(0, true);
  317. // 没有开启自动重播, 不是练习模式
  318. if (!state.setting.repeatAutoPlay) return;
  319. scrollViewNote();
  320. setTimeout(() => {
  321. togglePlay("play");
  322. }, 1000);
  323. };
  324. /** 播放完成事件 */
  325. export const onEnded = () => {
  326. console.log("音频播放结束");
  327. // 修改状态为结束
  328. state.playEnd = true;
  329. state.playState = "paused";
  330. // 结束播放
  331. audioListStart(state.playState);
  332. // 调用结束评测
  333. handleEndEvaluat(true);
  334. // 调用自动重复播放
  335. autoResetPlay();
  336. };
  337. /**
  338. * 播放一直触发的事件
  339. */
  340. const handlePlaying = () => {
  341. const currentTime = getAudioCurrentTime();
  342. const duration = getAudioDuration();
  343. state.playProgress = (currentTime / duration) * 100;
  344. let item = getNote(currentTime);
  345. // console.log(11111,currentTime,duration,state.playSource, item.i)
  346. if (item) {
  347. // 选段状态下
  348. if (state.sectionStatus && state.section.length === 2) {
  349. // 如果开启了预备拍
  350. const selectStartItem = state.sectionFirst ? state.sectionFirst : state.section[0];
  351. const selectEndItem = state.section[1];
  352. if (Math.abs(selectEndItem.endtime - currentTime) < offset_duration) {
  353. console.log("选段播放结束");
  354. // 如果为选段评测模式
  355. if (state.modeType === "evaluating" && state.isSelectMeasureMode) {
  356. onEnded();
  357. return;
  358. }
  359. // #8698 bug修复
  360. if (state.modeType === "practise" && state.sectionStatus && !state.setting.repeatAutoPlay) {
  361. onEnded();
  362. resetPlaybackToStart();
  363. return;
  364. }
  365. item = selectStartItem;
  366. setAudioCurrentTime(selectStartItem.time, selectStartItem.i);
  367. }
  368. }
  369. gotoNext(item);
  370. }
  371. metronomeData.metro?.sound(currentTime);
  372. };
  373. /** 跳转到指定音符开始播放 */
  374. export const skipNotePlay = (itemIndex: number, isStart = false) => {
  375. const item = state.times[itemIndex];
  376. let itemTime = item.time;
  377. if (isStart) {
  378. itemTime = 0;
  379. }
  380. if (item) {
  381. setAudioCurrentTime(itemTime, itemIndex);
  382. gotoNext(item);
  383. metronomeData.metro?.sound(itemTime);
  384. }
  385. };
  386. /**
  387. * 切换曲谱播放状态
  388. * @param playState 可选: 默认 undefined, 需要切换的状态 play:播放, paused: 暂停
  389. */
  390. export const togglePlay = async (playState?: "play" | "paused") => {
  391. state.playState = playState ? playState : state.playState === "paused" ? "play" : "paused";
  392. if (state.playState === "play" && state.sectionStatus && state.section.length == 2 && state.playProgress === 0) {
  393. resetPlaybackToStart();
  394. }
  395. // 设置为开始播放时, 如果需要节拍,先播放节拍器
  396. if (state.playState === "play" && state.needTick) {
  397. const tickend = await handleStartTick();
  398. // console.log("🚀 ~ tickend:", tickend)
  399. // 节拍器返回false, 取消播放
  400. if (!tickend) {
  401. state.playState = "paused";
  402. return false;
  403. }
  404. }
  405. // 如果选段没有结束, 直接开始播放,清空选段状态
  406. if (state.playState == "play") {
  407. if (state.sectionStatus && state.section.length < 2) {
  408. clearSelection();
  409. }
  410. }
  411. audioListStart(state.playState);
  412. return true;
  413. };
  414. /** 结束播放 */
  415. export const handleStopPlay = () => {
  416. state.playState = "paused";
  417. audioListStart(state.playState);
  418. };
  419. /** 重置播放为开始 */
  420. export const resetPlaybackToStart = () => {
  421. // 如果为选段状态
  422. if (state.sectionStatus && state.section.length === 2) {
  423. state.section = formateSelectMearure(state.section);
  424. return;
  425. }
  426. skipNotePlay(0, true);
  427. };
  428. /** 跳转到指定音符 */
  429. export const gotoCustomNote = (index: number) => {
  430. try {
  431. state.osmd.cursor.reset();
  432. } catch (error) {}
  433. for (let i = 0; i < index; i++) {
  434. state.osmd.cursor.next();
  435. }
  436. };
  437. const setCursorPosition = (note: any, cursor: any) => {
  438. if (state.musicRenderType === EnumMusicRenderType.firstTone || state.musicRenderType === EnumMusicRenderType.fixedTone) {
  439. nextTick(() => {
  440. let bbox = note.bbox;
  441. if (!bbox) {
  442. const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
  443. x: 0,
  444. y: 0,
  445. };
  446. const parentLeft = musicContainer.x || 0;
  447. const noteEle = document.querySelector(`#vf-${note.svgElement?.attrs?.id}`);
  448. if (noteEle) {
  449. const noteHead = noteEle.querySelector(".vf-numbered-note-head");
  450. const noteHeadBbox = noteHead?.getBoundingClientRect?.();
  451. if (noteHeadBbox) {
  452. note.bbox = {
  453. left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
  454. width: noteHeadBbox.width * 1.5,
  455. };
  456. bbox = note.bbox;
  457. }
  458. }
  459. }
  460. if (!bbox) return;
  461. const baseW = state.platform === IPlatform.PC ? 29 : 18;
  462. const width = (bbox.width - baseW) / 3;
  463. // console.log(555555,bbox.left,width)
  464. cursor.cursorElement.style.left = bbox.left + "px";
  465. cursor.cursorElement.style.transform = `translateX(${width}px)`;
  466. });
  467. }
  468. };
  469. /** 跳转到下一个音符 */
  470. export const gotoNext = (note: any) => {
  471. // console.log(33333333333,state.activeNoteIndex,note.i)
  472. const num = note.i;
  473. if (state.activeNoteIndex === note.i) {
  474. try {
  475. setCursorPosition(note, state.osmd.cursor);
  476. } catch (error) {
  477. console.log(error);
  478. }
  479. return;
  480. }
  481. const osmd = state.osmd;
  482. let prev = state.activeNoteIndex;
  483. state.activeNoteIndex = num;
  484. state.activeMeasureIndex = note.MeasureNumberXML;
  485. if (prev && num - prev === 1) {
  486. osmd.cursor.next();
  487. } else if (prev && num - prev > 0) {
  488. while (num - prev > 0) {
  489. prev++;
  490. osmd.cursor.next();
  491. }
  492. } else {
  493. gotoCustomNote(num);
  494. }
  495. try {
  496. setCursorPosition(note, state.osmd.cursor);
  497. } catch (error) {
  498. console.log(error);
  499. }
  500. scrollViewNote();
  501. };
  502. /** 获取指定音符 */
  503. export const getNote = (currentTime: number) => {
  504. const times = state.times;
  505. const len = state.times.length;
  506. /** 播放超过了最后一个音符的时间,直接结束, 2秒误差 */
  507. if (currentTime > times[len - 1].endtime + 2) {
  508. onEnded();
  509. return;
  510. }
  511. let _item = null as any;
  512. for (let i = state.activeNoteIndex; i < len; i++) {
  513. const item = times[i];
  514. const prevItem = times[i - 1];
  515. if (currentTime >= item.time) {
  516. if (!prevItem || item.time != prevItem.time) {
  517. _item = item;
  518. }
  519. } else {
  520. break;
  521. }
  522. }
  523. // console.log("activeNoteIndex", currentTime, state.activeNoteIndex, _item.i);
  524. return _item;
  525. };
  526. /** 重播 */
  527. export const handleResetPlay = () => {
  528. resetPlaybackToStart();
  529. // 如果是暂停, 直接播放
  530. togglePlay("play");
  531. };
  532. /** 设置速度 */
  533. export const handleSetSpeed = (speed: number) => {
  534. setStorageSpeed(state.examSongId, speed);
  535. state.speed = speed;
  536. };
  537. /** 清除选段状态 */
  538. export const clearSelection = () => {
  539. state.sectionStatus = false;
  540. state.section = [];
  541. closeToast();
  542. };
  543. /** 开启选段 */
  544. export const handleChangeSection = () => {
  545. // 如果开启了选段,再次点击取消选段
  546. if (state.sectionStatus) {
  547. togglePlay("paused");
  548. skipNotePlay(0, true);
  549. clearSelection();
  550. return;
  551. }
  552. state.sectionStatus = true;
  553. // 开启
  554. if (state.sectionStatus) {
  555. togglePlay("paused");
  556. }
  557. showToast({
  558. message: "请选择开始小节",
  559. duration: 0,
  560. position: "top",
  561. className: "selectionToast",
  562. });
  563. };
  564. /** 效验并格式化选段小节 */
  565. const formateSelectMearure = (_list: any[]): any[] => {
  566. if (!_list.length) return [];
  567. const list = _list.sort((a, b) => a.time - b.time);
  568. const startXml = list[0]?.measureOpenIndex;
  569. const endXml = list.last()?.measureOpenIndex;
  570. const selectStartMeasure = state.times.filter((n: any) => startXml === n.measureOpenIndex) || [];
  571. const selectEndMeasure = state.times.filter((n: any) => endXml === n.measureOpenIndex) || [];
  572. // 没有找到选段小节
  573. if (!selectStartMeasure.length || !selectEndMeasure.length) {
  574. clearSelection();
  575. return [];
  576. }
  577. list[0] = selectStartMeasure[0];
  578. list[1] = selectEndMeasure.last();
  579. let startItemINdex = list[0].i;
  580. // 开启预备拍
  581. if (state.isOpenPrepare) {
  582. const startXmlIndex = list[0].MeasureNumberXML;
  583. state.sectionFirst = state.times.find((n: any) => startXmlIndex - n.MeasureNumberXML === 1);
  584. startItemINdex = state.sectionFirst ? state.sectionFirst.i : startItemINdex;
  585. }
  586. skipNotePlay(startItemINdex, startItemINdex === 0);
  587. return list;
  588. };
  589. /** 选择选段 */
  590. export const handleSelection = (item: any) => {
  591. if (!state.sectionStatus || state.section.length > 1) return;
  592. if (state.section.length !== 2 && item) {
  593. state.section.push(item);
  594. if (state.section.length === 2) {
  595. state.section = formateSelectMearure(state.section);
  596. closeToast();
  597. }
  598. }
  599. if (state.section.length === 1) {
  600. showToast({
  601. message: "请选择结束小节",
  602. duration: 0,
  603. position: "top",
  604. className: "selectionToast",
  605. });
  606. }
  607. };
  608. /** 阶段练习、阶段评测设置选段小节 */
  609. export const setSection = (start: number, end: number, userSpeed?: number) => {
  610. const startNotes = state.times.filter(
  611. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == start
  612. )
  613. const endNotes = state.times.filter(
  614. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == end
  615. )
  616. const lastEndId = endNotes[endNotes.length - 1].noteId
  617. let lastEndNotes = endNotes.filter((n: any) => n.noteId === lastEndId)
  618. // 是否符合重播规则
  619. const canRepeatInfo = verifyCanRepeat(start, end)
  620. const isCanRepeat = canRepeatInfo.canRepeat
  621. // 如果符合重播规则,但是lastEndNotes长度为1,则需要向前找,直到找到lastEndNotes长度为2
  622. let currentEndNum: number = end
  623. const lastEndIndex = state.repeatInfo[canRepeatInfo.repeatIdx]?.end || 0
  624. while (isCanRepeat && lastEndNotes.length === 1 && lastEndNotes[0].MeasureNumberXML <= lastEndIndex) {
  625. currentEndNum = currentEndNum - 1
  626. const newEndNotes = state.times.filter(
  627. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == currentEndNum
  628. )
  629. const newLastEndId = newEndNotes[newEndNotes.length - 1].noteId
  630. lastEndNotes = newEndNotes.filter((n: any) => n.noteId === newLastEndId)
  631. }
  632. const endIdx: any = (isCanRepeat && canRepeatInfo.repeatIdx == state.repeatInfo.length - 1) ? lastEndNotes.length - 1 : 0
  633. const startNote = startNotes[0]
  634. // const endNote = endNotes[endNotes.length - 1]
  635. const endNote = lastEndNotes[endIdx]
  636. if (startNote && endNote) {
  637. state.isSelectMeasureMode = true;
  638. // 设置小节
  639. hanldeDirectSelection([startNote, endNote]);
  640. //设置速度
  641. if (userSpeed) {
  642. handleSetSpeed(userSpeed);
  643. }
  644. }
  645. }
  646. /** 直接设置选段 */
  647. export const hanldeDirectSelection = (list: any[]) => {
  648. if (!Array.isArray(list) || list.length !== 2) return;
  649. state.sectionStatus = true;
  650. setTimeout(() => {
  651. state.section = formateSelectMearure(list);
  652. console.log(333333333,state.section)
  653. }, 500);
  654. };
  655. let offsetTop = 0;
  656. /**
  657. * 窗口内滚动到音符的区域
  658. * @param isScroll 可选: 强制滚动到顶部, 默认: false
  659. * @returns void
  660. */
  661. export const scrollViewNote = () => {
  662. const cursorElement = document.getElementById("cursorImg-0")!;
  663. const musicAndSelection = document.getElementById(state.scrollContainer)!;
  664. if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop) return;
  665. offsetTop = cursorElement.offsetTop;
  666. if (offsetTop > 50) {
  667. musicAndSelection.scrollTo({
  668. top: (offsetTop - 50) * state.musicZoom,
  669. behavior: "smooth",
  670. });
  671. } else {
  672. musicAndSelection.scrollTo({
  673. top: 0,
  674. behavior: "smooth",
  675. });
  676. }
  677. };
  678. /** 检测是否是节奏练习 */
  679. export const isRhythmicExercises = () => {
  680. return state.examSongName.indexOf("节奏练习") > -1;
  681. };
  682. /** 重置状态 */
  683. export const handleRessetState = () => {
  684. if (state.modeType === "evaluating") {
  685. handleStartEvaluat();
  686. } else if (state.modeType === "practise") {
  687. togglePlay("paused");
  688. } else if (state.modeType === "follow") {
  689. toggleFollow(false);
  690. }
  691. };
  692. export default state;
  693. /** 初始化评测音频 */
  694. export const evaluatCreateMusicPlayer = () => {
  695. return api_createMusicPlayer({
  696. musicSrc: state.accompany || state.music, // 曲谱音频url
  697. tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
  698. });
  699. };
  700. /** 获取内容平台的接口详情并初始化state信息 */
  701. export const getMusicDetail = async (id: string) => {
  702. const res = await getMusicSheetDetail(id);
  703. if (res?.code === 200) {
  704. getMusicInfo(res)
  705. }
  706. };
  707. const getMusicInfo = (res: any) => {
  708. const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
  709. // 原音声轨
  710. const musicData = res.data.musicSheetSoundList?.[index] || {};
  711. // 伴奏声轨
  712. const accompanyData = res.data.musicSheetAccompanimentList?.[0] || {}
  713. const musicInfo = {
  714. ...res.data,
  715. music: musicData.audioFileUrl || '',
  716. accompany: accompanyData.audioFileUrl || '',
  717. musicSheetId: musicData.musicSheetId || res.data.id,
  718. track: musicData.track || '',
  719. };
  720. console.log("🚀 ~ musicInfo:", musicInfo);
  721. setState(musicInfo, index);
  722. setCustom();
  723. };
  724. const setState = (data: any, index: number) => {
  725. state.appName = "COLEXIU";
  726. state.detailId = data.id;
  727. state.xmlUrl = data.xmlFileUrl;
  728. state.partIndex = index;
  729. state.trackId = data.track;
  730. state.subjectId = data.subjectIds ? data.subjectIds.split(',')?.[0] : 0;
  731. const subjectCode = data.subjectCodes ? data.subjectCodes.split(',')?.[0] : 0;
  732. const pitchSubject = musicalInstrumentCodeInfo.find((n) => n.code === subjectCode)
  733. state.subjectCodeId = pitchSubject ? pitchSubject.id : 0
  734. state.categoriesId = data.musicCategoryId;
  735. state.categoriesName = data.musicTagNames;
  736. state.enableEvaluation = data.isEvaluated ? true : false;
  737. state.examSongId = data.id + "";
  738. state.examSongName = data.name;
  739. state.coverImg = data.musicCover ?? "";
  740. // 解析扩展字段
  741. if (data.extConfigJson) {
  742. try {
  743. state.extConfigJson = JSON.parse(data.extConfigJson as string);
  744. } catch (error) {
  745. console.error("解析扩展字段错误:", error);
  746. }
  747. }
  748. // 曲子包含节拍器,就不开启节拍器
  749. state.needTick = data.isUseSystemBeat ? true : false;
  750. state.isOpenMetronome = data.isUseSystemBeat ? false : true;
  751. state.isShowFingering = data.isShowFingering ? true : false;
  752. state.music = data.music;
  753. state.accompany = data.accompany;
  754. state.midiUrl = data.midiFileUrl;
  755. state.parentCategoriesId = data.musicTag;
  756. state.musicSheetCategoriesId = data.musicCategoryId;
  757. state.playMode = data.playMode === "MP3" ? "MP3" : "MIDI";
  758. state.originSpeed = state.speed = data.playSpeed;
  759. const track = data.code || data.track;
  760. state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
  761. state.enableNotation = data.isConvertibleScore ? true : false;
  762. state.isConcert = data.musicSheetType === "CONCERT" ? true : false;
  763. state.canSelectTracks = data.multiTracksSelection;
  764. // 开启预备小节
  765. state.isOpenPrepare = true;
  766. state.extStyleConfigJson = data.extStyleConfigJson || {}
  767. // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
  768. // 是否打击乐
  769. /**
  770. * 是否打击乐:AMPLITUDE & 节奏练习:DECIBELS
  771. * evaluationStandard:("评测标准 节奏 AMPLITUDE 音准 FREQUENCY 分贝 DECIBELS")
  772. * 打击乐&节奏练习,没有跟练模式
  773. */
  774. // state.isPercussion = isRhythmicExercises();
  775. state.isPercussion = data.evaluationStandard === "AMPLITUDE" || data.evaluationStandard === "DECIBELS";
  776. // 设置是否特殊曲谱, 是特殊曲谱取反(不理解之前的思考逻辑), 使用后台设置的速度
  777. state.isSpecialBookCategory = !classids.includes(data.musicCategoryId);
  778. // 设置指法
  779. // const code = state.isConcert ? mappingVoicePart(state.trackId, "ENSEMBLE") : mappingVoicePart(state.subjectId, "INSTRUMENT");
  780. /**
  781. * 各平台的乐器声部id不统一,为了兼容处理老的数据,加上乐器code码,此码唯一
  782. * 获取指法code
  783. */
  784. const code = state.isConcert ? matchVoicePart(state.trackId, "CONCERT") : matchVoicePart(state.subjectCodeId, "SINGLE");
  785. state.fingeringInfo = subjectFingering(code);
  786. console.log("🚀 ~ state.fingeringInfo:", code, state.fingeringInfo, state.trackId, state.track);
  787. // 检测是否原音和伴奏都有
  788. if (!state.music || !state.accompany) {
  789. state.playSource = state.music ? "music" : "background";
  790. }
  791. // 如果是PC端,放大曲谱
  792. state.platform = query.platform?.toLocaleUpperCase() || "";
  793. if (state.platform === IPlatform.PC) {
  794. state.zoom = query.zoom || 1.5;
  795. }
  796. //课堂乐器, 渲染类型: 五线谱, 简谱
  797. state.musicRenderType = query.musicRenderType || EnumMusicRenderType.firstTone;
  798. console.log("state对象", state);
  799. };
  800. const setCustom = () => {
  801. if (state.extConfigJson.multitrack) {
  802. setGlobalData("multitrack", state.extConfigJson.multitrack);
  803. }
  804. };