state.ts 25 KB

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