Howler.js循环音频无法响应暂停/停止命令求助

• 重复创建Howl实例并触发播放：在React函数组件的顶层直接执行new Howl()和h.play()，组件每次渲染（包括初始渲染、后续任何触发重渲染的操作）都会重新运行这段代码，生成多个独立的Howl音频实例同时播放。这直接导致：

  • 调用h.stop()时仅停止了当前实例，其他实例仍在播放，所以出现音量降低（多实例叠加音量减少）但音质变好（单个实例播放效果）的现象；
  • 执行h.seek(0)时，当前实例重启，但其他实例持续播放，造成“播放两次”的错觉。

• 未正确管理音频实例的生命周期：没有利用React钩子控制实例的创建时机，也没有清理机制，导致音频实例泄漏，多个实例同时运行引发异常行为。

import { Howl } from 'howler'
import { useEffect, useRef } from 'react'

export default function Home() {
  // 用useRef保存Howl实例，避免每次渲染重新创建
  const howlRef = useRef(null)

  useEffect(() => {
    // 仅在组件挂载时创建实例并播放
    howlRef.current = new Howl({
      src: "B.m4a",
      loop: true
    })
    howlRef.current.play()

    // 组件卸载时清理音频实例，防止泄漏
    return () => {
      howlRef.current?.stop()
      howlRef.current?.unload()
    }
  }, []) // 空依赖数组确保逻辑仅执行一次

  return(
    <div>
      <button onClick={()=>{
        howlRef.current?.seek(0)
      }} >do</button>
      <button onClick={()=>{
        howlRef.current?.stop()
      }} >stop</button>
    </div>
  )
}

• 通过useRef存储Howl实例，保证组件渲染过程中实例不会被重复创建；
• 用useEffect包裹实例初始化和播放逻辑，空依赖数组确保仅在组件挂载时执行一次；
• 添加卸载清理函数，停止并卸载音频实例，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Matblanket