音频未播放，因为控制台中的“不允许启动 AudioContext。必须在页面上的用户手势后恢复（或创建）它”

Question

我想在套接字事件上播放声音。有时会播放声音，有时则不会。其中存在一些不确定性！

下面是我正在使用的代码

import React, { useEffect, useState } from "react";
import { useSound } from "use-sound";
import notificationSound from "my_sound.mp3";
import { io } from "socket.io-client";


const Home = ({ children }) => {
  const [play] = useSound(notificationSound, { volume: 0.5 });
  const [playAudio, setPlayAudio] = useState(false);

  useEffect(() => {
    if (playAudio === true) {
      play();
      setPlayAudio(false);
    }
  }, [playAudio]);

useEffect(() => {
      const socket = io("http://localhost:8081", {
        auth: {
          token: localStorage.getItem("user_token"),
        },
      });
      socket.on('play-sound', (data) => {
        setPlayAudio(true);
        toast.success(`New Order ${data.order_id} Received!!`);
      });
}, []);
return (<div> Hello World </div>)
};

module.export = Home;

Answer 1

我认为这个问题的发生是因为

useSound

钩子的异步性质以及它如何与组件中的状态更新交互。当您将

useSound

设置为

playAudio

后尝试立即播放声音时，

true

挂钩可能未完全初始化。

您可以尝试向

useSound

挂钩添加回调，以确保声音在尝试播放之前已准备就绪。

此外，我认为您可以在卸载组件时处理套接字连接的清理。

我在下面添加示例代码。

import React, { useEffect, useState } from "react";
import { useSound } from "use-sound";
import notificationSound from "my_sound.mp3";
import { io } from "socket.io-client";

const Home = ({ children }) => {
  const [play, { stop }] = useSound(notificationSound, { volume: 0.5 });
  const [playAudio, setPlayAudio] = useState(false);

  useEffect(() => {
    if (playAudio) {
      play({ onend: () => setPlayAudio(false) });
    }
    return () => stop();
  }, [playAudio, play, stop]);

  const initializeSocket = () => {
    const socket = io("http://localhost:8081", {
      auth: {
        token: localStorage.getItem("user_token"),
      },
    });

    socket.on('play-sound', ({ order_id }) => {
      setPlayAudio(true);
      toast.success(`New Order ${order_id} Received!!`);
    });

    return () => socket.disconnect();
  };

  useEffect(initializeSocket, []);

  return <div>Hello World</div>;
};

export default Home;