zyt/TUICallKit-Vue3/training/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 不会再卡冷启动
     * 注意:iOS 上 volume = 0 不一定真正解码,所以用 0.01 极小音量
     */
    warmUp() {
        if (this.warmedUp) return
        if (this.list.length === 0) this.create()

        this.list.forEach((ctx) => {
            try {
                ctx.volume = 0.01
                ctx.play()
                setTimeout(() => {
                    try {
                        ctx.stop()
                        ctx.volume = 1
                    } catch (_) {}
                }, 60)
            } 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 {
            // iOS 上 seek(0) + play() 不一定能从头播放;stop() + play() 更稳
            ctx.stop()
            ctx.play()
        } catch (_) {
            try { ctx.play() } catch (__) {}
        }
    }

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

/* InnerAudio 兼容本地路径和网络 URL,这里默认走 CDN,跟 BgAudio 保持一致便于维护
   首次播放会下载 ~3KB,实测 100~300ms 完成,然后小程序会缓存,后续触发零延迟 */
const DEFAULT_CLICK_SRC =
    'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/uploads/file/20260526/20260526105128557ef8669.mp3'

export function useMetronome(options: MetronomeOptions = {}) {
    const {
        initialBpm = 80,
        bpmMin = 40,
        bpmMax = 240,
        clickSrc = DEFAULT_CLICK_SRC,
        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 nextDelay = Math.max(0, nextTickAt - Date.now())

        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 时调用，让用户进页面就完成预热）
     * 同时再次设置 setInnerAudioOption,防 App.vue 全局设置失效(iOS 静音键)
     */
    const preload = () => {
        // #ifdef MP-WEIXIN
        try {
            uni.setInnerAudioOption({
                obeyMuteSwitch: false,
                mixWithOther: true,
            })
        } catch (_) {}
        // #endif
        ensureAudio()
    }

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

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