|
@@ -11,6 +11,8 @@ import state, { refreshView, setCurrentTime } from '/src/pages/detail/runtime'
|
|
|
import detailState from '/src/pages/detail/state'
|
|
|
import iconFollwBtn from './icons/icon-follwBtn.png'
|
|
|
import { unitTestData } from '/src/subpages/colexiu/unitTest/index'
|
|
|
+import { formatPitch } from '/src/subpages/colexiu/buttons/evaluating'
|
|
|
+
|
|
|
// 显示或隐藏播放按钮
|
|
|
const togglePlayer = (show: boolean = false) => {
|
|
|
let globalPlayer: HTMLElement = document.querySelector('#globalPlayer')!
|
|
@@ -79,9 +81,11 @@ const onClear = () => {
|
|
|
detailState.times.forEach((item) => {
|
|
|
const note: HTMLElement = document.querySelector(`div[data-vf=vf${item.id}]`)!
|
|
|
if (note) {
|
|
|
- note.classList.remove('follow-error')
|
|
|
- note.classList.remove('follow-success')
|
|
|
- // note.classList.add('follow-error')
|
|
|
+ note.classList.remove('follow-up', 'follow-down', 'follow-error', 'follow-success')
|
|
|
+ }
|
|
|
+ const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!
|
|
|
+ if (_note) {
|
|
|
+ _note.classList.remove('follow-up', 'follow-down')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -147,6 +151,8 @@ const getNoteIndex = (): any => {
|
|
|
id: item.id,
|
|
|
min: item.frequency - (item.frequency - item.noteElement.pitch.prevFrequency) * 0.1,
|
|
|
max: item.frequency + (item.noteElement.pitch.nextFrequency - item.frequency) * 0.1,
|
|
|
+ duration: item.duration,
|
|
|
+ baseFrequency: formatPitch(item.noteElement.pitch.frequency),
|
|
|
}
|
|
|
}
|
|
|
let checking = false
|
|
@@ -172,25 +178,30 @@ const checked = () => {
|
|
|
next()
|
|
|
data.index += 1
|
|
|
data.list = data.list.slice(i + 1)
|
|
|
- setColor(item, true)
|
|
|
+ setColor(item, '', true)
|
|
|
checking = false
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
- setColor(item)
|
|
|
+ setColor(item, audioFrequency.value > item.baseFrequency ? 'follow-up' : 'follow-down')
|
|
|
checking = false
|
|
|
}
|
|
|
-const setColor = (item: any, isRight = false) => {
|
|
|
+
|
|
|
+const setColor = (item: any, state: 'follow-up' | 'follow-down' | '', isRight = false) => {
|
|
|
const note: HTMLElement = document.querySelector(`div[data-vf=vf${item.id}]`)!
|
|
|
if (note) {
|
|
|
+ note.classList.remove('follow-up', 'follow-down', 'follow-error', 'follow-success')
|
|
|
if (isRight) {
|
|
|
- note.classList.remove('follow-error')
|
|
|
note.classList.add('follow-success')
|
|
|
} else {
|
|
|
- note.classList.remove('follow-success')
|
|
|
- note.classList.add('follow-error')
|
|
|
+ note.classList.add('follow-error', state)
|
|
|
}
|
|
|
}
|
|
|
+ const _note: HTMLElement = document.getElementById(`vf-${item.id}`)!
|
|
|
+ if (_note) {
|
|
|
+ _note.classList.remove('follow-up', 'follow-down')
|
|
|
+ state && _note.classList.add(state)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -225,6 +236,12 @@ export default defineComponent({
|
|
|
></Button>
|
|
|
)}
|
|
|
</Transition>
|
|
|
+ <div style={{ display: data.start ? "" : "none" }} class={styles.noteState}>
|
|
|
+ <span style={{ background: "#977CFF" }} class={styles.dot}></span>
|
|
|
+ <span>低</span>
|
|
|
+ <span style={{ background: "rgb(255, 0, 0)" }} class={styles.dot}></span>
|
|
|
+ <span>高</span>
|
|
|
+ </div>
|
|
|
{/* <div class={styles.title}>
|
|
|
<span>音符频率: {noteFrequency.value.toFixed(2)}</span>
|
|
|
<span style={{ color: 'red', marginLeft: '10px' }}>拾音频率: {audioFrequency.value.toFixed(2)}</span>
|