Aplayer.js音乐播放器的使用

晴川

aplater.js是一款可爱、漂亮的js音乐播放器，在项目里面只要添加一个jquery.js跟aplayer.min.js 跟aplayer.min.css就可以了。看一个简单的栗子：

1. <link rel="stylesheet" href="~/scripts/aplayerjscs/aplayer.min.css">
   
2. <script src="~/scripts/jquery-3.3.1.js"></script>
   
3. <script src="~/scripts/aplayerjscs/aplayer.min.js"></script>
   
4. <div id="aplayer"></div>
   
5. <script type="text/javascript">
   
6.     const ap = new aplayer({
   
7.         container: document.getelementbyid('aplayer'),
   
8.         fixed: false,                   //开启吸底模式
   
9.         mimi: false,                    //开启迷你模式
   
10.         autoplay: false,                //音频自动播放
    
11.         theme: '#b7daff',               //主题色
    
12.         loop: 'all',                    //音频循环播放, 可选值: 'all', 'one', 'none'
    
13.         order: 'list',                  //音频循环顺序, 可选值: 'list', 'random'
    
14.         preload: 'auto',                //预加载，可选值: 'none', 'metadata', 'auto'
    
15.         volume: 0.7,                    //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
    
16.         mutex: true,                    //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    
17.         //customaudiotype:              //自定义类型，详情
    
18.         listfolded: false,              //列表默认折叠
    
19.         listmaxheight: 900,             //    列表最大高度
    
20.         storagename: 'aplayer-setting', //存储播放器设置的 localstorage key
    
21.         lrctype: 1,                     //歌词文件形式1歌词直接复制进来，2 html形式，3数据库获取格式跟下面的一样
    
22.         //音频信息, 应该是一个对象或对象数组
    
23.         audio: [{
    
24.             name: '全世界宣布爱你伴奏',//音乐名称
    
25.             artist: '孙子涵',//歌手
    
26.             url: '/attachfile/qsjxban.mp3',//地址
    
27.             lrc: '歌词',
    
28.             cover: '/attachfile/qsjxban.png'//封面图片地址
    
29.         }]
    
30.     });
    
31. </script>

复制代码

这是标椎的格式了，代码里面也都有注释，里面差不多的属性都在上面。  我填写的基本都是默认值，最简单直接的都是这样的

1. const ap = new aplayer({
   
2.     container: document.getelementbyid('aplayer'),
   
3.     audio: [{
   
4.         name: 'name',//名称
   
5.         artist: 'artist',//艺术家
   
6.         url: 'url.mp3',//歌曲地址
   
7.         cover: 'cover.jpg'//封面地址
   
8.     }]
   
9. });

复制代码

本论坛程序的代码是要修改两个地方，一个是电脑版\static\js\common.js
另外一个是手机版：\static\js\mobile\common.js