Aplayer.js音乐播放器的使用
aplater.js是一款可爱、漂亮的js音乐播放器,在项目里面只要添加一个jquery.js跟aplayer.min.js 跟aplayer.min.css就可以了。看一个简单的栗子:<link rel="stylesheet" href="~/scripts/aplayerjscs/aplayer.min.css">
<script src="~/scripts/jquery-3.3.1.js"></script>
<script src="~/scripts/aplayerjscs/aplayer.min.js"></script>
<div id="aplayer"></div>
<script type="text/javascript">
const ap = new aplayer({
container: document.getelementbyid('aplayer'),
fixed: false, //开启吸底模式
mimi: false, //开启迷你模式
autoplay: false, //音频自动播放
theme: '#b7daff', //主题色
loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
order: 'list', //音频循环顺序, 可选值: 'list', 'random'
preload: 'auto', //预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7, //默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
mutex: true, //互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
//customaudiotype: //自定义类型,详情
listfolded: false, //列表默认折叠
listmaxheight: 900, // 列表最大高度
storagename: 'aplayer-setting', //存储播放器设置的 localstorage key
lrctype: 1, //歌词文件形式1歌词直接复制进来,2 html形式,3数据库获取格式跟下面的一样
//音频信息, 应该是一个对象或对象数组
audio: [{
name: '全世界宣布爱你伴奏',//音乐名称
artist: '孙子涵',//歌手
url: '/attachfile/qsjxban.mp3',//地址
lrc: '歌词',
cover: '/attachfile/qsjxban.png'//封面图片地址
}]
});
</script>
这是标椎的格式了,代码里面也都有注释,里面差不多的属性都在上面。我填写的基本都是默认值,最简单直接的都是这样的
const ap = new aplayer({
container: document.getelementbyid('aplayer'),
audio: [{
name: 'name',//名称
artist: 'artist',//艺术家
url: 'url.mp3',//歌曲地址
cover: 'cover.jpg'//封面地址
}]
});本论坛程序的代码是要修改两个地方,一个是电脑版\static\js\common.js
另外一个是手机版:\static\js\mobile\common.js
页:
[1]