共计 1771 个字符,预计需要花费 5 分钟才能阅读完成。
成果实现
某些音乐网站会提供一些音乐外链,以供用户拜访,听或下载 music。不过可能明天这个外链还能用,今天就不能用了,“过期了”之类的。这篇文章记录了,应用 nodejs 框架 express,实现一个简略的“mp3 音乐资源服务器”性能。咱们先看一下效果图
浏览器 url 拜访到资源当前,Ctrl+ S 能够间接下载哦
效果图
有音乐资源返回音乐资源
没音乐资源返回文字提醒
代码实现
app.js 文件
// 引入 express 插件包并生成一个实例 app
const express = require('express')
const app = express()
// 应用 body-parser 中间件解析 post 申请主体
app.use(express.urlencoded({ extended: false}))
app.use(express.json())
const Router = require('./router') // 引入分模块治理的路由
// 路由分模块
app.use(Router)
// 在 10000 端口上启动后端服务
app.listen(10000, (req,res) => {console.log('后端服务端口地址为:http://localhost:10000');
})
router.js 文件
次要看这个代码
const express = require('express') // 引入 express
const route = express.Router() // 实例化一个路由对象
// 引入文件读取模块
const fs = require('fs')
// 动静路由传参形式,通过 params 获取动静参数
route.get('/musicSrc/:fileName', (req, res) => {// console.log('获取文件名参数', req.params.fileName);
// 拼接成残缺的文件名,这里假如对立应用 mp3 格局的音乐文件
let fileName = req.params.fileName // 破茧.mp3
try {
// 存储一份音乐的门路,这里咱们在 music 文件夹外面寄存音乐资源
let mp3Url = './music/' + fileName
// fs.statSync 判断目录文件是否存在,不存在就会抛出异样,所以须要 try catch 捕捉一下
let stat = fs.statSync(mp3Url)
// 设置申请头
res.writeHead(200, { // 有的话,就把对应的资源以流的模式返回去
'Content-Type': 'audio/mp3', // 类型为音频 mp3 格局
'Content-Length': stat.size, // 指定一下文件大小
"Accept-Ranges": "bytes" // 不加的话,前端 google 浏览器中音频无奈拖动
})
// 创立可读流
let readStream = fs.createReadStream(mp3Url)
// 将读取的后果以管道 pipe 流的形式返回给前端
readStream.pipe(res);
} catch (error) {
// 读取不到相应文件,就间接返回找不到即可
res.send('暂无此音乐数据')
}
})
module.exports = route // 裸露给 app.js 方便管理
目录结构图
次要看左侧的 music 文件夹
“Accept-Ranges”: “bytes” 简介
- 这句话的作用是:如果申请头中存在 Accept-Ranges,那么浏览器可能会尝试复原中断的下载,而不是从头再次开始。
- 对应的具体表现就是:audio 或 video 标签中,如果是在火狐浏览器中,不受影响,如果是在谷歌浏览器中,就会呈现无奈拖动的问题,就是想拖动进度条往后听或看,就会从新播放了。
- 如果再买一个阿里云或者腾讯云服务器,部署一下我的项目就可能通过 url 间接拜访这个音乐文件啦,将这种形式搭配一个音乐播放器,举荐 aplayer 插件,成果就有了。aplayer 应用能够看我之前的文章 https://segmentfault.com/a/11…
残缺成果能够去我的集体网站中的首页的左下角看一下。集体网站地址如下:http://ashuai.work/welcome
最初再附上,MDN 官网文档对于这个申请头的解释,传送门如下:https://developer.mozilla.org…
正文完