JQ实现音乐插件并自动播放
这里分享我最近写出来的一个小东西,基于jq的音乐播放器,可以嵌套到网站
效果截图:
具体首页代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" /> <title></title> <link rel= "stylesheet" href= "css/player.css" > </head> <body> <div id= "QPlayer" > <div id= "pContent" > <div id= "player" > <span class = "cover" ></span> <div class = "ctrl" > <div class = "musicTag marquee" > <strong>Title</strong> <span> - </span> <span class = "artist" >Artist</span> </div> <div class = "progress" > <div class = "timer left" >0:00</div> <div class = "contr" > <div class = "rewind icon" ></div> <div class = "playback icon" id= "play-btn" ></div> <div class = "fastforward icon" ></div> </div> <div class = "right" > <div class = "liebiao icon" ></div> </div> </div> </div> </div> <div class = "ssBtn" > <div class = "adf" ></div> </div> </div> <ol id= "playlist" ></ol> </div> <script src= "js/jquery.min.js" ></script> <script src= "js/jquery.marquee.min.js" ></script> <script> var playlist = [ {title: "万象霜天" ,artist: "三无MarBlue" ,mp3: "music/万象霜天.mp3" ,cover: "music/万象霜天.png" ,} ]; var isRotate = true ; var autoplay = true ; </script> <script src= "js/player.js" ></script> <script> function bgChange(){ var lis= $( '.lib' ); for ( var i=0; i<lis.length; i+=2) lis[i].style.background = 'rgba(246, 246, 246, 0.5)' ; } window.onload = bgChange; setTimeout(()=>{ $( "#play-btn" ).click() },2000) setTimeout(()=>{ $( "#play-btn" ).click() },4000) </script> </body> </html> |
整体下载:点击下载
下载后本地打开即可
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
分类:
demo分享介绍
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)