zyt/TUICallKit-Vue3/hooks/useMetronome.ts

import { ref, computed, onUnmounted } from 'vue'

export interface MetronomeOptions {
    initialBpm?: number
    bpmMin?: number
    bpmMax?: number
    clickSrc?: string
    accentSrc?: string
    accentEvery?: number
    poolSize?: number
    onBeat?: (beatIndex: number, isAccent: boolean) => void
}

/**
 * 音频实例池：每个 click 用一个独立 InnerAudioContext，循环复用。
 * 解决两个问题：
 *  1. seek+play 模式在某些设备上首拍冷启动延迟（100-300ms）
 *  2. BPM 偏快时上一拍音频还没播完，下一拍 play 会被阻塞或丢失
 */
class AudioPool {
    private list: UniApp.InnerAudioContext[] = []
    private cursor = 0
    private warmedUp = false

    constructor(
        private src: string,
        private size: number,
    ) {}

    private create() {
        for (let i = 0; i < this.size; i++) {
            const ctx = uni.createInnerAudioContext()
            ctx.src = this.src
            ctx.obeyMuteSwitch = false
            ctx.autoplay = false
            this.list.push(ctx)
        }
    }

    /**
     * 预热：静音播放一次每个实例，让音频解码完成
     * 这样后续 play() 时就是热启动，没有冷启动延迟
     */
    warmUp() {
        if (this.warmedUp) return
        if (this.list.length === 0) this.create()

        this.list.forEach((ctx) => {
            const originalVolume = ctx.volume
            ctx.volume = 0
            try {
                ctx.play()
                setTimeout(() => {
                    try {
                        ctx.stop()
                        ctx.volume = originalVolume === 0 ? 1 : originalVolume
                    } catch (_) {}
                }, 80)
            } catch (_) {}
        })
        this.warmedUp = true
    }

    play() {
        if (this.list.length === 0) {
            this.create()
            this.warmUp()
        }
        const ctx = this.list[this.cursor]
        this.cursor = (this.cursor + 1) % this.list.length
        try {
            ctx.seek(0)
            ctx.play()
        } catch (_) {
            ctx.play()
        }
    }

    destroy() {
        this.list.forEach((ctx) => {
            try {
                ctx.destroy?.()
            } catch (_) {}
        })
        this.list = []
        this.warmedUp = false
    }
}

export function useMetronome(options: MetronomeOptions = {}) {
    const {
        initialBpm = 80,
        bpmMin = 40,
        bpmMax = 240,
        clickSrc = '/static/training/audio/click.mp3',
        accentSrc,
        poolSize = 4,
        onBeat,
    } = options

    const bpm = ref<number>(initialBpm)
    const isPlaying = ref<boolean>(false)
    const beatIndex = ref<number>(0)
    const isAccent = ref<boolean>(false)
    const accentEveryRef = ref<number>(options.accentEvery ?? 4)

    const intervalMs = computed(() => 60000 / bpm.value)

    let clickPool: AudioPool | null = null
    let accentPool: AudioPool | null = null
    let timer: ReturnType<typeof setTimeout> | null = null
    let nextTickAt = 0

    const ensureAudio = () => {
        if (!clickPool) {
            clickPool = new AudioPool(clickSrc, poolSize)
            clickPool.warmUp()
        }
        if (accentSrc && !accentPool) {
            accentPool = new AudioPool(accentSrc, Math.max(2, Math.ceil(poolSize / 2)))
            accentPool.warmUp()
        }
    }

    const playSound = (accent: boolean) => {
        if (accent && accentPool) {
            accentPool.play()
        } else if (clickPool) {
            clickPool.play()
        }
    }

    const tick = () => {
        if (!isPlaying.value) return

        const every = Math.max(1, accentEveryRef.value)
        const accent = beatIndex.value % every === 0
        isAccent.value = accent

        playSound(accent)
        onBeat?.(beatIndex.value, accent)
        beatIndex.value++

        nextTickAt += intervalMs.value
        const drift = Date.now() - nextTickAt
        const nextDelay = Math.max(0, intervalMs.value - drift)

        timer = setTimeout(tick, nextDelay)
    }

    const start = () => {
        if (isPlaying.value) return
        ensureAudio()
        isPlaying.value = true
        beatIndex.value = 0
        nextTickAt = Date.now()
        tick()
    }

    const stop = () => {
        isPlaying.value = false
        if (timer) {
            clearTimeout(timer)
            timer = null
        }
    }

    const setBpm = (val: number) => {
        bpm.value = Math.max(bpmMin, Math.min(bpmMax, Math.round(val)))
    }

    const setAccentEvery = (n: number) => {
        accentEveryRef.value = Math.max(1, Math.min(16, Math.round(n)))
        beatIndex.value = 0
    }

    /**
     * 主动预加载（推荐在页面 onShow 时调用，让用户进页面就完成预热）
     */
    const preload = () => {
        ensureAudio()
    }

    onUnmounted(() => {
        stop()
        clickPool?.destroy()
        accentPool?.destroy()
        clickPool = null
        accentPool = null
    })

    return {
        bpm,
        isPlaying,
        beatIndex,
        isAccent,
        intervalMs,
        accentEvery: accentEveryRef,
        start,
        stop,
        setBpm,
        setAccentEvery,
        preload,
    }
}