HTML中FileSystem无法自动读取音频文件问题求助

核心问题：环境API混用 #

你代码里同时用了Node.js的fs模块（仅后端/桌面应用可用）和浏览器的Audio API，这是关键矛盾：

• 浏览器环境完全不支持fs模块，所以fs.readdirSync会直接报错，导致tones数组无法正确生成；手动指定路径能运行是因为Audio能识别网页可访问的静态资源路径，但fs无法在前端读取服务器/本地文件夹。
• 如果是Electron等桌面应用环境，路径解析规则和前端不同，也容易出现路径不匹配问题。

分场景解决方案 #

场景1：纯前端网页（浏览器环境） #

前端不能直接读取服务器/本地文件夹，换两种方式获取音频列表：

方式A：硬编码音频文件名

如果音符数量固定（A-G共7个），直接把文件名写在代码里：

const tones = ['A.mp3', 'B.mp3', 'C.mp3', 'D.mp3', 'E.mp3', 'F.mp3', 'G.mp3'];

function start() {
  const i = Math.floor(Math.random() * tones.length);
  const audio = new Audio(`./tones/${tones[i]}`);
  audio.play();
}

方式B：后端接口配合获取列表

如果需要动态读取文件夹，用Node.js写一个简单后端接口返回文件列表，前端通过请求获取：

后端代码（Node.js/Express）

const express = require('express');
const fs = require('fs');
const app = express();

// 暴露音频文件夹为静态资源
app.use('/tones', express.static('./tones/'));

// 接口返回音频文件列表
app.get('/api/get-tones', (req, res) => {
  const toneFiles = fs.readdirSync('./tones/').filter(f => f.endsWith('.mp3'));
  res.json(toneFiles);
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端代码

let toneList = [];

// 页面加载时先获取音频列表
async function initTones() {
  const res = await fetch('/api/get-tones');
  toneList = await res.json();
}

function start() {
  if (!toneList.length) return alert('音频列表未加载完成');
  const randomIndex = Math.floor(Math.random() * toneList.length);
  const audio = new Audio(`/tones/${toneList[randomIndex]}`);
  audio.play();
}

// 初始化
window.addEventListener('load', initTones);

场景2：Electron桌面应用 #

Electron允许渲染进程使用fs，但要注意路径解析和随机数生成位置：

const fs = require('fs');
const path = require('path');

// 用绝对路径确保读取正确（__dirname是当前渲染进程文件所在目录）
const toneDirPath = path.join(__dirname, './tones/');
const toneFiles = fs.readdirSync(toneDirPath).filter(f => f.endsWith('.mp3'));

function start() {
  // 每次调用都生成新的随机索引，避免一直用同一个文件
  const randomIndex = Math.floor(Math.random() * toneFiles.length);
  const audioPath = path.join(toneDirPath, toneFiles[randomIndex]);
  const audio = new Audio(audioPath);
  audio.play();
}

额外注意点 #

1. 路径大小写：Linux/macOS系统区分文件名大小写，建议统一文件名格式（比如全小写），或者过滤时忽略大小写：f.toLowerCase().endsWith('.mp3')
2. 随机数位置：把随机索引生成放在start函数内部，确保每次调用都能随机选择新文件，而不是只用初始化时的一次随机值。
3. 静态资源配置：部署时确保tones文件夹被配置为服务器可访问的静态资源目录，否则浏览器无法加载音频文件。

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