晴川 发表于 2022-12-9 22:06:41

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]
查看完整版本: Aplayer.js音乐播放器的使用