Node.js搭建本地服务后HTML无法加载媒体文件的问题咨询

你的问题核心有两个：一是当前的Node.js服务器只返回了index.html，完全没处理静态资源（比如你的MP3文件）的请求；二是HTML里用了本地绝对路径，在HTTP服务模式下，浏览器根本没法直接访问本地文件系统的资源。下面一步步帮你解决：

1. 调整文件结构与资源路径 #

先把媒体文件挪到项目目录内，建议新建一个assets文件夹专门存静态资源，整理后的项目结构如下：

你的项目文件夹/
├─ server.js （你的Node.js启动文件）
├─ index.html
└─ assets/
   └─ Whistle.mp3

然后修改HTML里的音频路径为相对路径，这样浏览器会通过服务器请求这个资源，而不是直接读取本地文件：

<audio id="Whistle" src="./assets/Whistle.mp3" preload="auto"></audio>

2. 修改Node.js服务器代码，支持静态资源请求 #

你原来的服务器不管请求什么路径都返回index.html，导致浏览器请求MP3时拿到的还是HTML，自然没法播放。我们需要让服务器根据请求路径读取对应文件，并返回正确的内容类型：

var http = require('http');
var fs = require('fs');
var path = require('path');

http.createServer(function(request, response) {
  // 处理根路径请求，默认返回index.html
  let filePath = '.' + request.url;
  if (filePath === './') {
    filePath = './index.html';
  }

  // 根据文件扩展名设置正确的Content-Type，浏览器才能识别资源类型
  const extname = String(path.extname(filePath)).toLowerCase();
  const contentTypeMap = {
    '.html': 'text/html',
    '.js': 'text/javascript',
    '.css': 'text/css',
    '.mp3': 'audio/mpeg',
    '.png': 'image/png',
    '.jpg': 'image/jpeg'
  };
  const contentType = contentTypeMap[extname] || 'application/octet-stream';

  // 读取并返回目标文件
  fs.readFile(filePath, function(error, content) {
    if (error) {
      if (error.code === 'ENOENT') {
        // 文件不存在时返回404提示
        response.writeHead(404, { 'Content-Type': 'text/html' });
        response.end('<h1>404 资源不存在</h1>', 'utf-8');
      } else {
        // 服务器内部错误提示
        response.writeHead(500);
        response.end('服务器错误: ' + error.code);
      }
    } else {
      response.writeHead(200, { 'Content-Type': contentType });
      response.end(content, 'utf-8');
    }
  });
}).listen(8000);

console.log('服务器运行在 http://localhost:8000/');

3. （可选）用Express框架简化开发 #

如果不想自己写繁琐的静态资源处理逻辑，用Express框架会高效很多。首先安装Express：

npm install express

然后替换server.js为以下代码：

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

// 让Express自动托管项目目录下的所有静态资源
app.use(express.static(path.join(__dirname, '.')));

// 根路径返回index.html
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(8000, () => {
  console.log('服务器运行在 http://localhost:8000/');
});

修改完成后重启Node.js服务器，访问http://localhost:8000就能正常加载并播放媒体文件了。

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