state.ts 35 KB

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