evaluating.tsx 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996
  1. import { Button, Toast, Popup } from 'vant'
  2. import { defineComponent, onBeforeUnmount, onMounted, Ref, ref, Teleport, Transition, reactive } from 'vue'
  3. import '@dotlottie/player-component'
  4. import detailState, { isRhythmicExercises } from '/src/pages/detail/state'
  5. import SettingState from '/src/pages/detail/setting-state'
  6. import {
  7. IPostMessage,
  8. listenerMessage,
  9. postMessage,
  10. promisefiyPostMessage,
  11. removeListenerMessage,
  12. CallBack
  13. } from '/src/helpers/native-message'
  14. import { browser } from '/src/helpers/utils'
  15. import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
  16. import { getBoundingBoxByverticalNote, getNoteByMeasuresSlursStart, getParentNote } from '/src/pages/detail/helpers'
  17. import { handleCheckEvaluatStatus, useClientType, useOriginSearch } from '../uses'
  18. import { startButtonShow } from './index'
  19. import { getLeveByScoreMeasure } from '/src/pages/detail/evaluating/helper'
  20. import Evaluating, { evaluatingShow } from '../popups/evaluating'
  21. // @ts-ignore
  22. import styles from './index.module.less'
  23. import { Vue3Lottie } from 'vue3-lottie'
  24. import startData from './data/start_new.json'
  25. import startingData from './data/starting_new.json'
  26. import { unitTestData } from '../unitTest'
  27. import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
  28. import qs from 'query-string'
  29. import CheckDelayPopup from "/src/pages/detail/CheckDelayPopup";
  30. import Headphone, { HeadphoneData } from "/src/pages/detail/Headphone";
  31. import { modelType } from './index'
  32. /** 初始化评测音频 */
  33. export const evaluatCreateMusicPlayer = () => {
  34. return new Promise((resolve) => {
  35. // 初始化曲谱音频 和效音音频
  36. postMessage(
  37. {
  38. api: "createMusicPlayer",
  39. content: {
  40. musicSrc: runtime.songs.background || runtime.songs.music, // 曲谱音频url
  41. tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
  42. },
  43. },
  44. () => {
  45. if (browserInfo.ios) {
  46. resolve(true);
  47. }
  48. }
  49. );
  50. // 安卓不需要
  51. if(!browserInfo.ios){
  52. resolve(true)
  53. }
  54. })
  55. }
  56. const searchParams: any = qs.parse(location.search)
  57. /**
  58. * 节拍器时长
  59. * 评测模式时,应该传节拍器时长
  60. * 阶段评测时,判断是否从第一小节开始,并且曲子本身含有节拍器,需要传节拍器时长,否则传0
  61. */
  62. let actualBeatLength = 0
  63. let backtime = 0
  64. const initBehaviorId = '' + new Date().valueOf()
  65. const evaluating = ref(false)
  66. const playStatus: Ref<'connecting' | 'play' | 'stop'> = ref('stop')
  67. const endloading = ref(false)
  68. const connentLoading = ref(false)
  69. const playUrl: Ref<string> = ref('')
  70. const endResult = ref(null)
  71. const browserInfo = browser()
  72. const scoreList: any[] = []
  73. let calculateInfo: any = {}
  74. /** 延迟数据 */
  75. const delayData = reactive({
  76. /** 是否强制检测 */
  77. isForce: true,
  78. /** 弹窗 */
  79. open: false,
  80. /** 延迟次数 */
  81. count: 0,
  82. /** 延迟时间 */
  83. time: 0,
  84. /** 耳机状态 */
  85. erji: false,
  86. /** 检测状态 */
  87. checkStatus: 'init' as 'init' | 'ing' | 'error',
  88. step: 1,
  89. earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机",
  90. })
  91. /** 获取耳机状态 */
  92. const getWiredStatus = (): Promise<boolean> => {
  93. return new Promise((resolve) => {
  94. const timer = setTimeout(() => {
  95. resolve(false);
  96. }, 1000)
  97. postMessage({
  98. api: "isWiredHeadsetOn",
  99. }, (res) => {
  100. delayData.earPhoneType = res?.content?.type || "";
  101. const checkIsWired = res?.content?.checkIsWired ? true : false;
  102. if (checkIsWired) {
  103. if (delayData.step <= 5) {
  104. delayData.step = 3
  105. }
  106. } else {
  107. if (delayData.step === 2) {
  108. delayData.step = 4
  109. }
  110. }
  111. clearTimeout(timer)
  112. resolve(checkIsWired);
  113. });
  114. });
  115. }
  116. const closeErji = () => {
  117. //
  118. }
  119. /** 获取设备延迟 */
  120. const getDeviceDelay = (): Promise<number> => {
  121. return new Promise((resolve) => {
  122. const timer = setTimeout(() => {
  123. resolve(0);
  124. }, 1000)
  125. postMessage({
  126. api: "getDeviceDelay",
  127. }, (res) => {
  128. const delay = res?.content?.value > 0 ? res?.content?.value : 0;
  129. clearTimeout(timer)
  130. resolve(delay);
  131. });
  132. });
  133. }
  134. /** 设备延迟检测结束 */
  135. const handleCheckDelayEnd = () => {
  136. if (delayData.erji) {
  137. closeErji();
  138. } else {
  139. // this.erjiShow = true;
  140. HeadphoneData.toggle();
  141. }
  142. }
  143. /** 评测效验 */
  144. const checkEvaluating = async () => {
  145. delayData.erji = await getWiredStatus();
  146. delayData.time = await getDeviceDelay();
  147. // 没有设备延迟数据,显示检测组件,并持续检测耳机状态
  148. if (!delayData.time || delayData.isForce) {
  149. delayData.open = (runtime.delayCheckFirst && searchParams.evaluatingRecord || !SettingState.sett.tuning) ? false : true
  150. delayData.count = 0;
  151. checkWiredStatus();
  152. if (runtime.delayCheckFirst && searchParams.evaluatingRecord) {
  153. // closeErji()
  154. }
  155. return;
  156. }
  157. handleCheckDelayEnd()
  158. }
  159. /** 持续检测耳机状态 */
  160. const checkWiredStatus = () => {
  161. console.log('耳机状态',delayData.checkStatus, delayData.step)
  162. // 设备检测结束,停止获取耳机状态
  163. // if (delayData.checkStatus !== 'ing' || delayData.open === false) {
  164. // return
  165. // }
  166. if (delayData.open === false) {
  167. return
  168. }
  169. setTimeout(async () => {
  170. delayData.erji = await getWiredStatus();
  171. if (delayData.erji) {
  172. delayData.count = 0;
  173. delayData.time = 0;
  174. // delayData.checkStatus = 'error'
  175. } else {
  176. if (delayData.step === 3) {
  177. delayData.step = 1
  178. }
  179. }
  180. checkWiredStatus();
  181. }, 1000)
  182. }
  183. /** 切换效音 */
  184. const handleToggleTune = (state: 'start' | 'stop' | 'finishTune') => {
  185. if (state === 'start') {
  186. delayData.step = 5
  187. // 开始效音
  188. postMessage({
  189. api: "startTune",
  190. content: {
  191. count: delayData.count + '',
  192. }
  193. }, (res) => {
  194. // 用户没有授权,需要重置状态
  195. if (res?.content?.reson) {
  196. delayData.step = 1
  197. delayData.checkStatus = 'init'
  198. } else {
  199. setTimeout(() => {
  200. handleToggleTune('stop')
  201. }, 1500)
  202. }
  203. })
  204. } else if (state === 'stop') {
  205. // 结束效音,触发时机: 1.监听后台效音返回 2.点击跳过效音或关闭效音
  206. postMessage({
  207. api: "endTune"
  208. })
  209. } else if (state === 'finishTune') {
  210. delayData.step = 6
  211. // 效音完成
  212. postMessage({
  213. api: "finishTune",
  214. }, (res) => {
  215. const result = res?.content?.result //1成功 0失败
  216. // Toast('检测延迟完成')
  217. // setTimeout(() => {
  218. // delayData.open = false
  219. // }, 500)
  220. })
  221. }
  222. }
  223. /** 开始效音 */
  224. const startTune = () => {
  225. // 带了耳机,停止播放效音
  226. if (delayData.erji) return;
  227. handleToggleTune('start')
  228. }
  229. /** 停止设备延迟检测 */
  230. const handleStopCheckDelay = () => {
  231. runtime.delayCheckFirst = true
  232. delayData.open = false
  233. delayData.checkStatus = 'init'
  234. delayData.step = 1
  235. handleToggleTune('stop')
  236. // this.close();
  237. }
  238. const handleDelayBack = () => {
  239. modelType.value = 'init'
  240. delayData.open = false
  241. delayData.checkStatus = 'init'
  242. delayData.step = 1
  243. handleToggleTune('stop')
  244. }
  245. /** 开始检测设备延迟 */
  246. const handleStartCheckDelay = async () => {
  247. if (delayData.checkStatus === 'ing') return;
  248. delayData.step = 2
  249. delayData.erji = await getWiredStatus();
  250. if (delayData.erji) {
  251. delayData.checkStatus = 'error'
  252. return;
  253. }
  254. delayData.checkStatus = 'ing';
  255. setTimeout(() => {
  256. startTune()
  257. }, 2000)
  258. }
  259. // frequency 频率, amplitude 振幅, decibels 分贝
  260. type TCriteria = "frequency" | "amplitude" | "decibels";
  261. /** 获取评测标准 */
  262. const getEvaluationCriteria = () => {
  263. let criteria: TCriteria = "frequency";
  264. // 声部打击乐
  265. if ([23, 113, 121].includes(detailState.subjectId)) {
  266. criteria = "amplitude";
  267. } else if (isRhythmicExercises()) {
  268. // 分类为节奏练习
  269. criteria = "decibels";
  270. }
  271. return criteria;
  272. };
  273. /**
  274. * 默认按照442计算的音符频率,此处转化为按照设置进行调整
  275. * @param num 频率
  276. * @returns 转化后频率
  277. */
  278. const formatPitch = (num?: number): number => {
  279. if (!num) {
  280. return -1
  281. }
  282. if (SettingState.sett.hertz && SettingState.sett.hertz !== 442) {
  283. return (num / 442) * SettingState.sett.hertz
  284. }
  285. return num
  286. }
  287. let starTime = 0
  288. const formatTimes = () => {
  289. const rate = runtime.speed / detailState.baseSpeed //1
  290. actualBeatLength = Math.round(detailState.times[0].fixtime * 1000 / rate)
  291. const difftime = detailState.times?.[0]?.difftime || 0
  292. let ListenMode = false
  293. let dontEvaluatingMode = false
  294. let skip = false
  295. const datas = []
  296. let times = detailState.times
  297. // 阶段评测前一个节拍的标示
  298. let preLyricsContent = ''
  299. let preTimes = []
  300. let unitTestIdx = 0
  301. let preTime = 0
  302. if (unitTestData.isSelectMeasureMode) {
  303. const startIndex = detailState.times.findIndex(
  304. (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[0].NoteToGraphicalNoteObjectId
  305. )
  306. const endIndex = detailState.times.findIndex(
  307. (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[1].NoteToGraphicalNoteObjectId
  308. )
  309. if (startIndex > 1) {
  310. preTime = detailState.times[startIndex-1].time * 1000
  311. }
  312. times = detailState.times.filter((n: any, index: number) => {
  313. return index >= startIndex && index <= endIndex
  314. })
  315. preTimes = detailState.times.filter((n: any, index: number) => {
  316. return index < startIndex
  317. })
  318. starTime = times[0].sourceRelativeTime || times[0].relativeTime
  319. actualBeatLength = startIndex == 0 && !detailState.needTick ? actualBeatLength : 0
  320. // console.log("🚀 ~ times", times, '开始小节', startIndex, actualBeatLength)
  321. unitTestIdx = startIndex
  322. }
  323. // 找到阶段评测,开始小节前面最近的是play或者listen的小节
  324. if (preTimes.length) {
  325. for (let index = preTimes.length-1; index >= 0; index--) {
  326. const item = preTimes[index]
  327. const note = getNoteByMeasuresSlursStart(item)
  328. if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
  329. preLyricsContent = 'Play'
  330. break
  331. }
  332. if (note.formatLyricsEntries.contains('Listen')) {
  333. preLyricsContent = 'Listen'
  334. break
  335. }
  336. }
  337. preLyricsContent = preLyricsContent ? preLyricsContent : 'Play'
  338. }
  339. let measureIndex = -1
  340. let recordMeasure = -1
  341. let firstNoteTime = unitTestIdx > 1 ? preTime : 0
  342. for (let index = 0; index < times.length; index++) {
  343. const item = times[index]
  344. const note = getNoteByMeasuresSlursStart(item)
  345. const rate = runtime.speed / detailState.baseSpeed //1
  346. const start = difftime + (item.sourceRelativeTime || item.relativeTime) - starTime
  347. const end = difftime + (item.sourceRelaEndtime || item.relaEndtime) - starTime
  348. // console.log(start, end, starTime)
  349. const isStaccato =
  350. typeof note.voiceEntry.isStaccato === 'function' ? note.voiceEntry.isStaccato() : note.voiceEntry.isStaccato
  351. const noteRate = isStaccato ? 0.5 : 1
  352. // console.log('注脚', note.formatLyricsEntries)
  353. // 如果阶段评测,开始小节没有注脚,则取前面最近的小节的注脚
  354. if (index == 0 && !note.formatLyricsEntries.length) {
  355. ListenMode = preLyricsContent === 'Play' ? false : preLyricsContent === 'Listen' ? true : false
  356. }
  357. if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
  358. ListenMode = false
  359. }
  360. if (note.formatLyricsEntries.contains('Listen')) {
  361. ListenMode = true
  362. }
  363. if (note.formatLyricsEntries.contains('纯律结束')) {
  364. dontEvaluatingMode = false
  365. }
  366. if (note.formatLyricsEntries.contains('纯律')) {
  367. dontEvaluatingMode = true
  368. }
  369. const nextNote = detailState.times[index + 1]
  370. if (skip && (note.stave || !note.noteElement.isRestFlag || (nextNote && !nextNote.noteElement.isRestFlag))) {
  371. skip = false
  372. }
  373. if (note.noteElement.isRestFlag && !!note.stave && !!nextNote && nextNote.noteElement.isRestFlag) {
  374. skip = true
  375. }
  376. if (note.measureOpenIndex != recordMeasure) {
  377. measureIndex++
  378. recordMeasure = note.measureOpenIndex
  379. }
  380. // console.log(note.measureOpenIndex , measureIndex, note.noteElement.sourceMeasure.measureListIndex)
  381. const data = {
  382. timeStamp: (start * 1000) / rate,
  383. duration: ((end * 1000) / rate - (start * 1000) / rate) * noteRate,
  384. frequency: formatPitch(item.noteElement?.pitch?.frequency),
  385. nextFrequency: formatPitch(item.noteElement?.pitch?.nextFrequency),
  386. prevFrequency: formatPitch(item.noteElement?.pitch?.prevFrequency),
  387. measureIndex: measureIndex, //note.measureOpenIndex,
  388. measureRenderIndex: note.noteElement.sourceMeasure.measureListIndex,
  389. dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
  390. musicalNotesIndex: index, //item.i,
  391. denominator: note.noteElement?.Length.denominator,
  392. isOrnament: !!note?.voiceEntry?.ornamentContainer,
  393. }
  394. // console.log('时间1111', data)
  395. datas.push(data)
  396. }
  397. return {
  398. datas,
  399. firstNoteTime
  400. }
  401. }
  402. const connect = async () => {
  403. const search = useOriginSearch()
  404. connentLoading.value = true
  405. const behaviorId = sessionStorage.getItem('behaviorId') || search.behaviorId || initBehaviorId
  406. const rate = runtime.speed / detailState.baseSpeed //1
  407. calculateInfo = formatTimes()
  408. const content = {
  409. musicXmlInfos: calculateInfo.datas,
  410. firstNoteTime: calculateInfo.firstNoteTime,
  411. subjectId: detailState.subjectId ? detailState.subjectId : detailState.isPercussion ? 1 : detailState.subjectId,
  412. detailId: detailState.activeDetail?.id,
  413. examSongId: search.id,
  414. xmlUrl: detailState?.activeDetail?.xmlUrl,
  415. partIndex: detailState.partIndex,
  416. behaviorId,
  417. platform: 'WEB',
  418. clientId: 'STUDENT',
  419. hertz: SettingState.sett.hertz,
  420. feature: 'EVALUATION',
  421. practiceSource: (search.resourceType && search.resourceType === 'practice') ? 'UNIT_TEST_PRACTICE' : search.unitId ? 'UNIT_TEST' : 'PRACTICE',
  422. // 这里定义的是数字但是因为是通过input输入所以强制转化一次
  423. reactionTimeMs: parseFloat('' + SettingState.eva.reactionTimeMs) || 0,
  424. speed: runtime.speed,
  425. heardLevel: SettingState.eva.difficulty,
  426. // beatLength: Math.round((RuntimeUtils.getFixTime(detailState.times[0].beatSpeed) * 1000) / rate),
  427. beatLength: actualBeatLength,
  428. evaluationCriteria: getEvaluationCriteria(),
  429. }
  430. // console.log("🚀 ~ content:", content, rate)
  431. const clientType = useClientType()
  432. if (clientType === 'student') {
  433. content.clientId = 'STUDENT'
  434. } else if (clientType === 'teacher') {
  435. content.clientId = 'TEACHER'
  436. } else {
  437. content.clientId = 'BACKEND'
  438. }
  439. if (browserInfo.android) {
  440. content.platform = 'ANDROID'
  441. }
  442. if (browserInfo.ios) {
  443. content.platform = 'IOS'
  444. }
  445. const evt = await promisefiyPostMessage({
  446. api: 'startEvaluating',
  447. content: content,
  448. })
  449. if (evt?.content?.reson) {
  450. Toast.fail({
  451. message: evt?.content?.reson,
  452. })
  453. connentLoading.value = false
  454. throw evt
  455. }
  456. connentLoading.value = false
  457. }
  458. const sendOffsetTime = (offsetTime: number) => {
  459. postMessage(
  460. {
  461. api: 'proxyServiceMessage',
  462. content: {
  463. header: {
  464. commond: 'audioPlayStart',
  465. type: 'SOUND_COMPARE',
  466. },
  467. body: {
  468. offsetTime,
  469. },
  470. },
  471. },
  472. () => {
  473. backtime = 0
  474. }
  475. )
  476. }
  477. const cancelTheEvaluation = () => {
  478. const search = useOriginSearch()
  479. setTimeout(() => {
  480. postMessage({ api: 'endEvaluating', content: { musicScoreId: search.id } })
  481. playStatus.value = 'stop'
  482. RuntimeUtils.pause()
  483. RuntimeUtils.resetPlayStatus()
  484. RuntimeUtils.clearIntervalTimeline()
  485. RuntimeUtils.setCurrentTime(0)
  486. Toast.clear()
  487. }, 500);
  488. }
  489. const stopPlay = () => {
  490. console.log('调用stopPlay')
  491. if (!connentLoading.value) {
  492. cancelTheEvaluation()
  493. }
  494. startButtonShow.value = true
  495. connentLoading.value = false
  496. evaluating.value = false
  497. modelType.value = 'init'
  498. }
  499. export const evaluatStopPlay = stopPlay
  500. const startPlay = () => {
  501. console.log('连接服务成功,开始播放', new Date().getTime() - runtime.clickTime)
  502. // if (!SettingState.eva.mute) {
  503. // RuntimeUtils.changeAllMode()
  504. // } else {
  505. // RuntimeUtils.changeMode('background')
  506. // }
  507. startButtonShow.value = false
  508. RuntimeUtils.setPlayState()
  509. }
  510. const setPlayer = async () => {
  511. // 连接中,禁止重复连接
  512. if (connentLoading.value) return
  513. runtime.clickTime = new Date().getTime()
  514. RuntimeUtils.resetPlayStatus()
  515. if (detailState.isPauseRecording) {
  516. evaluating.value = false
  517. startPlay()
  518. return
  519. }
  520. detailState.evaluatings = {}
  521. const hint = Toast({
  522. duration: 0,
  523. message: '服务连接中...',
  524. type: 'loading',
  525. })
  526. try {
  527. await connect()
  528. //startPlay()
  529. setTimeout(() => {
  530. console.log('关闭弹窗')
  531. startButtonShow.value = false
  532. Toast.clear()
  533. hint.close()
  534. }, 100)
  535. } catch (error) {
  536. runtime.evaluatingStatus = false
  537. Toast.clear()
  538. }
  539. evaluatStart()
  540. }
  541. const togglePlay = () => {
  542. if (detailState.isPauseRecording) {
  543. evaluating.value = false
  544. startPlay()
  545. return
  546. }
  547. if (evaluating.value) {
  548. stopPlay()
  549. } else {
  550. setPlayer()
  551. }
  552. }
  553. const timeupdate = () => {
  554. console.log('播放事件被触发', playUrl.value, evaluating.value)
  555. if (playUrl.value) {
  556. const nowTime = new Date().getTime()
  557. // console.log('播放开始的时间', nowTime)
  558. // synced = true
  559. let time = runtime.audiosInstance?.audios[playUrl.value].currentTime
  560. // 只有选段模式,并且开始小节非第一小节时,才执行以下计算
  561. const sectionIdx = detailState.section.length ? detailState.section[0].i : 0
  562. if (unitTestData.isSelectMeasureMode && sectionIdx > 0 ) {
  563. time = time - detailState.section[0].time
  564. }
  565. console.log('已播放时长: ', time * 1000)
  566. console.log('不减掉已播放时间: ', nowTime - backtime)
  567. const delayTime = nowTime - backtime - time * 1000
  568. console.log('真正播放延迟', delayTime, time, unitTestData.isSelectMeasureMode, sectionIdx)
  569. // 蓝牙耳机延迟一点发送消息确保在录音后面
  570. setTimeout(() => {
  571. sendOffsetTime(delayTime)
  572. }, 220)
  573. }
  574. }
  575. /**
  576. * 播放器停止事件
  577. */
  578. const playerStop = () => {
  579. // alert('stop' + this.endloading)
  580. console.log('playerStop播放器停止事件', endloading.value)
  581. if (endloading.value) {
  582. return
  583. }
  584. playStatus.value = 'stop'
  585. endloading.value = true
  586. startButtonShow.value = true
  587. RuntimeUtils.resetPlayStatus()
  588. RuntimeUtils.clearIntervalTimeline()
  589. RuntimeUtils.setCurrentTime(0)
  590. Toast({
  591. duration: 0,
  592. message: '评分中...',
  593. type: 'loading',
  594. })
  595. setTimeout(() => {
  596. postMessage(
  597. {
  598. api: 'endEvaluating',
  599. content: {
  600. musicScoreId: useOriginSearch().id,
  601. },
  602. },
  603. (evt) => {
  604. console.log('调用endEvaluating结束', evt)
  605. endloading.value = false
  606. evaluating.value = false
  607. // RuntimeUtils.setCaptureMode()
  608. }
  609. )
  610. RuntimeUtils.endCapture()
  611. }, 500);
  612. }
  613. export const evaluatPlayerStop = playerStop
  614. const endevent = (evt: Event) => {
  615. // 如果是单元测验和课后训练 播放结束
  616. if (unitTestData.isSelectMeasureMode && playStatus.value === 'play') {
  617. playerStop()
  618. canSubmit.value = true
  619. return
  620. }
  621. if ((evt.target as HTMLAudioElement)?.src === playUrl.value && playStatus.value === 'play') {
  622. playerStop()
  623. canSubmit.value = true
  624. }
  625. if (detailState.isAppPlay) {
  626. playerStop()
  627. canSubmit.value = true
  628. }
  629. }
  630. /**正式开始评测 */
  631. const evaluatStart = () => {
  632. playStatus.value = 'play'
  633. if (detailState.isPauseRecording) {
  634. postMessage(
  635. {
  636. api: 'resumeRecording',
  637. },
  638. () => {
  639. evaluating.value = true
  640. detailState.isPauseRecording = false
  641. RuntimeUtils.setCaptureMode()
  642. }
  643. )
  644. return
  645. } else {
  646. RuntimeUtils.setCaptureMode()
  647. }
  648. console.log('开始录音', new Date().getTime())
  649. postMessage(
  650. {
  651. api: 'startRecording',
  652. content: {
  653. accompanimentState: SettingState.eva.mute ? 1 : 0,
  654. firstNoteTime: calculateInfo.firstNoteTime || 0,
  655. }
  656. },
  657. () => {
  658. // console.log('开始录音app回调时间', Date.now())
  659. backtime = Date.now()
  660. evaluating.value = true
  661. runtime.playState = "play";
  662. if (detailState.activeDetail?.midiUrl) {
  663. console.log('midiUrl', detailState.activeDetail?.midiUrl)
  664. setTimeout(() => {
  665. sendOffsetTime(0)
  666. }, 220)
  667. }
  668. }
  669. )
  670. RuntimeUtils.startCapture()
  671. }
  672. /** 音频播放完结束评测 */
  673. const playEnd_endEvalute = () => {
  674. playerStop()
  675. }
  676. /**
  677. * 酷乐秀活动接口,Url中有设置并且仅在学生端提评分交数据
  678. * 管乐团单元测验, url中有单元测验ID仅在学生端提评分交数据
  679. */
  680. const submitEvaluationScore = async (data: any) => {
  681. const search = useOriginSearch()
  682. if (search.unitId) {
  683. if (!canSubmit.value) {
  684. Toast('完整演奏结束才算测验分数!')
  685. return
  686. }
  687. (endResult.value as any)?.score && scoreList.push((endResult.value as any)?.score)
  688. /** 有单元测验时,存储分数缓存 */
  689. postMessage({
  690. api: 'setCache',
  691. content: {
  692. key: 'h5-orchestra-unit',
  693. value: JSON.stringify({
  694. musicId: search.id || '',
  695. unitId: search.unitId || '',
  696. questionId: search.questionId || '',
  697. score: canSubmit.value ? (endResult.value as any)?.score || 0 : 0,
  698. }),
  699. },
  700. })
  701. canSubmit.value = false
  702. }
  703. }
  704. /** 活动使用,只有在全部评测完成后才能提交,避免只是一小节就高分的情况 */
  705. const canSubmit = ref(false)
  706. /**接受websocket返回的信息 */
  707. const sendResult = (evt?: IPostMessage) => {
  708. const { body, header } = evt?.content || {}
  709. console.log('评测返回', body)
  710. if (body && header) {
  711. const data = evt?.content?.body
  712. if (evt?.content.header.commond === 'overall') {
  713. // console.log(evt)
  714. detailState.isHideEvaluatReportSaveBtn = false;
  715. Toast.clear()
  716. endResult.value = data
  717. evaluatingShow.value = true
  718. submitEvaluationScore(data)
  719. } else if (evt?.content.header.commond === 'checkDone') {
  720. // 此处已经在校音中单独监听不做处理
  721. } else if (evt?.content.header.commond === 'checking') {
  722. // 此处已经在校音中单独监听不做处理
  723. } else if (evt?.content.header.commond === "recordEnd") {
  724. if (delayData.checkStatus !== 'ing') return
  725. delayData.count++;
  726. if (delayData.count >= 2) {
  727. handleToggleTune('finishTune');
  728. return;
  729. }
  730. setTimeout(() => {
  731. startTune()
  732. }, 100)
  733. } else {
  734. const getBeforeNote = (index: number) => {
  735. while (index >= 0) {
  736. const item = detailState.times[index]
  737. if (item.stave) {
  738. return item
  739. }
  740. index--
  741. }
  742. }
  743. const setEvaluatings = (note: any, data: any, dontTransition = false) => {
  744. const startNote = getBoundingBoxByverticalNote(note)
  745. // console.log(detailState.evaluatings, startNote)
  746. detailState.evaluatings = {
  747. ...detailState.evaluatings,
  748. [startNote.measureIndex]: {
  749. ...startNote,
  750. ...getLeveByScoreMeasure(data.score),
  751. score: data.score,
  752. dontTransition,
  753. },
  754. }
  755. }
  756. for (let index = 0; index < detailState.times.length; index++) {
  757. let time = detailState.times[index]
  758. if (data.measureRenderIndex == time.noteElement.sourceMeasure.measureListIndex) {
  759. if (!time.stave) {
  760. const ntime = getBeforeNote(index)
  761. // console.log('ntime', ntime)
  762. if (ntime) {
  763. time = ntime
  764. }
  765. }
  766. if (!time.noteElement.tie) {
  767. setEvaluatings(time, data)
  768. } else {
  769. for (const item of time.noteElement.tie.notes) {
  770. const note = getParentNote(item)
  771. if (!note) continue
  772. setEvaluatings(
  773. note,
  774. data,
  775. item.NoteToGraphicalNoteObjectId !== time.noteElement.tie.StartNote?.NoteToGraphicalNoteObjectId
  776. )
  777. }
  778. }
  779. break
  780. }
  781. }
  782. }
  783. }
  784. }
  785. const onProgress = () => {
  786. // console.log(runtime.currentTimeNum, detailState.times[detailState.times.length - 1]?.time - 2, detailState.times)
  787. if (runtime.currentTimeNum >= detailState.times[detailState.times.length - 1]?.time - 2) {
  788. canSubmit.value = true
  789. }
  790. }
  791. const cloudMetronome = (evt: any) => {
  792. startButtonShow.value = true
  793. }
  794. /** 监听评测弹窗是否隐藏保存演奏按钮 */
  795. const hideComplexButton = (callback: CallBack, listen?: boolean) => {
  796. if (listen) {
  797. listenerMessage("hideComplexButton", callback);
  798. } else {
  799. removeListenerMessage("hideComplexButton", callback);
  800. }
  801. };
  802. // 隐藏存演奏按钮
  803. const handleComplexButton = (res?: IPostMessage) => {
  804. console.log('监听是否隐藏保存按钮', res)
  805. if (res?.content) {
  806. const { header, body } = res.content;
  807. detailState.isHideEvaluatReportSaveBtn = true
  808. }
  809. };
  810. // 离开之前再提交一次最高分数
  811. export const submitMaxScore = () => {
  812. const search = useOriginSearch()
  813. if (search.unitId && scoreList.length) {
  814. console.log('最高分',scoreList,Math.max(...scoreList))
  815. postMessage({
  816. api: 'setCache',
  817. content: {
  818. key: 'h5-orchestra-unit',
  819. value: JSON.stringify({
  820. musicId: search.id || '',
  821. unitId: search.unitId || '',
  822. questionId: search.questionId || '',
  823. score: Math.max(...scoreList),
  824. }),
  825. },
  826. })
  827. }
  828. }
  829. /**
  830. * 木管(长笛 萨克斯 单簧管)乐器一级的2、3、6测评要放原音音频
  831. * 铜管乐器一级的1a,1b,5,6测评要放原音音频
  832. */
  833. const getMusicMode = (): RuntimeUtils.IMode => {
  834. const muguan = [2, 4, 5, 6];
  835. const tongguan = [12, 13, 14, 15, 17];
  836. if (muguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-2|1-3|1-6)/gi) > -1) {
  837. return "music";
  838. }
  839. if (tongguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-1-1|1-1-2|1-5|1-6)/gi) > -1) {
  840. return "music";
  841. }
  842. if ([23, 113, 121].includes(detailState.subjectId)) {
  843. return "music";
  844. }
  845. return "background";
  846. };
  847. export default defineComponent({
  848. name: 'ColexiuButtonEvaluating',
  849. setup(props, { expose }) {
  850. onMounted(async () => {
  851. console.log('进入评测模块')
  852. if (!SettingState.eva.mute) {
  853. RuntimeUtils.changeAllMode();
  854. } else {
  855. RuntimeUtils.changeMode('background', 'all')
  856. }
  857. handleCheckEvaluatStatus()
  858. // 如果为单元测验和课后训练,不清楚选段数据
  859. if (!unitTestData.isSelectMeasureMode) {
  860. detailState.section = []
  861. detailState.sectionStatus = false
  862. }
  863. playUrl.value = runtime.songs.background || (runtime.songs.music as string)
  864. // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('play', timeupdate)
  865. // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('timeupdate', onProgress)
  866. // RuntimeUtils.event.on('next-click', playerStop)
  867. RuntimeUtils.event.on('ended', endevent)
  868. listenerMessage('sendResult', sendResult)
  869. // listenerMessage('cancelEvaluating', cancelTheEvaluation)
  870. listenerMessage('cloudTimeUpdae', onProgress)
  871. RuntimeUtils.event.on('tickDestroy', cloudMetronome)
  872. RuntimeUtils.event.on('tickEnd', evaluatStart)
  873. runtime.playEndCallback.endEvaluat = playEnd_endEvalute
  874. hideComplexButton(handleComplexButton, true);
  875. // 开始效验
  876. checkEvaluating()
  877. })
  878. onBeforeUnmount(() => {
  879. // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('play', timeupdate)
  880. // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('timeupdate', onProgress)
  881. // RuntimeUtils.event.off('next-click', playerStop)
  882. RuntimeUtils.event.off('ended', endevent)
  883. RuntimeUtils.event.off('tickDestroy', cloudMetronome)
  884. removeListenerMessage('sendResult', sendResult)
  885. // removeListenerMessage('cancelEvaluating', cancelTheEvaluation)
  886. removeListenerMessage('cloudTimeUpdae', onProgress)
  887. hideComplexButton(() => {}, false);
  888. RuntimeUtils.event.off('tickEnd', evaluatStart)
  889. submitMaxScore()
  890. })
  891. expose({
  892. setPlayer,
  893. startPlay,
  894. stopPlay,
  895. togglePlay,
  896. playerStop,
  897. evaluating,
  898. connentLoading,
  899. playStatus,
  900. cancelTheEvaluation,
  901. })
  902. return () => {
  903. return (
  904. <Teleport to="body" key="StartEvaluating">
  905. {/* 评测完成结果显示 */}
  906. <Evaluating data={endResult.value} />
  907. <Transition name="finish">
  908. {startButtonShow.value && (
  909. <div
  910. style={{
  911. backgroundImage: `url(${iconEvaluatingStart})`,
  912. 'transform': detailState.isSpecialShapedScreen ? `translateX(${detailState.notchHeight / 4}px)` : '',
  913. }}
  914. class={[styles.evaluatStartBtn]}
  915. onClick={() => {
  916. setPlayer()
  917. }}
  918. ></div>
  919. )}
  920. </Transition>
  921. {!evaluating.value ? (
  922. <div class={styles.dialogueBox} key="start">
  923. <div class={styles.dialogue}>
  924. <div>
  925. 演奏前请调整好乐器,保证最佳演奏状态。<span class={styles.triangle}></span>
  926. </div>
  927. </div>
  928. <Vue3Lottie class={styles.dialogueIcon} animationData={startData}></Vue3Lottie>
  929. </div>
  930. ) : (
  931. <div class={styles.dialogueBox} key="starting">
  932. <div class={styles.inRadio}>收音中...</div>
  933. <Vue3Lottie class={styles.inRadioIcon} animationData={startingData}></Vue3Lottie>
  934. </div>
  935. )}
  936. {/* 延迟检测窗口 */}
  937. <Popup
  938. teleport="body"
  939. class="popup-scale"
  940. transition="van-scale"
  941. overlay={false}
  942. show={delayData.open}
  943. onClose={() => handleCheckDelayEnd()}
  944. >
  945. <CheckDelayPopup
  946. delayData={delayData}
  947. onStartCheckDelay={() => handleStartCheckDelay()}
  948. onClose={() => handleStopCheckDelay()}
  949. onBack={() => handleDelayBack()}
  950. />
  951. </Popup>
  952. </Teleport>
  953. )
  954. }
  955. },
  956. })