如何使用 Howler 库在 React 中播放音频加载？

Question

我试图弄清楚为什么在屏幕某处触发鼠标单击等事件之前，音频不会 运行 加载到网页上。音频播放，但我想在页面加载后立即播放音频。

import React, { useEffect } from "react";
import Muse from "./assets/music.mp3";
import { Howl, Howler } from "howler";

function Aud() {
  const sound = new Howl({
    src: Muse,
  });

  useEffect(() => {
    console.log("In useEffect");
    sound.play();
    Howler.volume(0.5);
  }, []);

  return <div></div>;
}

export default Aud;

useEffect 执行但由于某种原因没有播放声音。任何帮助将不胜感激。

Answer 1

这是 Chrome 最新版本的默认行为。用户必须先与页面交互，然后才能播放任何 video/audio。 如果您检查控制台，您可能会看到错误消息。您可能想尝试设置自动播放属性。