evaluating.tsx 30 KB

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