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

快来打我* 2024-04-06 13:53 86阅读 0赞

[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86781841  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86781841  
目录  
实验报告 1

1.  【实验工具】 1
2.  【运行方法】 1
3.  【文件说明】 1
4.  【使用说明】 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.主页有两个链接，点击分别进入喜欢的歌和不喜欢的歌两个页面，这一过程中服务端向前端传递了存放歌曲文件夹的地址，以及遍历文件夹获得的歌曲名

![在这里插入图片描述][d88ac312b99248a3a8d64a9a3ec63ed6.png_pic_center]  
![在这里插入图片描述][864bf645c46d47e586c8783d747ccf33.png_pic_center]  
![在这里插入图片描述][68f55bf155cc478ebb8dbaee207923ab.png_pic_center]  
![在这里插入图片描述][fa74f527747a4852ac2b413f6e3141b2.png_pic_center]  
![在这里插入图片描述][bbd1d4752c7b40058fad7ba66cc3738b.png_pic_center]  
![在这里插入图片描述][c8fbb53c90064d438d523dc3a61788b1.png_pic_center]  
![在这里插入图片描述][beef1af286cb4f04b535110454aed7f7.png_pic_center]  
![在这里插入图片描述][2ab9333044a543d4a11d0c77603de803.png_pic_center]  
![在这里插入图片描述][917a1c3deaa94576b1f28f10fca6c286.png_pic_center]  
![在这里插入图片描述][48df6534ca9a4aca8b02889bef943e40.png_pic_center]  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86781841  
[资源下载地址][Link 1]：https://download.csdn.net/download/sheziqiong/86781841

[Link 1]: https://download.csdn.net/download/sheziqiong/86781841
[d88ac312b99248a3a8d64a9a3ec63ed6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cf1415e542444455960e179c158a814d.png
[864bf645c46d47e586c8783d747ccf33.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/045e15c5fa804d07b34775e940c0378f.png
[68f55bf155cc478ebb8dbaee207923ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ddd757a4321e4bebabee91ed2394ccfa.png
[fa74f527747a4852ac2b413f6e3141b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/069d161c84d047f9863256bcb037ef63.png
[bbd1d4752c7b40058fad7ba66cc3738b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/08175969b1744a85a2cbb7fa013deca6.png
[c8fbb53c90064d438d523dc3a61788b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fd313af6e8a74c98a51b185c1557ca45.png
[beef1af286cb4f04b535110454aed7f7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f3ff993d477b44a28f8a34d87015282f.png
[2ab9333044a543d4a11d0c77603de803.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/929ec35a9aa943889990f73fc7b5010a.png
[917a1c3deaa94576b1f28f10fca6c286.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/48ff8d8d89e84dfdabaf185d5aa32f5a.png
[48df6534ca9a4aca8b02889bef943e40.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f9c48a7f6a87424d91e47831f51025e2.png