<!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>JS音乐在线播放插件vsPlayAudio</title>
<!--默认样式 可无视-->
<link rel="stylesheet" href="src/css/reset.css">
<!--核心js-->
<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>
</body>
</html>
原生JS音乐在线播放插件vsPlayAudio.zip
版权申诉
132 浏览量
2022-11-10
04:01:03
上传
评论
收藏 60KB ZIP 举报
原生JS音乐在线播放插件vsPlayAudio.zip （5个子文件） 
132687020966004745 
index.html 4KB dist 
vsPlayAudio.min.js 66KB src css reset.css 1005B androidstudio.min.css 577B js highlight.min.js 48KB资源评论
