如何在ReactJS组件中添加点击音效与新消息接收提示音

前置准备 #

• 提前准备音效文件，推荐使用mp3/ogg等兼容性好、体积小的格式，可放在项目public/audio目录下方便引用

方案1：原生Audio API实现（无额外依赖） #

这是最轻量的实现方式，不需要引入第三方库，可覆盖绝大多数场景需求。

封装通用音频播放Hook #

先写一个可复用的自定义Hook，新消息提示音和点击音效都可以共用：

import { useCallback, useRef, useEffect } from 'react';

const useAudio = (audioSrc) => {
  const audioRef = useRef(null);

  useEffect(() => {
    // 初始化音频实例并预加载
    audioRef.current = new Audio(audioSrc);
    audioRef.current.load();

    return () => {
      // 组件卸载时清理资源
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, [audioSrc]);

  const play = useCallback(() => {
    if (!audioRef.current) return;
    // 重置播放进度，保证多次触发时可重复播放
    audioRef.current.currentTime = 0;
    // 捕获播放异常（主要处理浏览器自动播放限制拦截）
    audioRef.current.play().catch(err => {
      console.warn('音频播放失败:', err);
    });
  }, []);

  return play;
};

export default useAudio;

场景1：收到新消息播放提示音 #

在你的聊天消息监听逻辑中调用Hook即可：

import { useEffect, useCallback } from 'react';
import useAudio from './hooks/useAudio';
// 替换为你自己的提示音文件路径
const NEW_MESSAGE_AUDIO = '/audio/new-message.mp3';

const ChatRoom = () => {
  const playNewMsgTip = useAudio(NEW_MESSAGE_AUDIO);
  // 新消息接收处理回调
  const handleReceiveNewMessage = useCallback((newMsg) => {
    // 其他新消息处理逻辑，比如更新消息列表
    playNewMsgTip();
  }, [playNewMsgTip]);

  useEffect(() => {
    // 替换为你自己的websocket/长连接监听逻辑
    const socket = getSocketInstance();
    socket.on('new_message', handleReceiveNewMessage);
    return () => {
      socket.off('new_message', handleReceiveNewMessage);
    };
  }, [handleReceiveNewMessage]);

  // 聊天窗口渲染逻辑
  return <div>聊天窗口</div>
};

场景2：组件点击播放音效 #

直接在组件的点击事件中调用播放方法即可：

import useAudio from './hooks/useAudio';
// 替换为你自己的点击音效文件路径
const CLICK_AUDIO = '/audio/click.mp3';

const AudioButton = () => {
  const playClickSound = useAudio(CLICK_AUDIO);

  const handleClick = () => {
    playClickSound();
    // 其他点击业务逻辑
    console.log('按钮被点击');
  };

  return <button onClick={handleClick}>带点击音效的按钮</button>
};

注意事项 #

• 浏览器存在自动播放策略限制：非用户交互触发的音频播放（比如页面刚加载自动播放、后台收到消息自动播放）可能被拦截，可引导用户在页面内完成一次点击交互（比如点击进入聊天室）后再初始化音频实例，即可绕过该限制。
• 如果需要音量控制、循环播放等功能，直接操作audio实例的对应属性即可，比如audioRef.current.volume = 0.5就是设置音量为50%。
• 若项目使用TypeScript，只需要给audioRef加上类型定义：const audioRef = useRef<HTMLAudioElement | null>(null);即可适配。

内容的提问来源于stack exchange，提问作者Agent47