React/Next.js音频按钮默认静音及单次点击切换失效问题

1. 设置默认静音状态（显示静音图标） #

确保 muted 状态的初始值为 true，这样默认会渲染带 bi bi-volume-mute 类的静音图标：

const [muted, setMuted] = useState(true); // 初始静音

2. 修复单次点击切换静音的逻辑 #

现有代码的问题在于将静音状态与播放状态绑定，导致切换静音需要两次点击。正确的逻辑应该直接基于当前 muted 状态切换，并同步更新视频元素的 muted 属性，而非操作播放/暂停：

function handleAudio() {
  const newMutedState = !muted;
  setMuted(newMutedState);
  // 直接设置视频的静音属性，无需操作播放/暂停
  if (ref.current) {
    ref.current.muted = newMutedState;
  }
}

3. 保留现有JSX（无需修改） #

你的JSX条件渲染逻辑是正确的：当 muted 为 true 时显示静音图标，false 时显示音量图标，只要初始状态设为 true，默认就会显示 bi bi-volume-mute 图标。

完整修改后的代码示例 #

import { useState, useRef } from 'react';

function VideoPlayer() {
  const ref = useRef(null);
  const [muted, setMuted] = useState(true); // 默认静音

  function handleAudio() {
    const newMutedState = !muted;
    setMuted(newMutedState);
    if (ref.current) {
      ref.current.muted = newMutedState;
    }
  }

  return (
    <div>
      <video ref={ref} src="your-video-url.mp4" />
      <button onClick={handleAudio} className="customAudioPlayerButton">
        {!muted ? (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
            fill="currentColor"
            className="bi bi-volume-down"
            viewBox="0 0 16 16"
          >
            <path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
          </svg>
        ) : (
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
            fill="currentColor"
            className="bi bi-volume-mute"
            viewBox="0 0 16 16"
          >
            <path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
          </svg>
        )}
      </button>
    </div>
  );
}

export default VideoPlayer;

问题原因说明 #

• 默认图标不显示：原代码中 muted 初始值大概率为 false，导致默认渲染音量图标，改为 true 即可解决。
• 两次点击才生效：原逻辑将静音切换与播放/暂停操作绑定，点击时同时改变播放状态和静音状态，导致用户无法直接切换静音。修改后直接基于 muted 状态切换，同步更新视频的 muted 属性，实现单次点击切换。

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