12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046 |
- import { Button, Toast, Popup } from 'vant'
- import { defineComponent, onBeforeUnmount, onMounted, Ref, ref, Teleport, Transition, reactive } from 'vue'
- import '@dotlottie/player-component'
- import detailState, { isRhythmicExercises } from '/src/pages/detail/state'
- import SettingState from '/src/pages/detail/setting-state'
- import {
- IPostMessage,
- listenerMessage,
- postMessage,
- promisefiyPostMessage,
- removeListenerMessage,
- CallBack
- } from '/src/helpers/native-message'
- import { browser } from '/src/helpers/utils'
- import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
- import { getBoundingBoxByverticalNote, getNoteByMeasuresSlursStart, getParentNote } from '/src/pages/detail/helpers'
- import { handleCheckEvaluatStatus, useClientType, useOriginSearch, setWiredStatus } from '../uses'
- import { startButtonShow } from './index'
- import { getLeveByScoreMeasure } from '/src/pages/detail/evaluating/helper'
- import Evaluating, { evaluatingShow } from '../popups/evaluating'
- // @ts-ignore
- import styles from './index.module.less'
- import { Vue3Lottie } from 'vue3-lottie'
- import startData from './data/start_new.json'
- import startingData from './data/starting_new.json'
- import { unitTestData } from '../unitTest'
- import iconEvaluatingStart from './icons/icon-evaluatingStart.png'
- import iconEvaluatingBegin from './icons/icon-evaluatingBegin.png'
- import qs from 'query-string'
- import CheckDelayPopup from "/src/pages/detail/CheckDelayPopup";
- import Headphone, { HeadphoneData } from "/src/pages/detail/Headphone";
- import { modelType, followRef } from './index'
- /** 初始化评测音频 */
- export const evaluatCreateMusicPlayer = () => {
- return new Promise((resolve) => {
- // 初始化曲谱音频 和效音音频
- postMessage(
- {
- api: "createMusicPlayer",
- content: {
- musicSrc: runtime.songs.background || runtime.songs.music, // 曲谱音频url
- tuneSrc: "https://oss.dayaedu.com/cloud-coach/1686725501654check_music1_(1).mp3", //效音音频url
- },
- },
- () => {
- if (browserInfo.ios) {
- resolve(true);
- }
- }
- );
- // 安卓不需要
- if(!browserInfo.ios){
- resolve(true)
- }
- })
- }
- const searchParams: any = qs.parse(location.search)
- /**
- * 节拍器时长
- * 评测模式时,应该传节拍器时长
- * 阶段评测时,判断是否从第一小节开始,并且曲子本身含有节拍器,需要传节拍器时长,否则传0
- */
- let actualBeatLength = 0
- let backtime = 0
- const initBehaviorId = '' + new Date().valueOf()
- const evaluating = ref(false)
- const playStatus: Ref<'connecting' | 'play' | 'stop'> = ref('stop')
- const endloading = ref(false)
- const connentLoading = ref(false)
- const playUrl: Ref<string> = ref('')
- const endResult = ref(null)
- const browserInfo = browser()
- const scoreList: any[] = []
- const recordList: any[] = []
- let calculateInfo: any = {}
- /** 延迟数据 */
- export const delayData = reactive({
- /** 是否强制检测 */
- isForce: true,
- /** 弹窗 */
- open: false,
- /** 延迟次数 */
- count: 0,
- /** 延迟时间 */
- time: 0,
- /** 耳机状态 */
- erji: false,
- /** 检测状态 */
- checkStatus: 'init' as 'init' | 'ing' | 'error',
- step: 1,
- earPhoneType: "" as "" | "有线耳机" | "蓝牙耳机",
- })
- let startTuneTimer: any = null
- /** 获取耳机状态 */
- const getWiredStatus = (): Promise<boolean> => {
- return new Promise((resolve) => {
- const timer = setTimeout(() => {
- resolve(false);
- }, 1000)
- postMessage({
- api: "isWiredHeadsetOn",
- }, (res) => {
- delayData.earPhoneType = res?.content?.type || "";
- const checkIsWired = res?.content?.checkIsWired ? true : false;
- if (checkIsWired) {
- if (delayData.step <= 5) {
- delayData.step = 3
- }
- } else {
- if (delayData.step === 2) {
- delayData.step = 4
- }
- }
- clearTimeout(timer)
- resolve(checkIsWired);
- });
- });
- }
- const closeErji = () => {
- //
- }
- /** 获取设备延迟 */
- const getDeviceDelay = (): Promise<number> => {
- return new Promise((resolve) => {
- const timer = setTimeout(() => {
- resolve(0);
- }, 1000)
- postMessage({
- api: "getDeviceDelay",
- }, (res) => {
- const delay = res?.content?.value > 0 ? res?.content?.value : 0;
- clearTimeout(timer)
- resolve(delay);
- });
- });
- }
- /** 设备延迟检测结束 */
- const handleCheckDelayEnd = () => {
- if (delayData.erji) {
- closeErji();
- } else {
- // this.erjiShow = true;
- HeadphoneData.toggle();
- }
- }
- /** 评测效验 */
- const checkEvaluating = async () => {
- // delayData.erji = await getWiredStatus();
- delayData.time = await getDeviceDelay();
- // 没有设备延迟数据,显示检测组件,并持续检测耳机状态
- if (!delayData.time || delayData.isForce) {
- delayData.count = 0;
- checkWiredStatus();
- if (runtime.delayCheckFirst && searchParams.evaluatingRecord) {
- // closeErji()
- }
- return;
- }
- handleCheckDelayEnd()
- }
- /** 持续检测耳机状态 */
- const checkWiredStatus = () => {
- console.log('耳机状态',delayData.checkStatus, delayData.step)
- // 设备检测结束,停止获取耳机状态
- // if (delayData.checkStatus !== 'ing' || delayData.open === false) {
- // return
- // }
- if (delayData.open === false) {
- return
- }
- setTimeout(async () => {
- delayData.erji = await getWiredStatus();
- if (delayData.erji) {
- delayData.count = 0;
- delayData.time = 0;
- // delayData.checkStatus = 'error'
- } else {
- if (delayData.step === 3) {
- delayData.step = 1
- delayData.checkStatus = 'init'
- }
- }
- checkWiredStatus();
- }, 1000)
- }
- /** 切换效音 */
- const handleToggleTune = (state: 'start' | 'stop' | 'finishTune') => {
- if (state === 'start') {
- delayData.step = 5
- // 开始效音
- postMessage({
- api: "startTune",
- content: {
- count: delayData.count + '',
- }
- }, (res) => {
- // 用户没有授权,需要重置状态
- if (res?.content?.reson) {
- delayData.step = 1
- delayData.checkStatus = 'init'
- } else {
- setTimeout(() => {
- handleToggleTune('stop')
- }, 1500)
- }
- })
- } else if (state === 'stop') {
- // 结束效音,触发时机: 1.监听后台效音返回 2.点击跳过效音或关闭效音
- postMessage({
- api: "endTune"
- })
- // 提前关闭或者返回,需要重置step状态
- if (delayData.open === false) {
- setTimeout(() => {
- delayData.step = 1
- }, 500);
- }
- } else if (state === 'finishTune') {
- delayData.step = 6
- // 效音完成
- postMessage({
- api: "finishTune",
- }, (res) => {
- const result = res?.content?.result //1成功 0失败
- // Toast('检测延迟完成')
- // setTimeout(() => {
- // delayData.open = false
- // }, 500)
- })
- }
-
- }
- /** 开始效音 */
- const startTune = () => {
- // 带了耳机,停止播放效音
- if (delayData.erji) return;
- handleToggleTune('start')
- }
- /** 停止设备延迟检测 */
- const handleStopCheckDelay = () => {
- runtime.delayCheckFirst = true
- delayData.open = false
- startButtonShow.value = true
- setTimeout(() => {
- delayData.checkStatus = 'init'
- delayData.step = 1
- postMessage(
- {
- api: 'isWiredHeadsetOn',
- },
- setWiredStatus
- )
- }, 500);
- handleToggleTune('stop')
- // this.close();
- }
- const handleDelayBack = () => {
- modelType.value = 'init'
- delayData.open = false
- delayData.checkStatus = 'init'
- delayData.step = 1
- handleToggleTune('stop')
- clearTimeout(startTuneTimer)
- }
- /** 开始检测设备延迟 */
- const handleStartCheckDelay = async () => {
- if (delayData.checkStatus === 'ing') return;
- delayData.step = 2
- delayData.erji = await getWiredStatus();
- if (delayData.erji) {
- delayData.checkStatus = 'error'
- return;
- }
- delayData.checkStatus = 'ing';
- startTuneTimer = setTimeout(() => {
- if (delayData.open === true) {
- startTune()
- }
- }, 2000)
- }
- // frequency 频率, amplitude 振幅, decibels 分贝
- type TCriteria = "frequency" | "amplitude" | "decibels";
- /** 获取评测标准 */
- const getEvaluationCriteria = () => {
- let criteria: TCriteria = "frequency";
- // 声部打击乐
- if ([23, 113, 121].includes(detailState.subjectId)) {
- criteria = "amplitude";
- } else if (isRhythmicExercises()) {
- // 分类为节奏练习
- criteria = "decibels";
- }
- return criteria;
- };
- /**
- * 默认按照442计算的音符频率,此处转化为按照设置进行调整
- * @param num 频率
- * @returns 转化后频率
- */
- export const formatPitch = (num?: number): number => {
- if (!num) {
- return -1
- }
- if (SettingState.sett.hertz && SettingState.sett.hertz !== 442) {
- return (num / 442) * SettingState.sett.hertz
- }
- return num
- }
- let starTime = 0
- const formatTimes = () => {
- // const rate = runtime.speed / detailState.baseSpeed //1
- const rate = runtime.basePlayRate; // 播放倍率
- // console.log('评测倍率123',rate)
- actualBeatLength = Math.round(detailState.times[0].fixtime * 1000 / rate)
- const difftime = detailState.times?.[0]?.difftime || 0
- let ListenMode = false
- let dontEvaluatingMode = false
- let skip = false
- const datas = []
- let times = detailState.times
- // 阶段评测前一个节拍的标示
- let preLyricsContent = ''
- let preTimes = []
- let unitTestIdx = 0
- let preTime = 0
- if (unitTestData.isSelectMeasureMode || detailState.section.length == 2) {
- const startIndex = detailState.times.findIndex(
- (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[0].NoteToGraphicalNoteObjectId
- )
- const endIndex = detailState.times.findIndex(
- (n: any) => n.NoteToGraphicalNoteObjectId == detailState.section[1].NoteToGraphicalNoteObjectId
- )
- if (startIndex > 1) {
- preTime = detailState.times[startIndex-1].time * 1000
- }
- times = detailState.times.filter((n: any, index: number) => {
- return index >= startIndex && index <= endIndex
- })
- preTimes = detailState.times.filter((n: any, index: number) => {
- return index < startIndex
- })
- starTime = times[0].sourceRelativeTime || times[0].relativeTime
- actualBeatLength = startIndex == 0 && !detailState.needTick ? actualBeatLength : 0
- // console.log("🚀 ~ times", times, '开始小节', startIndex, actualBeatLength)
- unitTestIdx = startIndex
- }
- // 找到阶段评测,开始小节前面最近的是play或者listen的小节
- if (preTimes.length) {
- for (let index = preTimes.length-1; index >= 0; index--) {
- const item = preTimes[index]
- const note = getNoteByMeasuresSlursStart(item)
- if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
- preLyricsContent = 'Play'
- break
- }
- if (note.formatLyricsEntries.contains('Listen')) {
- preLyricsContent = 'Listen'
- break
- }
- }
- preLyricsContent = preLyricsContent ? preLyricsContent : 'Play'
- }
- // 阶段评测beatLength需要加上预备小节的持续时长
- actualBeatLength = preTimes.length ? actualBeatLength + preTimes[preTimes.length - 1].duration * 1000 : actualBeatLength
- let measureIndex = -1
- let recordMeasure = -1
- let firstNoteTime = unitTestIdx > 1 ? preTime : 0
- for (let index = 0; index < times.length; index++) {
- const item = times[index]
- const note = getNoteByMeasuresSlursStart(item)
- // const rate = runtime.speed / detailState.baseSpeed //1
- const rate = runtime.basePlayRate; // 播放倍率
- const start = difftime + (item.sourceRelativeTime || item.relativeTime) - starTime
- const end = difftime + (item.sourceRelaEndtime || item.relaEndtime) - starTime
- // console.log(start, end, starTime)
- const isStaccato =
- typeof note.voiceEntry.isStaccato === 'function' ? note.voiceEntry.isStaccato() : note.voiceEntry.isStaccato
- const noteRate = isStaccato ? 0.5 : 1
- // console.log('注脚', note.formatLyricsEntries)
- // 如果阶段评测,开始小节没有注脚,则取前面最近的小节的注脚
- if (index == 0 && !note.formatLyricsEntries.length) {
- ListenMode = preLyricsContent === 'Play' ? false : preLyricsContent === 'Listen' ? true : false
- }
- if (note.formatLyricsEntries.contains('Play') || note.formatLyricsEntries.contains('Play...')) {
- ListenMode = false
- }
- if (note.formatLyricsEntries.contains('Listen')) {
- ListenMode = true
- }
- if (note.formatLyricsEntries.contains('纯律结束')) {
- dontEvaluatingMode = false
- }
- if (note.formatLyricsEntries.contains('纯律')) {
- dontEvaluatingMode = true
- }
- const nextNote = detailState.times[index + 1]
- if (skip && (note.stave || !note.noteElement.isRestFlag || (nextNote && !nextNote.noteElement.isRestFlag))) {
- skip = false
- }
- if (note.noteElement.isRestFlag && !!note.stave && !!nextNote && nextNote.noteElement.isRestFlag) {
- skip = true
- }
- if (note.measureOpenIndex != recordMeasure) {
- measureIndex++
- recordMeasure = note.measureOpenIndex
- }
- // console.log(note.measureOpenIndex , measureIndex, note.noteElement.sourceMeasure.measureListIndex)
- const data = {
- timeStamp: (start * 1000) / rate,
- duration: ((end * 1000) / rate - (start * 1000) / rate) * noteRate,
- frequency: formatPitch(item.noteElement?.pitch?.frequency),
- nextFrequency: formatPitch(item.noteElement?.pitch?.nextFrequency),
- prevFrequency: formatPitch(item.noteElement?.pitch?.prevFrequency),
- measureIndex: measureIndex, //note.measureOpenIndex,
- measureRenderIndex: note.noteElement.sourceMeasure.measureListIndex,
- dontEvaluating: ListenMode || dontEvaluatingMode || item.skipMode,
- musicalNotesIndex: index, //item.i,
- denominator: note.noteElement?.Length.denominator,
- isOrnament: !!note?.voiceEntry?.ornamentContainer,
- }
- // console.log('时间1111', data)
- datas.push(data)
- }
- return {
- datas,
- firstNoteTime
- }
- }
- const connect = async () => {
- const search = useOriginSearch()
- connentLoading.value = true
- const behaviorId = sessionStorage.getItem('behaviorId') || search.behaviorId || initBehaviorId
- const rate = runtime.speed / detailState.baseSpeed //1
- calculateInfo = formatTimes()
- const content = {
- musicXmlInfos: calculateInfo.datas,
- firstNoteTime: calculateInfo.firstNoteTime,
- subjectId: detailState.subjectId ? detailState.subjectId : detailState.isPercussion ? 1 : detailState.subjectId,
- detailId: detailState.activeDetail?.id,
- examSongId: search.id,
- xmlUrl: detailState?.activeDetail?.xmlUrl,
- partIndex: detailState.partIndex,
- behaviorId,
- platform: 'WEB',
- clientId: 'STUDENT',
- hertz: SettingState.sett.hertz,
- feature: 'EVALUATION',
- practiceSource: (search.resourceType && search.resourceType === 'practice') ? 'UNIT_TEST_PRACTICE' : search.unitId ? 'UNIT_TEST' : 'PRACTICE',
- // 这里定义的是数字但是因为是通过input输入所以强制转化一次
- reactionTimeMs: parseFloat('' + SettingState.eva.reactionTimeMs) || 0,
- speed: runtime.speed,
- heardLevel: SettingState.eva.difficulty,
- // beatLength: Math.round((RuntimeUtils.getFixTime(detailState.times[0].beatSpeed) * 1000) / rate),
- beatLength: actualBeatLength,
- evaluationCriteria: getEvaluationCriteria(),
- speedRate: parseFloat(runtime.basePlayRate.toFixed(2)), // 播放倍率
- }
- // console.log("🚀 ~ content:", content, rate)
- const clientType = useClientType()
- if (clientType === 'student') {
- content.clientId = 'STUDENT'
- } else if (clientType === 'teacher') {
- content.clientId = 'TEACHER'
- } else {
- content.clientId = 'BACKEND'
- }
- if (browserInfo.android) {
- content.platform = 'ANDROID'
- }
- if (browserInfo.ios) {
- content.platform = 'IOS'
- }
- const evt = await promisefiyPostMessage({
- api: 'startEvaluating',
- content: content,
- })
- if (evt?.content?.reson) {
- Toast.fail({
- message: evt?.content?.reson,
- })
- connentLoading.value = false
- throw evt
- }
- connentLoading.value = false
- }
- const sendOffsetTime = (offsetTime: number) => {
- postMessage(
- {
- api: 'proxyServiceMessage',
- content: {
- header: {
- commond: 'audioPlayStart',
- type: 'SOUND_COMPARE',
- },
- body: {
- offsetTime,
- },
- },
- },
- () => {
- backtime = 0
- }
- )
- }
- const cancelTheEvaluation = () => {
- const search = useOriginSearch()
- setTimeout(() => {
- postMessage({ api: 'endEvaluating', content: { musicScoreId: search.id } })
- playStatus.value = 'stop'
- RuntimeUtils.pause()
- RuntimeUtils.resetPlayStatus()
- RuntimeUtils.clearIntervalTimeline()
- RuntimeUtils.setCurrentTime(0)
- Toast.clear()
- }, 500);
- }
- const stopPlay = () => {
- console.log('调用stopPlay')
- if (!connentLoading.value && evaluating.value) {
- cancelTheEvaluation()
- }
- startButtonShow.value = true
- connentLoading.value = false
- evaluating.value = false
- modelType.value = 'init'
- }
- export const evaluatStopPlay = stopPlay
- const startPlay = () => {
- console.log('连接服务成功,开始播放', new Date().getTime() - runtime.clickTime)
- // if (!SettingState.eva.mute) {
- // RuntimeUtils.changeAllMode()
- // } else {
- // RuntimeUtils.changeMode('background')
- // }
- startButtonShow.value = false
- RuntimeUtils.setPlayState()
- }
- export const setPlayer = async () => {
- // 连接中,禁止重复连接
- if (connentLoading.value) return
- runtime.clickTime = new Date().getTime()
- RuntimeUtils.resetPlayStatus()
- if (detailState.isPauseRecording) {
- evaluating.value = false
- startPlay()
- return
- }
- detailState.evaluatings = {}
- const hint = Toast({
- duration: 0,
- message: '服务连接中...',
- type: 'loading',
- })
- try {
- await connect()
- //startPlay()
- setTimeout(() => {
- console.log('关闭弹窗')
- startButtonShow.value = false
- Toast.clear()
- hint.close()
- }, 100)
- } catch (error) {
- runtime.evaluatingStatus = false
- Toast.clear()
- }
- if (!detailState.needTick) {
- evaluatStart()
- }
- }
- const togglePlay = async () => {
- if (detailState.isPauseRecording) {
- evaluating.value = false
- startPlay()
- return
- }
- if (evaluating.value) {
- stopPlay()
- } else {
- setPlayer()
- }
- }
- const timeupdate = () => {
- console.log('播放事件被触发', playUrl.value, evaluating.value)
- if (playUrl.value) {
- const nowTime = new Date().getTime()
- // console.log('播放开始的时间', nowTime)
- // synced = true
- let time = runtime.audiosInstance?.audios[playUrl.value].currentTime
- // 只有选段模式,并且开始小节非第一小节时,才执行以下计算
- const sectionIdx = detailState.section.length ? detailState.section[0].i : 0
- if (unitTestData.isSelectMeasureMode && sectionIdx > 0 ) {
- time = time - detailState.section[0].time
- }
- console.log('已播放时长: ', time * 1000)
- console.log('不减掉已播放时间: ', nowTime - backtime)
- const delayTime = nowTime - backtime - time * 1000
- console.log('真正播放延迟', delayTime, time, unitTestData.isSelectMeasureMode, sectionIdx)
- // 蓝牙耳机延迟一点发送消息确保在录音后面
- setTimeout(() => {
- sendOffsetTime(delayTime)
- }, 220)
- }
- }
- /**
- * 播放器停止事件
- */
- const playerStop = () => {
- // alert('stop' + this.endloading)
- console.log('playerStop播放器停止事件', endloading.value)
- if (endloading.value) {
- return
- }
- playStatus.value = 'stop'
- endloading.value = true
- startButtonShow.value = true
- RuntimeUtils.resetPlayStatus()
- RuntimeUtils.clearIntervalTimeline()
- RuntimeUtils.setCurrentTime(0)
- Toast({
- duration: 0,
- message: '评分中...',
- type: 'loading',
- })
- setTimeout(() => {
- postMessage(
- {
- api: 'endEvaluating',
- content: {
- musicScoreId: useOriginSearch().id,
- },
- },
- (evt) => {
- console.log('调用endEvaluating结束', evt)
- endloading.value = false
- evaluating.value = false
- // RuntimeUtils.setCaptureMode()
- }
- )
- RuntimeUtils.endCapture()
- }, 500);
- }
- export const evaluatPlayerStop = playerStop
- const endevent = (evt: Event) => {
- console.log('选段播放结束事件')
- // 如果是单元测验和课后训练 播放结束
- if (unitTestData.isSelectMeasureMode && playStatus.value === 'play') {
- playerStop()
- canSubmit.value = true
- return
- }
- if ((evt.target as HTMLAudioElement)?.src === playUrl.value && playStatus.value === 'play') {
- playerStop()
- canSubmit.value = true
- }
- if (detailState.isAppPlay) {
- playerStop()
- canSubmit.value = true
- }
- }
- /**正式开始评测 */
- const evaluatStart = () => {
- if (detailState.needTick) {
- setPlayer()
- }
- playStatus.value = 'play'
- if (detailState.isPauseRecording) {
- postMessage(
- {
- api: 'resumeRecording',
- },
- () => {
- evaluating.value = true
- detailState.isPauseRecording = false
- RuntimeUtils.setCaptureMode()
- }
- )
- return
- } else {
- RuntimeUtils.setCaptureMode()
- }
- console.log('开始录音', new Date().getTime())
-
- postMessage(
- {
- api: 'startRecording',
- content: {
- accompanimentState: SettingState.eva.mute ? 1 : 0,
- firstNoteTime: calculateInfo.firstNoteTime || 0,
- speedRate: parseFloat(runtime.basePlayRate.toFixed(2)), // 播放倍率
- }
- },
- () => {
- // console.log('开始录音app回调时间', Date.now())
- backtime = Date.now()
- evaluating.value = true
- runtime.playState = "play";
- if (detailState.activeDetail?.midiUrl) {
- console.log('midiUrl', detailState.activeDetail?.midiUrl)
- setTimeout(() => {
- sendOffsetTime(0)
- }, 220)
- }
- }
- )
- RuntimeUtils.startCapture()
- }
- /** 音频播放完结束评测 */
- const playEnd_endEvalute = () => {
- playerStop()
- }
- /**
- * 酷乐秀活动接口,Url中有设置并且仅在学生端提评分交数据
- * 管乐团单元测验, url中有单元测验ID仅在学生端提评分交数据
- */
- const submitEvaluationScore = async (data: any) => {
- const search = useOriginSearch()
- if (search.unitId) {
- if (!canSubmit.value) {
- Toast('完整演奏结束才算测验分数!')
- return
- }
- if ((endResult.value as any)?.score) {
- scoreList.push((endResult.value as any)?.score)
- recordList.push(endResult.value)
- }
- /** 有单元测验时,存储分数缓存 */
- postMessage({
- api: 'setCache',
- content: {
- key: 'h5-orchestra-unit',
- value: JSON.stringify({
- musicId: search.id || '',
- unitId: search.unitId || '',
- questionId: search.questionId || '',
- score: canSubmit.value ? (endResult.value as any)?.score || 0 : 0,
- recordId: canSubmit.value ? (endResult.value as any)?.recordIdStr : '',
- }),
- },
- })
- canSubmit.value = false
- }
- }
- /** 活动使用,只有在全部评测完成后才能提交,避免只是一小节就高分的情况 */
- const canSubmit = ref(false)
- /**接受websocket返回的信息 */
- const sendResult = (evt?: IPostMessage) => {
- const { body, header } = evt?.content || {}
- console.log('评测返回', body)
- if (body && header) {
- const data = evt?.content?.body
- if (evt?.content.header.commond === 'overall') {
- // console.log(evt)
- detailState.isHideEvaluatReportSaveBtn = false;
- Toast.clear()
- endResult.value = data
- evaluatingShow.value = true
- submitEvaluationScore(data)
- } else if (evt?.content.header.commond === 'checkDone') {
- // 此处已经在校音中单独监听不做处理
- } else if (evt?.content.header.commond === 'checking') {
- // 此处已经在校音中单独监听不做处理
- } else if (evt?.content.header.commond === "recordEnd") {
- if (delayData.checkStatus !== 'ing') return
- delayData.count++;
- if (delayData.count >= 2) {
- handleToggleTune('finishTune');
- return;
- }
- setTimeout(() => {
- startTune()
- }, 100)
- } else {
- const getBeforeNote = (index: number) => {
- while (index >= 0) {
- const item = detailState.times[index]
- if (item.stave) {
- return item
- }
- index--
- }
- }
- const setEvaluatings = (note: any, data: any, dontTransition = false) => {
- const startNote = getBoundingBoxByverticalNote(note)
- // console.log(detailState.evaluatings, startNote)
- detailState.evaluatings = {
- ...detailState.evaluatings,
- [startNote.measureIndex]: {
- ...startNote,
- ...getLeveByScoreMeasure(data.score),
- score: data.score,
- dontTransition,
- },
- }
- }
- for (let index = 0; index < detailState.times.length; index++) {
- let time = detailState.times[index]
- if (data.measureRenderIndex == time.noteElement.sourceMeasure.measureListIndex) {
- if (!time.stave) {
- const ntime = getBeforeNote(index)
- // console.log('ntime', ntime)
- if (ntime) {
- time = ntime
- }
- }
- if (!time.noteElement.tie) {
- setEvaluatings(time, data)
- } else {
- for (const item of time.noteElement.tie.notes) {
- const note = getParentNote(item)
- if (!note) continue
- setEvaluatings(
- note,
- data,
- item.NoteToGraphicalNoteObjectId !== time.noteElement.tie.StartNote?.NoteToGraphicalNoteObjectId
- )
- }
- }
- break
- }
- }
- }
- }
- }
- const onProgress = () => {
- // console.log(runtime.currentTimeNum, detailState.times[detailState.times.length - 1]?.time - 2, detailState.times)
- if (runtime.currentTimeNum >= detailState.times[detailState.times.length - 1]?.time - 2) {
- canSubmit.value = true
- }
- }
- const cloudMetronome = (evt: any) => {
- startButtonShow.value = true
- }
- /** 监听评测弹窗是否隐藏保存演奏按钮 */
- const hideComplexButton = (callback: CallBack, listen?: boolean) => {
- if (listen) {
- listenerMessage("hideComplexButton", callback);
- } else {
- removeListenerMessage("hideComplexButton", callback);
- }
- };
- // 隐藏存演奏按钮
- const handleComplexButton = (res?: IPostMessage) => {
- console.log('监听是否隐藏保存按钮', res)
- if (res?.content) {
- const { header, body } = res.content;
- detailState.isHideEvaluatReportSaveBtn = true
- }
- };
- // 离开之前再提交一次最高分数
- export const submitMaxScore = () => {
- const search = useOriginSearch()
- if (search.unitId && scoreList.length) {
- console.log('最高分',scoreList,Math.max(...scoreList))
- const maxScore = Math.max(...scoreList)
- const recordIdStr = recordList.find((item: any) => item.score === maxScore)?.recordIdStr
- postMessage({
- api: 'setCache',
- content: {
- key: 'h5-orchestra-unit',
- value: JSON.stringify({
- musicId: search.id || '',
- unitId: search.unitId || '',
- questionId: search.questionId || '',
- score: maxScore,
- recordId: recordIdStr
- }),
- },
- })
- }
- }
- /**
- * 木管(长笛 萨克斯 单簧管)乐器一级的2、3、6测评要放原音音频
- * 铜管乐器一级的1a,1b,5,6测评要放原音音频
- */
- const getMusicMode = (): RuntimeUtils.IMode => {
- const muguan = [2, 4, 5, 6];
- const tongguan = [12, 13, 14, 15, 17];
- if (muguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-2|1-3|1-6)/gi) > -1) {
- return "music";
- }
- if (tongguan.includes(detailState.subjectId) && (detailState.activeDetail?.examSongName || "").search(/[^\u0000-\u00FF](1-1-1|1-1-2|1-5|1-6)/gi) > -1) {
- return "music";
- }
- if ([23, 113, 121].includes(detailState.subjectId)) {
- return "music";
- }
- return "background";
- };
- export default defineComponent({
- name: 'ColexiuButtonEvaluating',
- setup(props, { expose }) {
- onMounted(async () => {
- console.log('进入评测模块')
- delayData.open = (runtime.delayCheckFirst && searchParams.evaluatingRecord || !SettingState.sett.tuning) ? false : true
- if (!SettingState.eva.mute) {
- RuntimeUtils.changeAllMode();
- } else {
- RuntimeUtils.changeMode('background', 'all')
- }
- handleCheckEvaluatStatus()
- // 如果为单元测验和课后训练,不清楚选段数据
- if (!unitTestData.isSelectMeasureMode) {
- detailState.section = []
- detailState.sectionStatus = false
- }
- playUrl.value = runtime.songs.background || (runtime.songs.music as string)
- // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('play', timeupdate)
- // runtime.audiosInstance?.audios[playUrl.value]?.addEventListener('timeupdate', onProgress)
- // RuntimeUtils.event.on('next-click', playerStop)
- RuntimeUtils.event.on('ended', endevent)
- listenerMessage('sendResult', sendResult)
- // listenerMessage('cancelEvaluating', cancelTheEvaluation)
- listenerMessage('cloudTimeUpdae', onProgress)
- RuntimeUtils.event.on('tickDestroy', cloudMetronome)
- RuntimeUtils.event.on('tickEnd', evaluatStart)
- runtime.playEndCallback.endEvaluat = playEnd_endEvalute
- hideComplexButton(handleComplexButton, true);
- // 开始效验
- checkEvaluating()
- })
- onBeforeUnmount(() => {
- // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('play', timeupdate)
- // runtime.audiosInstance?.audios[playUrl.value]?.removeEventListener('timeupdate', onProgress)
- // RuntimeUtils.event.off('next-click', playerStop)
- RuntimeUtils.event.off('ended', endevent)
- RuntimeUtils.event.off('tickDestroy', cloudMetronome)
- removeListenerMessage('sendResult', sendResult)
- // removeListenerMessage('cancelEvaluating', cancelTheEvaluation)
- removeListenerMessage('cloudTimeUpdae', onProgress)
- hideComplexButton(() => {}, false);
- RuntimeUtils.event.off('tickEnd', evaluatStart)
- submitMaxScore()
- })
- expose({
- setPlayer,
- startPlay,
- stopPlay,
- togglePlay,
- playerStop,
- evaluating,
- connentLoading,
- playStatus,
- cancelTheEvaluation,
- })
- return () => {
- return (
- <Teleport to="body" key="StartEvaluating">
- {/* 评测完成结果显示 */}
- <Evaluating data={endResult.value} />
- <Transition name="finish">
- {startButtonShow.value && !delayData.open && modelType.value !== 'init' && (
- <div
- style={{
- backgroundImage: `url(${iconEvaluatingBegin})`
- }}
- class={[styles.evaluatStartBtn]}
- onClick={async () => {
- // 评测模式,如果有系统节拍器,需要先播放系统节拍器
- if (detailState.needTick) {
- await RuntimeUtils.setEvaluatTick()
- } else {
- setPlayer()
- }
- }}
- ></div>
- )}
- </Transition>
- {!evaluating.value ? (
- <div class={styles.dialogueBox} key="start">
- <div class={styles.dialogue}>
- <div>
- 演奏前请调整好乐器,保证最佳演奏状态。<span class={styles.triangle}></span>
- </div>
- </div>
- <Vue3Lottie class={styles.dialogueIcon} animationData={startData}></Vue3Lottie>
- </div>
- ) : (
- <div class={styles.dialogueBox} key="starting">
- <div class={styles.inRadio}>收音中...</div>
- <Vue3Lottie class={styles.inRadioIcon} animationData={startingData}></Vue3Lottie>
- </div>
- )}
- {/* 延迟检测窗口 */}
- <Transition>
- <Popup
- teleport="body"
- class="popup-scale"
- transition="van-scale"
- overlay={false}
- show={delayData.open}
- onClose={() => handleCheckDelayEnd()}
- >
- <CheckDelayPopup
- delayData={delayData}
- onStartCheckDelay={() => handleStartCheckDelay()}
- onClose={() => handleStopCheckDelay()}
- onBack={() => handleDelayBack()}
- />
- </Popup>
- </Transition>
- </Teleport>
- )
- }
- },
- })
|