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

文章目录

一、前言
二、主要功能
三、效果图
四、主要介绍
- 1、关于原创/来源
- 2、关于JS原生版
- 3、关于Layui+jQuery版
五、结语

一、前言

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

二、主要功能

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

三、效果图

四、主要介绍

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

1、关于原创/来源

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

源码资源 https://www.jq22.com/jquery-info22811
在线预览 https://www.jq22.com/yanshi22811

2、关于JS原生版

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

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

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

五、结语

资源下载： https://download.csdn.net/download/qq_26599807/86815493
在线预览： https://www.jq22.com/jquery-info24464

HTML5 可视化音乐播放器（附源码）相关推荐

【博主推荐】html好看的音乐播放器(附源码)
html好看的音乐播放器文章目录 1.主界面列表效果 2.主界面详情效果 3.背景风格1-背景色轮动 4.背景风格2-图片轮动 5.MP3免费下载 5.1 MyFreeMP3 5.2.铜钟音乐源码 ...
依米花音乐播放器php源码下载
仿依米花音乐播放器是一款简约的HTML悬浮音乐播放器,免费分享和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的.这款依米花音乐播放器php源码支持网易云/QQ音乐,可搭建类是与 ...
依米花音乐播放器php源码
简介: 和之前分享的绚丽彩虹在线音乐播放器生成源码差不多,功能界面都是大同小异的. 这款依米花音乐播放器php源码支持云/QQ音乐,可搭建类是与播放器功能的平台. 源码安装方法: 环境:php5.6或 ...
几款最主流的音乐播放器应用源码-android源码
影音播放优雅音乐播放器应用源码这是一款不错的音乐播放器应用源码案例,优雅音乐播放器应用源码,该应用的界面有点类似小米音乐播放器,应用的整天布局还没有那人气:3328运行环境:/android/i ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
最新依米花H5音乐播放器系统源码+Thinkphp内核
正文: 最新依米花H5音乐播放器系统源码+Thinkphp内核,源码0加密,如果无法发送邮箱和短信啥的,就是你没配置好,自己去检查. 安装环境: 国内外服务器都可以用主机无法运行需求环境 php7 ...
自编Win8风格Android音乐播放器应用源码（单机版）
用闲暇的两天时间,研究编写了一个类Win8风格的android音乐播放器,实现了大部分基本功能.下面看具体描述: 基本实现功能: 注意事项:Android系统版本须在2.2以上,保证手机安装有SD卡( ...
从零开始撸音乐播放器（源码可下载）
演示视频哈哈,自己是真的弱.被生活狠狠打脸了. Java课设要搞音乐播放器.然而老师只讲了输入输出啥的,其他自学. 从零开始撸代码. 1 .从sound,到AppletPlayer又到Player. ...
用Python制作一个相册播放器(附源码)
对于相册播放器,大家应该都不陌生(用于浏览多张图片的一个应用). 当然还有视频.音乐播放器,同样是用来播放多个视频.音乐文件的. 在Win10系统下,用[照片]这个应用打开一张图片,就可以浏览该图片所 ...