1.在樹莓派上面安裝 mplayer
2.在樹莓派上面安裝 nodejs
3.安裝express
4.生成項目 webmusic
express -e webmusic
在 webmusic 文件夾通過命令 npm install 添加 所需的安裝包
5.添加代碼
添加views文件及文件music.ejs 內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1><%= title %></h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>編號</td>
<td>歌曲</td>
<td>操作</td>
</tr>
<tbody id="bg">
</tbody>
</table>
<input type="radio" class="loop" name="test" value=0 checked>全部循環
<input type="radio" class="loop" name="test" value=1 > 隨機播放
<input type="radio" class="loop" name="test" value=2 >單曲循環<br>
<script>
function shujv()
{
$.get("/music/list",
function(data,status){
var da=data.datas;
var htmlstr;//="<tr><td>"+da.length+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td></tr>";
//alert("test:"+da.length);
for(var i=0;i<da.length;i++)
{
var element=da[i];
var tmp;
htmlstr+="<tr><td>"+i+"</td><td>"+da[i]+"</td><td><input type='button' class='shanchu' value='play' code='"+i+"'></td></tr>"
}
$("#bg").html(htmlstr);
$(".shanchu").click(function()
{
//alert($(this).attr("code"));
var code=$(this).attr("code");
$.get("/music/play/"+code,
function(data,status){
//shujv();
});
});
});
}
$(function(){
shujv();
$(".loop").click(function()
{
//alert($(this).attr("value"));
var code=$(this).attr("value");
$.get("/music/loop/"+code,
function(data,status){
//shujv();
});
});
});
</script>
</body>
</html>
在routes添加lsfile.js文件代碼如下,實現遍歷文件夾文件
var fs = require("fs");
var tstpath = require("path");
var mp3list=[];
fs.readdir('/home/pi/Music', (err, files) => {
if (err)
throw err;
files.forEach(file => {
var filePath = tstpath.normalize('/home/pi/Music/' + file);
//console.log(filePath);
fs.stat(filePath, (err, stats) => {
if (stats.isFile()) {
//console.log(tstpath.extname(filePath));
if(tstpath.extname(filePath)=='.mp3')
{
console.log(filePath + ' is: ' + 'file '+ mp3list.length);
mp3list.push(filePath);
}
}
//if (stats.isDirectory()) console.log(filePath + ' is: ' + 'dir');
});
});
});
module.exports=mp3list;
在routes添加music.js文件代碼如下,實現遍歷文件夾文件
var express = require('express');var spawn=require('child_process').spawn;
var mp3list=require('./lsfile');
var router = express.Router();
var musicindex=0;
var musicloop=0; //0 loop 1 rnd 2 only one
var player=null;
function playmusic(str){
player= spawn('mplayer', [str]); //這個是賦值 還是引用
player.stdout.on('data', (data) => {
// console.log(`輸出：${data}`);
});
player.stderr.on('data', (data) => {
//console.log(`錯誤：${data}`);
});
player.on('close', (code) => {
//console.log(`子進程退出碼：${code}`);
if(code==0)
{
if(musicloop==0)
{
musicindex=(musicindex+1)%mp3list.length;
}
else if(musicloop==1)
{
musicindex=parseInt(Math.random()*mp3list.length);
}
playmusic(mp3list[musicindex]);
}
else
{
}
});
}
router.get('/',function(req, res, next) {
res.render("music",{title:"JQMusicPlayer"});
});
router.get('/list',function(req, res, next) {
//res.render("music",{});
res.json({datas:mp3list});
});
router.get('/play/:id',function(req, res, next) {
console.log("file:"+req.params.id);
if(player!=null)
{
player.kill('SIGHUP');
player=null; //這樣能釋放閉包數據嗎？ 能清除 它附帶生成的
console.log('kill process');
}
musicindex=req.params.id%mp3list.length;
playmusic(mp3list[musicindex]);
res.json({"pos":musicindex,"name":mp3list[musicindex]});
});
router.get('/loop/:mode',function(req, res, next) {
musicloop=req.params.mode;
res.json({"pos":musicindex,"name":mp3list[musicindex]});
});
module.exports={
router:router
};
修改項目目錄下的app.js文件,綠色的爲增加的代碼
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var music=require('./routes/music');
.......
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/music', music.router);
6.啓動網頁並訪問
npm start
訪問網頁 127.0.0.1:3000/music