HTML5 可视化音乐播放器（附源码）

本文介绍: 最近某音乐播放器越来越迷，以前下载的本地音乐没有版权也不能播放了…特在网上找了个音乐播放插件，但功能实在简陋，特在其基础上进行了改造，并对其扩展至layui版（兼容）。感兴趣的可以去查看源代码，仅供个人学习使用~主要样式分为2种，JS原生版、layui+jQue ry版。前者在原创基础上，修改了一些功能，但都是纯js 实现的（真不容易）；后者在前者的基础上，实现了拖拽添加功能，样式更美观些。

文章 目录

一、前言

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

二、主要功能

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

三、效果图

在这里插入图片描述

四、主要介绍

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

1、关于原创/来源

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

2、关于JS原生版

&lt;script src="./js/player.js" type="text/javascript"&gt;&lt;/script&gt;
......
window.myPlayer = new Player();
myPlayer.init({
	elem : '#player',
	autoPlay : true, //自动播放
	showAdd : true,//是否打开的时候就显示添加窗口
	playList : []
});

在这里插入图片描述

3、关于Lay ui+jQue ry版

<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 : []
});