基于React+Vite开发JavaScript 30 Day1项目时音频资源404问题求助

方案一：使用src/assets目录存放音频文件 #

Vite对src/assets下的资源有特定处理逻辑，直接手写相对路径会因组件层级差异导致路径错误，推荐用Vite官方提供的new URL(..., import.meta.url)方式获取正确路径。

修改步骤： #

1. 更新Key组件路径处理

import classes from "./Key.module.css"
import Sound from "../Audio/Sound";

// 动态生成音频资源的正确路径
const getSoundSrc = (soundName) => {
  return new URL(`../assets/Sounds/${soundName}.wav`, import.meta.url).href;
};

const Key = props => {
    const src = getSoundSrc(props.soundName);
    return (
    <div data-key={props.dataKey} className={classes.key}>
        <kbd>{props.kbdName}</kbd>
        <span className={classes.sound}>{props.soundName}</span>
        <Sound data-key={props.dataKey} src={src}/>
    </div>
    );
}

export default Key;

2. 修正App.jsx中的playSound函数

function playSound(keyCode) {
  let soundName = '';
  switch (keyCode) {
    case 65: soundName = 'clap'; break;
    case 83: soundName = 'hihat'; break;
    case 68: soundName = 'kick'; break;
    case 70: soundName = 'openhat'; break;
    case 71: soundName = 'boom'; break;
    case 72: soundName = 'ride'; break;
    case 74: soundName = 'snare'; break;
    case 75: soundName = 'tom'; break;
    case 76: soundName = 'tink'; break;
    default: return;
  }
  // 替换原有路径拼接逻辑
  const soundUrl = new URL(`./assets/Sounds/${soundName}.wav`, import.meta.url).href;
  const audio = new Audio(soundUrl);
  audio.currentTime = 0;
  audio.play();
}

方案二：使用public目录存放音频文件 #

若选择将音频放在public目录，需确保文件结构为public/Sounds/xxx.wav，此时可直接用根目录开头的绝对路径访问。

修改步骤： #

1. 确认文件结构
   将所有wav音频文件放入项目根目录的public/Sounds文件夹（无此文件夹则新建）。

2. 更新Key组件的src路径

import classes from "./Key.module.css"
import Sound from "../Audio/Sound";

const Key = props => {
    const src = `/Sounds/${props.soundName}.wav`;
    return (
    <div data-key={props.dataKey} className={classes.key}>
        <kbd>{props.kbdName}</kbd>
        <span className={classes.sound}>{props.soundName}</span>
        <Sound data-key={props.dataKey} src={src}/>
    </div>
    );
}

export default Key;

3. 修正App.jsx中的soundPath

// 替换原有soundPath定义
const soundPath = "/Sounds";

function playSound(keyCode) {
  let soundName = '';
  switch (keyCode) {
    // 原有case逻辑不变
  }
  const audio = new Audio(`${soundPath}/${soundName}.wav`);
  audio.currentTime = 0;
  audio.play();
}

核心逻辑说明 #

• src/assets下的资源会被Vite编译处理，必须通过import或new URL方式获取路径，不能直接手写相对路径（组件层级不同会导致路径偏移）。
• public目录下的资源会被原样复制到打包产物的根目录，因此路径直接以/开头即可，无需考虑组件所在层级。

内容的提问来源于stack exchange，提问作者廖偉帆