state.ts 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101
  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, getDuration } from "./helpers/formateMusic";
  14. import { getMusicSheetDetail } from "./utils/baseApi"
  15. import { getQuery } from "/src/utils/queryString";
  16. import { followData } from "/src/view/follow-practice/index"
  17. const query: any = getQuery();
  18. /** 入门 | 进阶 | 大师 */
  19. export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";
  20. /** 渲染类型: 五线谱,简谱 */
  21. export enum EnumMusicRenderType {
  22. /** 五线谱 */
  23. staff = "staff",
  24. /** 简谱 */
  25. firstTone = "firstTone",
  26. /** 固定音高 */
  27. fixedTone = "fixedTone",
  28. }
  29. export const musicscoresettingKey = "musicscoresetting";
  30. /** 有声音的是那个音源 */
  31. export type IPlayState = "music" | "background";
  32. /** 播放状态 */
  33. export type IAudioState = "play" | "paused";
  34. /** 来源 */
  35. export enum IPlatform {
  36. APP = "APP",
  37. PC = "PC",
  38. }
  39. /**
  40. * 特殊教材分类id
  41. */
  42. const classids = [1,2,3,4,6,7,8,9,10,11,12,13,14,15,16,17,30,31,35,36,38,108,150,151,152,153,154,155,156,157,158,178,179,180,181,182]; // 大雅金唐, 竖笛教程, 声部训练展开的分类ID
  43. // 乐器code码
  44. export const musicalInstrumentCodeInfo = [
  45. {
  46. name: '长笛',
  47. code: 'Flute',
  48. id: 1
  49. },
  50. {
  51. name: '短笛',
  52. code: 'Piccolo',
  53. id: 2
  54. },
  55. {
  56. name: '单簧管',
  57. code: 'Clarinet',
  58. id: 3
  59. },
  60. {
  61. name: '低音单簧管',
  62. code: 'Bass Clarinet',
  63. id: 4
  64. },
  65. {
  66. name: '中音萨克斯',
  67. code: 'Alto Saxophone',
  68. id: 5
  69. },
  70. {
  71. name: '次中音萨克斯',
  72. code: 'Tenor Saxophone',
  73. id: 6
  74. },
  75. {
  76. name: '高音萨克斯',
  77. code: 'Soprano Saxophone',
  78. id: 7
  79. },
  80. {
  81. name: '上低音萨克斯',
  82. code: 'Baritone Saxophone',
  83. id: 8
  84. },
  85. {
  86. name: '双簧管',
  87. code: 'Oboe',
  88. id: 9
  89. },
  90. {
  91. name: '大管',
  92. code: 'Bassoon',
  93. id: 10
  94. },
  95. {
  96. name: '小号',
  97. code: 'Trumpet',
  98. id: 11
  99. },
  100. {
  101. name: '圆号',
  102. code: 'Horn',
  103. id: 12
  104. },
  105. {
  106. name: '长号',
  107. code: 'Trombone',
  108. id: 13
  109. },
  110. {
  111. name: '上低音号',
  112. code: 'Baritone',
  113. id: 14
  114. },
  115. {
  116. name: '次中音号',
  117. code: 'Euphonium',
  118. id: 15
  119. },
  120. {
  121. name: '大号',
  122. code: 'Tuba',
  123. id: 16
  124. },
  125. {
  126. name: '钢琴',
  127. code: 'Piano',
  128. id: 17
  129. },
  130. {
  131. name: '电钢琴',
  132. code: 'Electronical Piano',
  133. id: 18
  134. },
  135. {
  136. name: '钢片琴',
  137. code: 'Glockenspiel',
  138. id: 19
  139. },
  140. {
  141. name: '小提琴',
  142. code: 'Violin',
  143. id: 20
  144. },
  145. {
  146. name: '中提琴',
  147. code: 'Viola',
  148. id: 21
  149. },
  150. {
  151. name: '大提琴',
  152. code: 'Violoncello',
  153. id: 22
  154. },
  155. {
  156. name: '低音提琴',
  157. code: 'Contrabass',
  158. id: 23
  159. },
  160. {
  161. name: '架子鼓',
  162. code: 'Drum Set',
  163. id: 24
  164. },
  165. {
  166. name: '小鼓',
  167. code: 'Snare Drum',
  168. id: 25
  169. },
  170. {
  171. name: '马林巴',
  172. code: 'Marimba',
  173. id: 26
  174. },
  175. {
  176. name: '颤音琴',
  177. code: 'Vibraphone',
  178. id: 27
  179. },
  180. {
  181. name: '钟琴',
  182. code: 'Chimes',
  183. id: 28
  184. },
  185. {
  186. name: '木琴',
  187. code: 'Xylophone',
  188. id: 29
  189. },
  190. {
  191. name: '管钟',
  192. code: 'Tubular Bells',
  193. id: 30
  194. },
  195. {
  196. name: '定音鼓',
  197. code: 'Timpani',
  198. id: 31
  199. },
  200. {
  201. name: '键盘',
  202. code: 'Mallets',
  203. id: 32
  204. },
  205. {
  206. name: '排箫',
  207. code: 'Panpipes',
  208. id: 33
  209. },
  210. {
  211. name: '陶笛',
  212. code: 'Ocarina',
  213. id: 34
  214. },
  215. {
  216. name: '葫芦丝',
  217. code: 'Woodwind',
  218. id: 35
  219. },
  220. {
  221. name: '口风琴',
  222. code: 'Nai',
  223. id: 36
  224. },
  225. {
  226. name: '德式竖笛',
  227. code: 'Tenor Recorder',
  228. id: 37
  229. },
  230. {
  231. name: '英式竖笛',
  232. code: 'Baroque Recorder',
  233. id: 38
  234. },
  235. ]
  236. const state = reactive({
  237. /** 来源 : PC , app */
  238. platform: "" as IPlatform,
  239. appName: "" as "GYM" | "COLEXIU",
  240. musicRenderType: EnumMusicRenderType.staff as EnumMusicRenderType,
  241. /**曲谱是否渲染完成 */
  242. musicRendered: false,
  243. /** 当前曲谱数据ID, 和曲谱ID不一致 */
  244. detailId: "",
  245. /** 曲谱资源URL */
  246. xmlUrl: "",
  247. /** 声部ID */
  248. subjectId: 0 as number,
  249. trackId: 0 as string | number,
  250. /** 分类ID */
  251. categoriesId: 0,
  252. /** 分类名称 */
  253. categoriesName: "",
  254. /** 是否支持评测 */
  255. enableEvaluation: true,
  256. /** 是否支持转谱 */
  257. enableNotation: false,
  258. /** 曲谱ID */
  259. examSongId: "",
  260. /** 内容平台的曲谱ID,可能会和业务端的id不一样 */
  261. cbsExamSongId: "",
  262. /** 曲谱名称 */
  263. examSongName: "",
  264. /** 曲谱封面 */
  265. coverImg: "",
  266. /** 扩展字段 */
  267. extConfigJson: {} as any,
  268. /** 扩展样式字段 */
  269. extStyleConfigJson: {} as any,
  270. /** 是否开启节拍器(mp3节拍器) */
  271. isOpenMetronome: false,
  272. /** 是否显示指法 */
  273. isShowFingering: false,
  274. /** 原音 */
  275. music: "",
  276. /** 伴奏 */
  277. accompany: "",
  278. /** midiURL */
  279. midiUrl: "",
  280. /** 父分ID */
  281. parentCategoriesId: 0,
  282. /** 分类ID */
  283. musicSheetCategoriesId: 0,
  284. /** 各产品端的分类ID,(管乐迷、管乐团、酷乐秀、课堂乐器) */
  285. bizMusicCategoryId: 0,
  286. /** 资源类型: mp3 | midi */
  287. playMode: "MP3" as "MP3" | "MIDI",
  288. /** 设置的速度 */
  289. speed: 0,
  290. /** 曲谱音频正常的速度 */
  291. originSpeed: 0,
  292. /** 播放过程中显示的速度 */
  293. playIngSpeed: 0,
  294. /** 分轨名称 */
  295. track: "",
  296. /** 当前显示声部索引 */
  297. partIndex: 0,
  298. /** 是否需要节拍器 */
  299. needTick: false,
  300. /** 曲谱实例 */
  301. osmd: null as unknown as OpenSheetMusicDisplay,
  302. /**是否是特殊乐谱类型, 主要针对管乐迷 */
  303. isSpecialBookCategory: false,
  304. /** 播放状态 */
  305. playState: "paused" as IAudioState,
  306. /** 播放结束状态 */
  307. playEnd: false,
  308. /** 播放那个: 原音,伴奏 */
  309. playSource: "music" as IPlayState,
  310. /** 播放进度 */
  311. playProgress: 0,
  312. /** 激活的note index */
  313. activeNoteIndex: 0,
  314. /** 激活的小节 */
  315. activeMeasureIndex: 0,
  316. /** 选段状态 */
  317. sectionStatus: false,
  318. /** 选段数据 */
  319. section: [] as any[],
  320. /** 选段背景 */
  321. sectionBoundingBoxs: [] as any[],
  322. /** 开启选段预备 */
  323. isOpenPrepare: false,
  324. /** 选段预备 */
  325. sectionFirst: null as any,
  326. /** 音符数据 */
  327. times: [] as any[],
  328. /** 播放模式 */
  329. modeType: "practise" as "practise" | "follow" | "evaluating",
  330. /** 设置 */
  331. setting: {
  332. /** 效音提醒 */
  333. soundEffect: true,
  334. /** 护眼模式 */
  335. eyeProtection: false,
  336. /** 摄像头 */
  337. camera: false,
  338. /** 摄像头透明度 */
  339. cameraOpacity: 70,
  340. /** 循环播放 */
  341. repeatAutoPlay: true,
  342. /** 显示指法 */
  343. displayFingering: true,
  344. /** 显示光标 */
  345. displayCursor: true,
  346. /** 频率 */
  347. frequency: 0,
  348. /** 评测难度 */
  349. evaluationDifficulty: "ADVANCED" as IDifficulty,
  350. /** 保存到相册 */
  351. saveToAlbum: true,
  352. /** 开启伴奏 */
  353. enableAccompaniment: true,
  354. /** 反应时间 */
  355. reactionTimeMs: 0,
  356. /** 节拍器音量 */
  357. beatVolume: 50,
  358. },
  359. /** 后台设置的基准评测频率 */
  360. baseFrequency: 440,
  361. /** 节拍器的时间 */
  362. fixtime: 0,
  363. /** 指法信息 */
  364. fingeringInfo: {} as IFingering,
  365. /** 滚动容器的ID */
  366. scrollContainer: "musicAndSelection",
  367. /** 是否是打击乐 */
  368. isPercussion: false,
  369. /** 评测标准 */
  370. evaluationStandard: '',
  371. /** 是否重复节拍器的时间 */
  372. repeatedBeats: 0,
  373. /**当前曲谱中所有声部名字 */
  374. partListNames: [] as any,
  375. /** 渐变速度信息 */
  376. gradual: [] as GradualNote[],
  377. /** 渐变速度版本 */
  378. gradualVersion: GradualVersion.BASE as GradualVersion,
  379. /** 渐变时间信息 */
  380. gradualTimes: null as GradualTimes,
  381. /** 单声部多声轨 */
  382. multitrack: 0,
  383. /** 缩放 */
  384. zoom: 0.8,
  385. /** 渲染曲谱比例 */
  386. musicZoom: 1,
  387. /** 练习,评测是否是选段模式 */
  388. isSelectMeasureMode: false,
  389. /** 是否是评分显示 */
  390. isReport: false,
  391. /** 是否隐藏评测报告弹窗,保存演奏按钮,默认不隐藏 */
  392. isHideEvaluatReportSaveBtn: false,
  393. /** 是否是合奏 */
  394. isConcert: false,
  395. /** 用户选择的结束小节数 */
  396. userChooseEndIndex: 0,
  397. /** 重播小节集合信息 */
  398. repeatInfo: [],
  399. /** 多分轨的曲子,可支持筛选的分轨 */
  400. canSelectTracks: [] as any,
  401. /** 声部codeId */
  402. subjectCodeId: 0 as number,
  403. /** 乐器codeId,用于匹配乐器指法、声部转调、特殊声部处理等 */
  404. musicalCodeId: 0 as number,
  405. /** 乐器code,用于评测传参 */
  406. musicalCode: '' as any,
  407. /** 合奏曲目是否合并展示 */
  408. isCombineRender: false,
  409. /** 小节的持续时长,以后台设置的播放速度计算 */
  410. measureTime: 0,
  411. /** 跟练模式,节拍器播放的时间 */
  412. beatStartTime: 0,
  413. /** 是否为详情预览模式 */
  414. isPreView: false,
  415. });
  416. const browserInfo = browser();
  417. let offset_duration = 0;
  418. /** 自定义数据 */
  419. export const customData = reactive({
  420. /** 自定义音符时值 */
  421. customNoteRealValue: [] as any,
  422. /** 自定义音符按读取到的时值 */
  423. customNoteCurrentTime: false,
  424. });
  425. /** 在渲染前后计算光标应该走到的音符 */
  426. const setStep = () => {
  427. if (state.playState !== "play") {
  428. console.log("暂停播放");
  429. return;
  430. }
  431. let startTime = Date.now();
  432. requestAnimationFrame(() => {
  433. const endTime = Date.now();
  434. // 渲染时间大于16.6,就会让页面卡顿, 如果渲染时间大与16.6就下一个渲染帧去计算
  435. if (endTime - startTime < 16.7) {
  436. handlePlaying();
  437. setStep();
  438. } else {
  439. setTimeout(() => {
  440. handlePlaying();
  441. setStep();
  442. }, 16.7);
  443. }
  444. });
  445. };
  446. /** 开始播放 */
  447. export const onPlay = () => {
  448. console.log("开始播放");
  449. state.playEnd = false;
  450. offset_duration = browserInfo.xiaomi ? 0.2 : 0.08;
  451. setStep();
  452. };
  453. /** 播放模式结束自动重播 */
  454. const autoResetPlay = () => {
  455. if (state.modeType !== "practise") return;
  456. skipNotePlay(0, true);
  457. // 没有开启自动重播, 不是练习模式
  458. if (!state.setting.repeatAutoPlay) return;
  459. scrollViewNote();
  460. setTimeout(() => {
  461. togglePlay("play");
  462. }, 1000);
  463. };
  464. /** 播放完成事件 */
  465. export const onEnded = () => {
  466. console.log("音频播放结束");
  467. // 修改状态为结束
  468. state.playEnd = true;
  469. state.playState = "paused";
  470. // 结束播放
  471. audioListStart(state.playState);
  472. // 调用结束评测
  473. handleEndEvaluat(true);
  474. // 调用自动重复播放
  475. autoResetPlay();
  476. };
  477. /**
  478. * 播放一直触发的事件
  479. */
  480. const handlePlaying = () => {
  481. const currentTime = getAudioCurrentTime();
  482. const duration = getAudioDuration();
  483. state.playProgress = (currentTime / duration) * 100;
  484. let item = getNote(currentTime);
  485. // console.log(11111,currentTime,duration,state.playSource, item.i)
  486. // console.log(item.i,item.noteId,item.measureSpeed)
  487. // 练习模式下,实时刷新小节速度
  488. if (item && state.modeType === "practise" && state.playState === "play" && item.measureSpeed && item.measureSpeed !== state.playIngSpeed) {
  489. const ratio = state.speed / state.originSpeed
  490. state.playIngSpeed = Math.ceil(ratio * item.measureSpeed) || state.speed
  491. } else if (state.modeType === "practise" && state.playState === "play" && item && !item.measureSpeed) {
  492. state.playIngSpeed = state.speed
  493. }
  494. if (item) {
  495. // 选段状态下
  496. if (state.sectionStatus && state.section.length === 2) {
  497. // 如果开启了预备拍
  498. const selectStartItem = state.sectionFirst ? state.sectionFirst : state.section[0];
  499. const selectEndItem = state.section[1];
  500. /**
  501. * #9374,反复小节的曲目播放错误, bug修复
  502. * 曲目:噢!苏珊娜-排箫-人音
  503. * 现象:重播小节为2-9,选段为4-12,当播完第9小节后会回到第2小节重播2-8,再播放10-12
  504. * 4-12,不符合重播规则,所以播完第9小节后,音频需要跳转到第10小节播放
  505. */
  506. if (state.repeatInfo.length) {
  507. const canRepeatInfo = verifyCanRepeat(state.section[0].MeasureNumberXML, state.section[1].MeasureNumberXML)
  508. const repeatIdx = canRepeatInfo.repeatIdx == -1 ? 0 : canRepeatInfo.repeatIdx
  509. if (state.modeType === "practise" && !canRepeatInfo.canRepeat && state.section[1].MeasureNumberXML > state.repeatInfo[repeatIdx].end) {
  510. const preItem = state.times[item.i - 1]
  511. if (preItem && preItem.MeasureNumberXML > item.MeasureNumberXML) {
  512. const skipItem = state.times.find((item: any) => item.MeasureNumberXML === preItem.MeasureNumberXML + 1)
  513. if (skipItem) {
  514. // 跳转到指定的音频位置
  515. setAudioCurrentTime(skipItem.time, skipItem.i);
  516. gotoNext(skipItem);
  517. return
  518. }
  519. }
  520. }
  521. }
  522. if (Math.abs(selectEndItem.endtime - currentTime) < offset_duration) {
  523. console.log("选段播放结束");
  524. // 如果为选段评测模式
  525. if (state.modeType === "evaluating" && state.isSelectMeasureMode) {
  526. onEnded();
  527. return;
  528. }
  529. // #8698 bug修复
  530. if (state.modeType === "practise" && state.sectionStatus && !state.setting.repeatAutoPlay) {
  531. onEnded();
  532. resetPlaybackToStart();
  533. return;
  534. }
  535. item = selectStartItem;
  536. setAudioCurrentTime(selectStartItem.time, selectStartItem.i);
  537. }
  538. }
  539. gotoNext(item);
  540. }
  541. // 评测不播放叮咚节拍器
  542. if (state.modeType !== "evaluating") {
  543. metronomeData.metro?.sound(currentTime);
  544. }
  545. };
  546. /** 跳转到指定音符开始播放 */
  547. export const skipNotePlay = (itemIndex: number, isStart = false) => {
  548. const item = state.times[itemIndex];
  549. let itemTime = item.time;
  550. if (isStart) {
  551. itemTime = 0;
  552. }
  553. if (item) {
  554. setAudioCurrentTime(itemTime, itemIndex);
  555. gotoNext(item);
  556. metronomeData.metro?.sound(itemTime);
  557. }
  558. };
  559. /**
  560. * 切换曲谱播放状态
  561. * @param playState 可选: 默认 undefined, 需要切换的状态 play:播放, paused: 暂停
  562. */
  563. export const togglePlay = async (playState?: "play" | "paused") => {
  564. state.playState = playState ? playState : state.playState === "paused" ? "play" : "paused";
  565. if (state.playState === "play" && state.sectionStatus && state.section.length == 2 && state.playProgress === 0) {
  566. resetPlaybackToStart();
  567. }
  568. // 设置为开始播放时, 如果需要节拍,先播放节拍器
  569. if (state.playState === "play" && state.needTick) {
  570. const tickend = await handleStartTick();
  571. // console.log("🚀 ~ tickend:", tickend)
  572. // 节拍器返回false, 取消播放
  573. if (!tickend) {
  574. state.playState = "paused";
  575. return false;
  576. }
  577. }
  578. // 如果选段没有结束, 直接开始播放,清空选段状态
  579. if (state.playState == "play") {
  580. if (state.sectionStatus && state.section.length < 2) {
  581. clearSelection();
  582. }
  583. }
  584. audioListStart(state.playState);
  585. return true;
  586. };
  587. /** 结束播放 */
  588. export const handleStopPlay = () => {
  589. state.playState = "paused";
  590. audioListStart(state.playState);
  591. };
  592. /** 重置播放为开始 */
  593. export const resetPlaybackToStart = () => {
  594. // 如果为选段状态
  595. if (state.sectionStatus && state.section.length === 2) {
  596. state.section = formateSelectMearure(state.section);
  597. return;
  598. }
  599. skipNotePlay(0, true);
  600. };
  601. /** 跳转到指定音符 */
  602. export const gotoCustomNote = (index: number) => {
  603. try {
  604. state.osmd.cursor.reset();
  605. } catch (error) {}
  606. for (let i = 0; i < index; i++) {
  607. state.osmd.cursor.next();
  608. }
  609. };
  610. const setCursorPosition = (note: any, cursor: any) => {
  611. if (state.musicRenderType === EnumMusicRenderType.firstTone || state.musicRenderType === EnumMusicRenderType.fixedTone) {
  612. nextTick(() => {
  613. let bbox = note.bbox;
  614. if (!bbox) {
  615. const musicContainer = document.getElementById("musicAndSelection")?.getBoundingClientRect() || {
  616. x: 0,
  617. y: 0,
  618. };
  619. const parentLeft = musicContainer.x || 0;
  620. const noteEle = document.querySelector(`#vf-${note.svgElement?.attrs?.id}`);
  621. if (noteEle) {
  622. const noteHead = noteEle.querySelector(".vf-numbered-note-head");
  623. const noteHeadBbox = noteHead?.getBoundingClientRect?.();
  624. if (noteHeadBbox) {
  625. note.bbox = {
  626. left: noteHeadBbox.x - parentLeft - noteHeadBbox.width / 4,
  627. width: noteHeadBbox.width * 1.5,
  628. };
  629. bbox = note.bbox;
  630. }
  631. }
  632. }
  633. if (!bbox) return;
  634. const baseW = state.platform === IPlatform.PC ? 29 : 18;
  635. const width = (bbox.width - baseW) / 3;
  636. // console.log(555555,bbox.left,width)
  637. cursor.cursorElement.style.left = bbox.left + "px";
  638. cursor.cursorElement.style.transform = `translateX(${width}px)`;
  639. });
  640. }
  641. };
  642. /** 跳转到下一个音符 */
  643. export const gotoNext = (note: any) => {
  644. // console.log(33333333333,state.activeNoteIndex,note.i)
  645. const num = note.i;
  646. if (state.activeNoteIndex === note.i) {
  647. try {
  648. setCursorPosition(note, state.osmd.cursor);
  649. } catch (error) {
  650. console.log(error);
  651. }
  652. return;
  653. }
  654. const osmd = state.osmd;
  655. let prev = state.activeNoteIndex;
  656. state.activeNoteIndex = num;
  657. state.activeMeasureIndex = note.MeasureNumberXML;
  658. if (prev && num - prev === 1) {
  659. osmd.cursor.next();
  660. } else if (prev && num - prev > 0) {
  661. while (num - prev > 0) {
  662. prev++;
  663. osmd.cursor.next();
  664. }
  665. } else {
  666. gotoCustomNote(num);
  667. }
  668. try {
  669. setCursorPosition(note, state.osmd.cursor);
  670. } catch (error) {
  671. console.log(error);
  672. }
  673. scrollViewNote();
  674. };
  675. /** 获取指定音符 */
  676. export const getNote = (currentTime: number) => {
  677. const times = state.times;
  678. const len = state.times.length;
  679. /** 播放超过了最后一个音符的时间,直接结束, 2秒误差 */
  680. if (currentTime > times[len - 1].endtime + 2) {
  681. onEnded();
  682. return;
  683. }
  684. let _item = null as any;
  685. for (let i = state.activeNoteIndex; i < len; i++) {
  686. const item = times[i];
  687. const prevItem = times[i - 1];
  688. if (currentTime >= item.time) {
  689. if (!prevItem || item.time != prevItem.time) {
  690. _item = item;
  691. }
  692. } else {
  693. break;
  694. }
  695. }
  696. // console.log("activeNoteIndex", currentTime, state.activeNoteIndex, _item.i);
  697. return _item;
  698. };
  699. /** 重播 */
  700. export const handleResetPlay = () => {
  701. resetPlaybackToStart();
  702. // 如果是暂停, 直接播放
  703. togglePlay("play");
  704. };
  705. /** 设置速度 */
  706. export const handleSetSpeed = (speed: number) => {
  707. setStorageSpeed(state.examSongId, speed);
  708. state.speed = speed;
  709. };
  710. /** 清除选段状态 */
  711. export const clearSelection = () => {
  712. state.sectionStatus = false;
  713. state.section = [];
  714. closeToast();
  715. };
  716. /** 开启选段 */
  717. export const handleChangeSection = () => {
  718. // 如果开启了选段,再次点击取消选段
  719. if (state.sectionStatus) {
  720. togglePlay("paused");
  721. skipNotePlay(0, true);
  722. clearSelection();
  723. return;
  724. }
  725. state.sectionStatus = true;
  726. // 开启
  727. if (state.sectionStatus) {
  728. togglePlay("paused");
  729. }
  730. showToast({
  731. message: "请选择开始小节",
  732. duration: 0,
  733. position: "top",
  734. className: "selectionToast",
  735. });
  736. };
  737. /** 效验并格式化选段小节 */
  738. const formateSelectMearure = (_list: any[]): any[] => {
  739. if (!_list.length) return [];
  740. const list = _list.sort((a, b) => a.time - b.time);
  741. const startXml = list[0]?.measureOpenIndex;
  742. const endXml = list.last()?.measureOpenIndex;
  743. const selectStartMeasure = state.times.filter((n: any) => startXml === n.measureOpenIndex) || [];
  744. const selectEndMeasure = state.times.filter((n: any) => endXml === n.measureOpenIndex) || [];
  745. // 没有找到选段小节
  746. if (!selectStartMeasure.length || !selectEndMeasure.length) {
  747. clearSelection();
  748. return [];
  749. }
  750. list[0] = selectStartMeasure[0];
  751. list[1] = selectEndMeasure.last();
  752. let startItemINdex = list[0].i;
  753. // 开启预备拍
  754. if (state.isOpenPrepare) {
  755. const startXmlIndex = list[0].MeasureNumberXML;
  756. state.sectionFirst = state.times.find((n: any) => startXmlIndex - n.MeasureNumberXML === 1);
  757. startItemINdex = state.sectionFirst ? state.sectionFirst.i : startItemINdex;
  758. }
  759. skipNotePlay(startItemINdex, startItemINdex === 0);
  760. return list;
  761. };
  762. /** 选择选段 */
  763. export const handleSelection = (item: any) => {
  764. if (!state.sectionStatus || state.section.length > 1) return;
  765. if (state.section.length !== 2 && item) {
  766. state.section.push(item);
  767. if (state.section.length === 2) {
  768. setSection(state.section[0].MeasureNumberXML,state.section[1].MeasureNumberXML)
  769. //state.section = formateSelectMearure(state.section);
  770. closeToast();
  771. }
  772. }
  773. if (state.section.length === 1) {
  774. showToast({
  775. message: "请选择结束小节",
  776. duration: 0,
  777. position: "top",
  778. className: "selectionToast",
  779. });
  780. }
  781. };
  782. /** 阶段练习、阶段评测设置选段小节 */
  783. export const setSection = (start: number, end: number, userSpeed?: number) => {
  784. const startNotes = state.times.filter(
  785. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == start
  786. )
  787. const endNotes = state.times.filter(
  788. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == end
  789. )
  790. const lastEndId = endNotes[endNotes.length - 1].noteId
  791. let lastEndNotes = endNotes.filter((n: any) => n.noteId === lastEndId)
  792. // 是否符合重播规则
  793. const canRepeatInfo = verifyCanRepeat(start, end)
  794. console.log(22222,canRepeatInfo)
  795. const isCanRepeat = canRepeatInfo.canRepeat
  796. // 如果符合重播规则,但是lastEndNotes长度为1,则需要向前找,直到找到lastEndNotes长度为2
  797. let currentEndNum: number = end
  798. const lastEndIndex = state.repeatInfo[canRepeatInfo.repeatIdx]?.end || 0
  799. while (isCanRepeat && lastEndNotes.length === 1 && lastEndNotes[0].MeasureNumberXML <= lastEndIndex) {
  800. currentEndNum = currentEndNum - 1
  801. const newEndNotes = state.times.filter(
  802. (n: any) => n.noteElement.sourceMeasure.MeasureNumberXML == currentEndNum
  803. )
  804. const newLastEndId = newEndNotes[newEndNotes.length - 1].noteId
  805. lastEndNotes = newEndNotes.filter((n: any) => n.noteId === newLastEndId)
  806. }
  807. const endIdx: any = (isCanRepeat && canRepeatInfo.repeatIdx == state.repeatInfo.length - 1) ? lastEndNotes.length - 1 : 0
  808. const startNote = startNotes[0]
  809. // const endNote = endNotes[endNotes.length - 1]
  810. const endNote = lastEndNotes[endIdx]
  811. if (startNote && endNote) {
  812. state.isSelectMeasureMode = true;
  813. // 设置小节
  814. hanldeDirectSelection([startNote, endNote]);
  815. //设置速度
  816. if (userSpeed) {
  817. handleSetSpeed(userSpeed);
  818. }
  819. }
  820. }
  821. /** 直接设置选段 */
  822. export const hanldeDirectSelection = (list: any[]) => {
  823. if (!Array.isArray(list) || list.length !== 2) return;
  824. state.sectionStatus = true;
  825. setTimeout(() => {
  826. state.section = formateSelectMearure(list);
  827. //console.log(333333333,state.section)
  828. }, 500);
  829. };
  830. let offsetTop = 0;
  831. /**
  832. * 窗口内滚动到音符的区域
  833. * @param isScroll 可选: 强制滚动到顶部, 默认: false
  834. * @returns void
  835. */
  836. export const scrollViewNote = () => {
  837. const cursorElement = document.getElementById("cursorImg-0")!;
  838. const musicAndSelection = document.getElementById(state.scrollContainer)!;
  839. if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop) return;
  840. offsetTop = cursorElement.offsetTop;
  841. if (offsetTop > 50) {
  842. musicAndSelection.scrollTo({
  843. top: (offsetTop - 50) * state.musicZoom,
  844. behavior: "smooth",
  845. });
  846. } else {
  847. musicAndSelection.scrollTo({
  848. top: 0,
  849. behavior: "smooth",
  850. });
  851. }
  852. };
  853. /** 检测是否是节奏练习 */
  854. export const isRhythmicExercises = () => {
  855. return state.examSongName.indexOf("节奏练习") > -1;
  856. };
  857. /** 重置状态 */
  858. export const handleRessetState = () => {
  859. // 切换模式,清除选段
  860. skipNotePlay(0, true);
  861. clearSelection();
  862. if (state.modeType === "evaluating") {
  863. handleStartEvaluat();
  864. } else if (state.modeType === "practise") {
  865. togglePlay("paused");
  866. } else if (state.modeType === "follow") {
  867. toggleFollow(false);
  868. }
  869. };
  870. export default state;
  871. /** 初始化评测音频 */
  872. export const evaluatCreateMusicPlayer = () => {
  873. return api_createMusicPlayer({
  874. musicSrc: state.accompany || state.music, // 曲谱音频url
  875. tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
  876. });
  877. };
  878. /** 获取内容平台的接口详情并初始化state信息 */
  879. export const getMusicDetail = async (id: string) => {
  880. const res = await getMusicSheetDetail(id);
  881. if (res?.code === 200) {
  882. getMusicInfo(res)
  883. }
  884. };
  885. const getMusicInfo = (res: any) => {
  886. const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
  887. // 原音声轨
  888. const musicData = res.data.musicSheetSoundList?.[index] || {};
  889. // 伴奏声轨
  890. const accompanyData = res.data.musicSheetAccompanimentList?.[0] || {}
  891. const musicInfo = {
  892. ...res.data,
  893. music: musicData.audioFileUrl || '',
  894. accompany: accompanyData.audioFileUrl || '',
  895. musicSheetId: musicData.musicSheetId || res.data.bizId,
  896. track: musicData.track || '',
  897. };
  898. console.log("🚀 ~ musicInfo:", musicInfo);
  899. setState(musicInfo, index);
  900. };
  901. const setState = (data: any, index: number) => {
  902. state.appName = "COLEXIU";
  903. state.detailId = data.bizId;
  904. state.xmlUrl = data.xmlFileUrl;
  905. state.partIndex = index;
  906. state.trackId = data.track;
  907. state.subjectId = data.subjectIds ? data.subjectIds.split(',')?.[0] : 0;
  908. // 声部code
  909. const subjectCode = data.subjectCodes ? data.subjectCodes.split(',')?.[0] : '';
  910. // 乐器code
  911. let musicalCode = data.musicalInstrumentIdCodes ? data.musicalInstrumentIdCodes.split(',')?.[0] : '';
  912. const pitchSubject = musicalInstrumentCodeInfo.find((n) => n.code.toLocaleLowerCase() === subjectCode.toLocaleLowerCase())
  913. const pitchMusical = musicalInstrumentCodeInfo.find((n) => n.code.toLocaleLowerCase() === musicalCode.toLocaleLowerCase())
  914. state.subjectCodeId = pitchSubject ? pitchSubject.id : 0
  915. state.musicalCodeId = pitchMusical ? pitchMusical.id : 0
  916. state.categoriesId = data.musicCategoryId;
  917. state.categoriesName = data.musicTagNames;
  918. // state.enableEvaluation = data.isEvaluated ? true : false;
  919. state.examSongId = data.bizId + "";
  920. state.cbsExamSongId = data.id + "";
  921. state.examSongName = data.name;
  922. state.coverImg = data.musicCover ?? "";
  923. state.isCombineRender = data.musicSheetType === "SINGLE" && data.musicSheetSoundList?.length > 1
  924. setCustom(state.isCombineRender ? data.musicSheetSoundList?.length : 0);
  925. // 解析扩展字段
  926. if (data.extConfigJson) {
  927. try {
  928. state.extConfigJson = JSON.parse(data.extConfigJson as string);
  929. } catch (error) {
  930. console.error("解析扩展字段错误:", error);
  931. }
  932. }
  933. state.gradualTimes = state.extConfigJson.gradualTimes;
  934. state.repeatedBeats = state.extConfigJson.repeatedBeats || 0;
  935. // 曲子包含节拍器,就不开启节拍器
  936. state.needTick = data.isUseSystemBeat && data.isPlayBeat ? true : false;
  937. // state.isOpenMetronome = data.isUseSystemBeat ? false : true;
  938. state.isOpenMetronome = data.isPlayBeat && !data.isUseSystemBeat ? true : false
  939. state.isShowFingering = data.isShowFingering ? true : false;
  940. state.music = data.music;
  941. state.accompany = data.accompany;
  942. state.midiUrl = data.midiFileUrl;
  943. state.parentCategoriesId = data.musicTag;
  944. state.musicSheetCategoriesId = data.musicCategoryId;
  945. state.bizMusicCategoryId = data.bizMusicCategoryId
  946. state.playMode = data.playMode === "MP3" ? "MP3" : "MIDI";
  947. state.originSpeed = state.speed = data.playSpeed;
  948. // state.playIngSpeed = data.playSpeed;
  949. const track = data.code || data.track;
  950. state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
  951. // 能否评测,根据当前声轨有无伴奏判断
  952. state.enableEvaluation = state.accompany ? true : false
  953. state.isConcert = data.musicSheetType === "CONCERT" ? true : false;
  954. // multiTracksSelection 返回为空,默认代表全部分轨
  955. state.canSelectTracks = data.multiTracksSelection === "null" || data.multiTracksSelection === "" || data.multiTracksSelection === null ? [] : data.multiTracksSelection?.split(',');
  956. // 开启预备小节
  957. state.isOpenPrepare = true;
  958. state.extStyleConfigJson = data.extStyleConfigJson || {}
  959. // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
  960. // 是否打击乐
  961. /**
  962. * 是否打击乐:AMPLITUDE & 节奏练习:DECIBELS
  963. * evaluationStandard:("评测标准 节奏 AMPLITUDE 音准 FREQUENCY 分贝 DECIBELS")
  964. * 打击乐&节奏练习,没有跟练模式
  965. */
  966. // state.isPercussion = isRhythmicExercises();
  967. state.isPercussion = data.evaluationStandard === "AMPLITUDE" || data.evaluationStandard === "DECIBELS";
  968. state.evaluationStandard = data.evaluationStandard?.toLocaleLowerCase() || ''
  969. // 设置是否特殊曲谱, 是特殊曲谱取反(不理解之前的思考逻辑), 使用后台设置的速度
  970. state.isSpecialBookCategory = !classids.includes(Number(data.musicCategoryId));
  971. // 设置指法
  972. // const code = state.isConcert ? mappingVoicePart(state.trackId, "ENSEMBLE") : mappingVoicePart(state.subjectId, "INSTRUMENT");
  973. /**
  974. * 各平台的乐器声部id不统一,为了兼容处理老的数据,加上乐器code码,此码唯一
  975. * 获取指法code
  976. */
  977. const code = state.isConcert ? matchVoicePart(state.trackId, "CONCERT") : matchVoicePart(state.musicalCodeId, "SINGLE");
  978. state.fingeringInfo = subjectFingering(code);
  979. console.log("🚀 ~ state.fingeringInfo:", code, state.fingeringInfo, state.trackId, state.track);
  980. state.musicalCodeId = state.fingeringInfo?.id || 0
  981. state.musicalCode = musicalInstrumentCodeInfo.find(item => item.id === state.musicalCodeId)?.code || state.trackId
  982. ;(window as any).DYSubjectId = state.musicalCodeId
  983. // 如果切换的声轨没有指法,择指法开关置灰并且不可点击
  984. if (!state.fingeringInfo.name && state.setting.displayFingering) {
  985. state.setting.displayFingering = false
  986. }
  987. // 检测是否原音和伴奏都有
  988. if (!state.music || !state.accompany) {
  989. state.playSource = state.music ? "music" : "background";
  990. }
  991. // 如果是PC端,放大曲谱
  992. state.platform = query.platform?.toLocaleUpperCase() || "";
  993. if (state.platform === IPlatform.PC) {
  994. state.zoom = query.zoom || 1.5;
  995. }
  996. /**
  997. * 默认渲染什么谱面类型 & 能否转谱逻辑
  998. * 渲染类型:首先取url参数musicRenderType,没有该参数则取musicalInstruments字段匹配的当前分轨的defaultScore,没有匹配到则取默认值('firstTone')
  999. * 能否转谱:先取isConvertibleScore字段,如果isConvertibleScore为true,则取musicalInstruments字段匹配的当前分轨的transferFlag,都为true则可以转谱
  1000. *
  1001. */
  1002. let pitchTrack = null
  1003. if (state.isConcert) {
  1004. musicalCode = musicalInstrumentCodeInfo.find((item: any) => item.id === state.musicalCodeId)?.code
  1005. pitchTrack = data.musicalInstruments?.find((item: any) => item.code === musicalCode)
  1006. } else {
  1007. pitchTrack = data.musicalInstruments?.find((item: any) => item.code === musicalCode)
  1008. }
  1009. let musicalRenderType = ''
  1010. if (pitchTrack?.defaultScore) {
  1011. musicalRenderType = pitchTrack?.defaultScore === 'STAVE' ? 'staff' : pitchTrack?.defaultScore === 'JIAN' ? 'firstTone' : pitchTrack?.defaultScore === 'FIRST' ? 'fixedTone' : ''
  1012. }
  1013. state.musicRenderType = query.musicRenderType || musicalRenderType || EnumMusicRenderType.firstTone;
  1014. state.enableNotation = pitchTrack ? data.isConvertibleScore && pitchTrack.transferFlag : data.isConvertibleScore
  1015. console.log("state对象", state);
  1016. // 评测基准频率
  1017. state.baseFrequency = data.evaluationFrequency ? data.evaluationFrequency.split(",")[0] : 440
  1018. state.baseFrequency = Number(state.baseFrequency)
  1019. // 用户上次的频率和基准频率误差超过10,则重置
  1020. if (Math.abs(state.setting.frequency - state.baseFrequency) > 10) {
  1021. state.setting.frequency = state.baseFrequency >= 0 ? state.baseFrequency : 440
  1022. } else {
  1023. state.setting.frequency = state.setting.frequency || state.baseFrequency
  1024. }
  1025. };
  1026. // 多分轨合并显示标示
  1027. const setCustom = (trackNum?: number) => {
  1028. if (trackNum || state.extConfigJson.multitrack) {
  1029. setGlobalData("multitrack", trackNum || state.extConfigJson.multitrack);
  1030. }
  1031. };
  1032. /** 跟练模式播放节拍器(叮咚) */
  1033. export const followBeatPaly = () => {
  1034. let metroTimer: any = null;
  1035. if (!followData.start) {
  1036. clearTimeout(metroTimer)
  1037. metroTimer = null
  1038. return;
  1039. }
  1040. const time = state.measureTime*1000 / metronomeData.totalNumerator
  1041. requestAnimationFrame(() => {
  1042. const endTime = Date.now();
  1043. if (endTime - state.beatStartTime < time) {
  1044. followBeatPaly();
  1045. } else {
  1046. // metroTimer = setTimeout(() => {
  1047. // metronomeData.metro?.simulatePlayAudio()
  1048. // startTime = Date.now();
  1049. // followBeatPaly();
  1050. // }, time);
  1051. metronomeData.metro?.simulatePlayAudio()
  1052. state.beatStartTime = Date.now();
  1053. followBeatPaly();
  1054. }
  1055. });
  1056. };