定制软件开发HTML5 可视化音乐播放器（附源码）

一、前言

定制软件开发最近某音乐播放器越来越迷，定制软件开发以前下载的本地音乐没定制软件开发有版权也不能播放了…
定制软件开发特在网上找了个音乐播放插件，但功能实在简陋，特在其基础上进行了改造，并对其扩展至版（兼容）。
感兴趣的可以去查看源代码，仅供个人学习使用~

二、主要功能

• 音频播放（及控制）
• 循环播放模式（列表循环、顺序播放、单曲循环、随机播放）
• 歌曲列表（播放指定歌曲）
• 添加歌曲（扩展layui，支持拖拽添加）

三、效果图

四、主要介绍

主要样式分为2种，JS原生版、layui+版。前者在原创基础上，修改了一些功能，但都是纯js实现的（真不容易）；后者在前者的基础上，实现了拖拽添加功能，样式更美观些。

1、关于原创/来源

声明：无意冒犯，个人借鉴学习使用，如有冒犯请联系笔者，谢谢~

• 源码资源
• 在线预览

2、关于JS原生版

<script src="./js/player.js" type="text/javascript"></script>......window.myPlayer = new Player();myPlayer.init({	elem : '#player',	autoPlay : true, //自动播放	showAdd : true,//是否打开的时候就显示添加窗口	playList : []});
1
2
3
4
5
6
7
8
9

3、关于Layui+jQuery版

<script src="//res.layuion.com/layui/v/2.7.6/layui.js" type="text/javascript"></script><script src="./js/player.js" type="text/javascript"></script><script src="./js/player.layui.js" type="text/javascript"></script>......// JS 加载jQuery+layer支持，详情请查看layui官方使用文档......window.myPlayer = new LayPlayer();myPlayer.init({	elem : '#player',	autoPlay : true, //自动播放	showAdd : false,//是否打开的时候就显示添加窗口	playList : []});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

相信大家也注意到了，一个是 new Player()，一个是 new LayPlayer()，但使用方法一样，因为扩展了，哈哈~

五、结语

• 资源下载：
• 在线预览：