HTML5 可视化音乐播放器(可拖拽上传)

所属分类:媒体-音频和视频

 7254  25  查看评论 (4)
分享到微信朋友圈
X
HTML5 可视化音乐播放器(可拖拽上传) ie兼容11

更新时间:2022-11-07 22:53:05

一、前言 

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

二、主要功能 

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

三、效果图 

t11.png

 四、主要介绍 

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

1、关于原创/来源 声明:无意冒犯,个人借鉴学习使用,如有冒犯请联系笔者,谢谢~ -

源码资源 

https://www.jq22.com/jquery-info22811](https://www.jq22.com/jquery-info22811

预览 

https://www.jq22.com/yanshi22811](https://www.jq22.com/yanshi22811

2、关于JS原生版 

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

3、关于Layui+jQuery版

JS 加载jQuery+layer支持,详情请查看layui官方使用文档 ...... 

window.myPlayer = new LayPlayer(); myPlayer.init({
    elem: '#player', autoPlay: true,
    //自动播放 showAdd : false,//是否打开的时候就显示添加窗口 playList : [] 
});

相信大家也注意到了,一个是 ``new Player()``,一个是 ``new LayPlayer()``,


相关插件-音频和视频

一款简单实用的视频播放插件

虽小却精悍,可自动播放,音乐,视频,支持HTML5
  音频和视频
 130828  440

jQuery自定audio音频

jQuery自定义audio音频样式,包括功能。
  音频和视频
 27824  321

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件
  音频和视频
 126493  445

jQuery视频播放插件jsModern(修改版)

一款简单的网页视频播放器插件jsModern,视频插件加了一个播放的按钮,视频播放时候就 隐藏。暂停就显示,
  音频和视频
 51063  420

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    风一样的童年 0
    2023/12/28 17:41:12
    还缺少歌词功能,不知道这个难不难 回复
    风一样的童年 0
    2023/12/28 17:40:33
    不过,功能确实很炫,我打算在此基础上二次开发了,功能棒棒哒 回复
    cm16 0
    2022/11/15 17:05:54
    牛啤啊👍
        对方正在输入...0
        2022/12/19 20:51:00
        感谢热爱,感兴趣可以收藏一下点点赞~[比心]
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复