music-score/src/view/audio-list/midiPlayer.tsx

/**
 * h5播放midi
 */

import { defineComponent, reactive } from "vue";
import state, { gotoNext, onEnded, onPlay } from "/src/state";

let timer: any = null;
const midiData = reactive({
    iframeRef: null as any,
    playing: false,
    index: 0,
    /** 倍数播放 */
    rate: 1
})

const playNote = () => {
    if (!midiData.playing) return
    const item = state.times[midiData.index]
    // 播放到最有一个音符,结束
    if (!item){
        onEnded()
        return
    }
    midiData.index++
    const duration = item.endtime - item.time
    midiData.iframeRef?.contentWindow?.playNote(item.realKey, duration)
    // gotoNext(item)
    timer = setTimeout(() => {
        playNote()
    }, duration / midiData.rate * 1000)
}
/** 停止播放 */
const stopPlay = () => {
    midiData.playing = false
}
/** 初始化 */
export const hanldeInitMidiData = (iframeRef: HTMLIFrameElement) => {
    midiData.iframeRef = iframeRef
}
/** 切换播放 */
export const handleTogglePlayMidi = (type: "play" | "paused") => {
    if (type === 'play'){
        midiData.playing = true
        playNote()
        onPlay()
    } else {
        stopPlay()
    }
}
/** 设置倍数播放 */
export const hanldeSetMidiPlaybackRate = (rate: number) => {
    midiData.rate = rate
}
/** 获取播放时间 */
export const getMidiCurrentTime = () => {
    let index = midiData.index - 1
    index = index < 0 ? 0 : index
    return state.times[index].time
}
/** 获取总播放时间 */
export const getMidiDuration = () => {
    return state.times[state.times.length - 1].endtime
}
/** 设置播放时间 */
export const setMidiCurrentTime = (index: number) => {
    clearTimeout(timer)
    midiData.index = index
    playNote()
}

export default defineComponent({
    name: 'midiPlayer',
    setup(){
        return () => <div style={{display: 'none'}}></div>
    }
})