evaluating.tsx 32 KB

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