nodejs读取本地mp3和mp4等媒体文件并播放的案例

这里是针对“nodejs读取本地mp3和mp4等媒体文件并播放的案例”的完整攻略。

前置知识

• Node.js基础知识（如模块导入、文件读写等）
• HTML、CSS、JavaScript基础知识
• 浏览器的媒体播放控制API（如HTML5的audio和video标签）

实现步骤

1. 安装必要依赖

需要使用到`express`和`fs`模块，其中`express`用于启动本地服务，`fs`用于读取本地文件，可通过npm安装：

    $ npm install express
    $ npm install fs

1. 启动服务器并响应媒体文件

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

app.get('/media/:fileName', (req, res) => {
  const fileName = req.params.fileName;
  const filePath = `./media/${fileName}`;

  const stat = fs.statSync(filePath);

  res.writeHead(200, {
    'Content-Type': 'audio/mpeg',
    'Content-Length': stat.size
  });

  const readStream = fs.createReadStream(filePath);
  //将读取到的文件流通过管道写入响应
  readStream.pipe(res);
});

const port = 8080;
app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

解释一下上面的代码：

• 我们首先通过express()函数创建一个express实例。
• 使用app.get()方法来在服务端建立请求的响应逻辑，其中/:fileName表示该路由参数可以取任意值。
• 通过req.params.fileName获取路由参数，即媒体文件名。
• 组装出本地媒体文件的读取路径。
• 获取媒体文件的大小和类型，然后通过res.writeHead()设置响应头信息。
• 通过fs.createReadStream()创建读取流对象。
• 构建读取流和响应流的管道，使得读取流直接写入响应流，即实现了将读取的文件数据发送给客户端。

在以上代码中，/media/:fileName是请求的路径，这里我们假设本地的存储路径为./media/，所以可以通过以下地址访问本地存储的媒体文件：

http://localhost:8080/media/test.mp3

1. 前端播放控制

<audio controls src="http://localhost:8080/media/test.mp3"></audio>

解释一下上面的代码：

• audio标签是HTML5标准提供的音频播放控制标签，src属性指定媒体文件的路径。

• controls属性表示显示音频控制栏。

• 添加视频播放示例

本文前面的示例是基于音频媒体文件，如果需要使用视频媒体文件，只需要稍做修改即可：

//修改上面服务器代码中的响应头信息即可：
// const stat = fs.statSync(filePath);
res.writeHead(200, {
  'Content-Type': 'video/mp4',
  'Content-Length': stat.size
});
//读取视频媒体文件:
// const readStream = fs.createReadStream(filePath);

此外，在前端播放控制的<audio>标签改为<video>标签即可。

总结

以上就是使用Node.js读取本地mp3和mp4等媒体文件并播放的完整攻略。通过搭建一个本地服务器，实现了读取本地文件并响应给客户端，客户端通过HTML5标准提供的音视频控制标签实现了对媒体文件的远程访问和播放。在实践中，也可以利用这种方式来搭建音视频服务器，能够方便地进行相应的音视频服务开发。