vsPlayAudio在线音乐播放插件.zip资源-CSDN文库

共5个文件

js：2个

css：2个

html：1个

版权申诉

实用代码

实用插件

178 浏览量 2023-09-27 22:18:41 上传评论收藏 60KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vsPlayAudio在线音乐播放插件.zip （5个子文件）

src

highlight.min.js 48KB

css

reset.css 1005B

androidstudio.min.css 577B

dist

vsPlayAudio.min.js 66KB

index.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vsPlayAudio在线音乐播放插件</title>  <link rel="stylesheet" href="src/css/reset.css">  <script src="dist/vsPlayAudio.min.js"></script>  <link rel="stylesheet" href="src/css/androidstudio.min.css"> <script src="src/js/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <style> #nav { text-align: center; } #nav ul li { display: inline-block; vertical-align: middle; padding: 0 15px 0 15px; border-left: 1px dotted #2bbc8a; line-height: 15px; } #nav ul li a { font-size: .8rem; color: #2bbc8a; } #nav ul .blog { border-left: 0px dotted #2bbc8a; } </style> </head> <body style="width: 500px;margin: 15px auto 0;color: #c9cacc;background-color: #1d1f21;"> <div style="text-align: center;font-size: 36px;font-weight: 700;margin: 50px 0 0 0;"> <span>vsPlayAudio v0.1.0</span> </div> <div style="text-align: center;font-size: 18px;margin: 50px 0 0 0;"> <p style="line-height: 45px;">小体积美观的音乐播放器</p> <p style="line-height: 45px;">mini music player</p> </div> <div class="clear" style="margin: 50px auto 0;width: 100px;height: 100px;border-radius: 50px;background: #fff;"> <div id="vsPlayAudio" style="margin: 12px auto 0;width: 75px;height: 75px;"></div> </div> <div style="text-align: left;margin: 50px 0 0 0;"> <h2 style="line-height: 45px;font-size: 24px;">接口</h2> <p style="line-height: 45px;"> <button onClick="player.play()">player.play()</button> <button onClick="player.pause()">player.pause()</button> <button onClick="player.next()">player.next()</button> <button onClick="alert('当前播放的音乐id：' + player.nowAudio)">player.nowAudio</button> <button onClick="alert('当前播放的音乐src：' + player.audio.src)">player.audio.src</button> </p> </div> <div style="text-align: left;margin: 50px 0 0 0;"> <h2 style="line-height: 45px;font-size: 24px;">简介</h2> <p style="line-height: 45px;font-size: 16px;">1.暂时只支持网易云音乐之后添加本地音频</p> <p style="line-height: 45px;font-size: 16px;">2.暂时不支持手机端（未测试）</p> <p style="line-height: 45px;font-size: 16px;">3.版本初期可能会有BUG</p> </div> <div style="text-align: left;margin: 50px 0 0 0;"> <h2 style="line-height: 45px;font-size: 24px;">使用方法</h2> <pre> <code><head> <script src="./dist/vsPlayAudio.min.js"></script> </head> <body> ... <div id="vsPlayAudio"></div> ... new vsPlayAudio({ element: "vsPlayAudio", autoPlay: false,//自动播放 music: { //必需项,音乐配置 type: 'cloud', //必需项,网易云方式指定填'cloud' source: 2778782119 //必需项,网易云音乐歌单id //登录网易云网页版,在网页地址中拿到 // ... playlist?id=317921676 }, random: false//随机播放 }); </body></code> </pre> </div> <script> var player = new vsPlayAudio({ music: { //必需项,音乐配置 type: 'cloud', //必需项,网易云方式指定填'cloud' source: 2778782119 //必需项,网易云音乐歌单id //登录网易云网页版,在网页地址中拿到 // ... playlist?id=317921676 }, autoPlay: true, random: true }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉