请选择 进入手机版 | 继续访问电脑版

晴川综合网-西昌地区开办最早的个人网站之一

搜索
查看: 6757|回复: 0

Aplayer.js音乐播放器的使用

[复制链接]
发表于 2022-12-9 22:06:41 | 显示全部楼层 |阅读模式
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
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|小黑屋|手机版|Archiver|晴川综合网(晴川论坛) 蜀ICP备12004085号-1

GMT+8, 2024-3-29 21:23 , Processed in 0.093600 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表