在页面加载时使用 useEffect 钩子播放音频

Question

我正在构建一个致敬页面，我希望每次在页面加载时播放我的音频。到目前为止，它似乎只是偶尔播放，我不确定为什么。

var audio = new Audio("theme.mp3");
  const Playit = () => {
audio.play();
  }
  useEffect(() => Playit(), [Playit]);

我确定我没有正确使用 useEffect 挂钩，因为我试图让它像 componentDidMount 一样工作
我如何在页面加载时播放音频？
提前谢谢你。

Answer 1

var audio = new Audio("theme.mp3");
  const Playit = () => {
audio.play();
  }
  useEffect(() => Playit(), []);

Answer 2

在 Playit 函数中创建音频对象。还传递一个空数组作为 useEffect 挂钩中的第二个参数。

const Playit = () => {
    var audio = new Audio("theme.mp3");
    audio.play();
}
useEffect(() => {Playit()}, []);

Answer 3

抱歉我不能添加评论。

似乎运行 Playit() 时，theme.mp3 还没有准备好 play.Does 每次刷新页面时都无法播放

Answer 4

原来你无法在 chrome 上自动播放音频。 Chrome 阻止它。但是，您可以像这样使用音频控件

const [audio, SetAudio] = useState("");

  const Playit = () => {
    audio.play();
  };
  const Stopit = () => {
    
    audio.pause();
  };
  useEffect(() => {
    SetAudio(new Audio("theme.mp3"));
  }, []);

在页面加载时使用 useEffect 钩子播放音频

Playing audio with useEffect hook on page load

audio

reactjs

react-hooks