效果实现

某些音乐网站会提供一些音乐外链,以供用户访问,听或下载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...

水冗水孚
1.1k 声望585 粉丝

每一个不曾起舞的日子,都是对生命的辜负