基于html和Node.js的网页音乐播放器设计

资源下载地址：/download/sheziqiong/86781841

资源下载地址：/download/sheziqiong/86781841

目录

实验报告 1

【实验工具】 1【运行方法】 1【文件说明】 1【使用说明】 2

没有生成目录时的页面 3

生成目录后，自动播放歌曲 4

显示状态的歌词与目录 5

隐藏状态的歌词与目录 6

5.【实现方式】 7

1.目录生成： 7

2.切换歌曲 7

3.获取歌词 7

4.单曲循环播放歌曲 8

5.列表顺序播放歌曲 8

6.【心得体会】 8

实验报告

1.【实验工具】

实验平台：Node.js及其Web应用框架Express

html模板引擎：Jade

开发工具：Webstorm

2.【运行方法】

1.安装node.js后，在命令行窗口cd到bin文件夹，运行www文件

2在浏览器输出localhost:3000进入主页

3.【文件说明】

Node_module文件夹中是程序中用到的node.js的模块；public文件夹的images放了背景图，javascripts存放是func.js和jquery函数库，resource中放了媒体资源文件，stylesheets中是css文件，本文转载自http://www.biyezuopin.vip/onews.asp?id=14805 routes文件夹用来存放路由监听的代码相关文件，views中是模板引擎.jade文件。

这里resource中只放了少量资源文件进行测试。

4.【使用说明】

1.主页有两个链接，点击分别进入喜欢的歌和不喜欢的歌两个页面，这一过程中服务端向前端传递了存放歌曲文件夹的地址，以及遍历文件夹获得的歌曲名

var express = require('express');var path = require('path');var router = express.Router();/* GET home page. */router.get('/', function(req, res, next) {//用于进入主页res.render('index.jade', {title: '音乐播放器' });//渲染页面并传递参数});router.get('/likes',function(req,res){readDirSync(root1);res.render('likes.jade',{title:"喜欢的歌",catalog:titles,getPrefix:root1});//返回信息});router.get('/dislikes',function(req,res){readDirSync(root2);res.render('dislikes.jade',{title:"不喜欢的歌",catalog:titles,getPrefix:root2});//返回信息});var fs = require('fs');var path=require("path");var root1 = "../public/resource/likes";//当前文件夹var root2="../public/resource/dislikes";//当前文件夹var titles=null;function readDirSync(path){var cnt=0;titles=null;var pa = fs.readdirSync(path);pa.forEach(function(ele,index){var info = fs.statSync(path+"/"+ele);if(getdir(ele)=="mp3"){//只获取后缀为mp3的文件//console.log("file: "+ele); //ele即文件全名if(cnt++==0)titles=ele+' ';else {titles = titles + ele + ' ';//titles是一个字符串，格式如001.mp3 002.mp3，并发送给likes/dislikes页面}}});}function getdir(url){var arr = url.split('.');var len = arr.length;return arr[len-1];}module.exports = router;

资源下载地址：/download/sheziqiong/86781841

资源下载地址：/download/sheziqiong/86781841