咆哮声卡在队列中

问题描述

我有一个 Howl，其中我在按钮点击时触发 play() 方法，但声音仍然没有播放。如果我在单击按钮时将 Howl 实例记录到控制台，我会看到播放事件在对象的 queue 属性中排队，并且 state 是 "loading" .

我尝试查看 this thread，但没有成功。我还将资源从 src 移到了 public，尝试了不同的文件格式、不同的格式优先级等。

这是我目前的代码：

import React from "react";
import { Howl } from "howler";

export default function Sounds() {
  const soundEffects = new Howl({
    src: ["effects.webm","effects.mp3"],sprite: {
      loop: [0,60.013492063492066],deepSounds: [62,266.4691383219955],screwdriver: [268,293.9140589569161],},});

  const handleLoopPlay = () => {
    console.log(soundEffects);
    soundEffects.play("loop");
  };

  return (
    <div>
      <button onClick={handleLoopPlay}>Play loop</button>
    </div>
  );
}

精灵看起来像这样：

{
  "resources": [
    "effects.webm","effects.mp3"
  ],"spritemap": {
    "loop": {
      "start": 0,"end": 60.013492063492066,"loop": false
    },"deepSounds": {
      "start": 62,"end": 266.4691383219955,"screwdriver": {
      "start": 268,"end": 293.9140589569161,"loop": false
    }
  }
}

和项目目录：

另外，我收到了 Chrome 的 AudioContext 警告，我不知道为什么，因为我确实在玩之前等待用户交互：

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）