React.js使用useSound设置页面加载时固定音频音量的问题

你的代码存在两个核心问题，导致音量配置不生效：

1. 多余的<audio>标签
   useSound库会自行创建并管理音频实例，你手动添加的<audio>标签相当于生成了另一个独立的音频对象，这个对象不受useSound的volume配置控制，默认音量为最大，所以你听到的是这个原生标签播放的音频，而非useSound实例的音频。

2. 自动播放逻辑错误
   原生<audio>的onload事件不是正确的加载触发时机（正确的应该是onLoadedData），而且你完全不需要依赖这个标签来触发播放，应该用React的useEffect钩子在组件挂载时调用play函数。

修正后的代码 #

import React, { useEffect } from 'react';
import useSound from 'use-sound';
import music from '../audio/cny music.mp3';

const Audio = () => {
  const [play] = useSound(music, { volume: 0.2 });

  // 组件挂载完成后自动播放音频
  useEffect(() => {
    play();
  }, [play]);

  // 不需要返回<audio>标签，useSound会处理音频实例
  return null;
};

export default Audio;

额外注意事项 #

• 浏览器自动播放限制：现代浏览器大多会阻止无用户交互的自动音频播放，如果遇到播放失败的情况，你可以添加一个用户触发的按钮来初始化播放，或者调整配置先静音加载：

  const [play, { sound }] = useSound(music, { 
    volume: 0.2,
    muted: true // 先静音加载，后续可通过用户交互取消静音
  });
  

• 库版本问题：如果仍有音量异常，尝试更新useSound到最新版本，旧版本可能存在配置兼容问题。

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