基于NodeJS实现的网页音乐播放器

YOUandME

发布日期: 2021-01-09 11:11:56 浏览量: 409
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

1.实验工具

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

  • html模板引擎:Jade

  • 开发工具:Webstorm

2.运行方法

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

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

3.文件说明

Node_module文件夹中是程序中用到的node.js的模块;public文件夹的images放了背景图,javascripts存放是func.js和jquery函数库,resource中放了媒体资源文件,stylesheets中是css文件,routes文件夹用来存放路由监听的代码相关文件,views中是模板引擎.jade文件。

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

4.使用说明

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

进入页面,需要先点击“生成目录”,来生成目录,加载媒体资源文件,自动播放音乐。每一次点击“生成目录”按钮,都会重新加载目录并从头开始播放歌曲(但是没有刷新页面的情况下,即使资源文件夹下的歌曲发生变化,点击按钮获得的目录不变。)

没有生成目录时的页面

生成目录后,自动播放歌曲

点击“显示歌词”和“显示目录”控制歌词的显示,点击后按钮变为“隐藏歌词”和“隐藏目录”,可以控制歌词和目录的显示。通过操作鼠标滚轮可以滚动歌词与目录。编码是UTF-8的歌词文件才可以正常显示。

显示状态的歌词与目录

隐藏状态的歌词与目录

顺便测试了歌曲名称含有中文字符和日文字符的情况,发现运行正常。

计划通过点击歌名来切换歌曲,目前还没有实现。

点击“顺序播放”和“单曲循环”,控制歌曲播放模式(不选则当前歌曲播放完即停止)

点击“上一首”和“下一首”,切换歌曲。

5.实现方式

5.1 目录生成

在index.js文件中,提供了歌曲文件夹的相对路径(程序不支持当前文件夹下有子文件夹包含mp3文件的情况)

通过node.js的fs模块中的函数进行文件的读取。

服务器收到信号就执行readDirSync()函数,并返回响应信息。titles是存储了歌曲名的字符串。

在likes.jade中,接受由服务器传来的信息。

在func.js中,有以下三个函数控制目录信息。

通过一定的处理,将字符串信息分割成单独的歌曲名并显示到目录框中。

5.2 切换歌曲

用了全局变量SongNum来对歌曲进行编号并与歌曲信息一一对应,切换歌曲的时候通过改变歌曲编号改变歌曲的媒体资源地址。并更新img和audio元素的属性值。

5.3 获取歌词

调用了函数库jquery.js的函数。

5.4 单曲循环播放歌曲

改变了audio标签的loop属性值。

5.5 列表顺序播放歌曲

去除了audio标签的loop属性,通过每秒执行一次的周期性函数来检测当前歌曲是否已经播放完毕,如果播放完毕,则执行playNextSong()函数播放下一首歌。

6.总结

通过这个实验,对html5、css、node.js、javascript有了一定的学习 ,结合了不同类型的知识点,对网页的组成有了进一步的了解。

在实验过程中,css、html5的参考手册和一些教程给了我很大的帮助,让我认识到网络资源的强大性。

歌曲播放的基本功能已经能够实现,但是界面还可以再美观一点,希望以后有时间能改善。

上传的附件 cloud_download 基于NodeJS实现的网页音乐播放器.7z ( 61.46mb, 1次下载 )
error_outline 下载需要12点积分

发送私信

与其临渊羡鱼,不如退而结网

6
文章数
7
评论数
最近文章
eject