来自 howler js 的循环嚎叫不会响应暂停命令

Question

我遇到一个问题，即使用 Howler.js 的单个播放命令不会在我的 React/Next.js 应用程序中暂停/停止。我尝试调试这个问题，但我似乎无法弄清楚为什么会发生这种情况。

这是显示相同内容的代码片段：

import {howl,howler} from 'howler'export default function Home() {
let h = new Howl({src:"B.m4a", loop:true})
h.play()
return(
    <div>
        <button onClick={()=>{
            h.seek(0)}} >do</button>
    </div>
)

尽管我尝试阻止代码中的循环嚎叫，但我注意到了意外的行为。具体来说，当我执行 h.seek(0) 时，我意识到该曲目播放了两次。在寻找起点时，一条轨迹持续存在，而另一条轨迹重新开始。这表明声音播放了两次。奇怪的是，这是有道理的，因为当我使用 h.stop() 时，嚎叫的音量和保真度似乎受到了影响——看起来更低，但有所改善。

我正在努力找出此问题的根本原因。对此的任何帮助将不胜感激。

Answer 1

我在手动安装 Next.js 而不是在新系统上使用

package.json

文件后遇到了问题。这无意中将我的 Next.js 版本更新到了 14.1，默认情况下启用了 React 的严格模式。此更改导致我的应用程序中的某些功能运行了两次。

为了解决这个问题，我找到了两种方法：

1. 推荐方法：我可以解决应用程序中导致函数多次执行的根本问题。这涉及检查我的代码以确保与严格模式的兼容性并纠正任何逻辑错误。

2. 快速解决方法：如果您需要更快的解决方案，您可以在 Next.js 配置中禁用 React 的严格模式。我通过修改我的

   next.config.js

   文件来做到这一点：

   module.exports = {
     reactStrictMode: false,
   }