配置音乐插件

张登友，张登友的博客，张登友的网站——

推荐使用aplayer播放器,基于js开发的开源音乐播放器

https://aplayer.js.org/#/home

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

使用模块管理器:

import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';

const ap = new APlayer(options);

参数

const ap = new APlayer({
    container: document.getElementById('player'),
    mini: false,
    autoplay: false,
    theme: '#FADFA3',
    loop: 'all',
    order: 'random',
    preload: 'auto',
    volume: 0.7,
    mutex: true,
    listFolded: false,
    listMaxHeight: 90,
    lrcType: 3,
    audio: [
        {
            name: 'name1',
            artist: 'artist1',
            url: 'url1.mp3',
            cover: 'cover1.jpg',
            lrc: 'lrc1.lrc',
            theme: '#ebd0c2'
        },
        {
            name: 'name2',
            artist: 'artist2',
            url: 'url2.mp3',
            cover: 'cover2.jpg',
            lrc: 'lrc2.lrc',
            theme: '#46718b'
        }
    ]
});

API

• APlayer.version: 静态属性, 返回 APlayer 的版本号

• ap.play(): 播放音频

• ap.pause(): 暂停音频

• ap.seek(time: number): 跳转到特定时间，时间的单位为秒

  ap.seek(100);

• ap.toggle(): 切换播放和暂停

• ap.on(event: string, handler: function): 绑定音频和播放器事件，详情

• ap.volume(percentage: number, nostorage: boolean): 设置音频音量

  ap.volume(0.1, true);

• ap.theme(color: string, index: number): 设置播放器主题色, index 默认为当前音频的 index

  ap.theme('#000', 0);

• ap.setMode(mode: string): 设置播放器模式，mode 取值应为 ‘mini’ 或 ‘normal’

• ap.mode: 返回播放器当前模式，’mini’ 或 ‘normal’

• ap.notice(text: string, time: number, opacity: number): 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8，设置时间为 0 可以取消通知自动隐藏

  ap.notice('Amazing player', 2000, 0.8);

• ap.skipBack(): 切换到上一首音频

• ap.skipForward(): 切换到下一首音频

• ap.destroy(): 销毁播放器

• ap.lrc

  • ap.lrc.show(): 显示歌词
  • ap.lrc.hide(): 隐藏歌词
  • ap.lrc.toggle(): 显示/隐藏歌词

• ap.list

  • ap.list.show(): 显示播放列表
  • ap.list.hide(): 隐藏播放列表
  • ap.list.toggle(): 显示/隐藏播放列表
  • ap.list.add(audios: array | object): 添加一个或几个新音频到播放列表

  ap.list.add([{
      name: 'name',
      artist: 'artist',
      url: 'url.mp3',
      cover: 'cover.jpg',
      lrc: 'lrc.lrc',
      theme: '#ebd0c2'
  }]);

  • ap.list.remove(index: number): 移除播放列表中的一个音频

  ap.list.remove(1);

  • ap.list.switch(): 切换到播放列表里的其他音频

  ap.list.switch(1);

  • ap.list.clear(): 清空播放列表

• ap.audio: 原生 audio

  • ap.audio.currentTime: 返回音频当前播放时间
  • ap.audio.duration: 返回音频总时间
  • ap.audio.paused: 返回音频是否暂停
  • 支持大多数原生audio接口

事件绑定

ap.on(event, handler)
ap.on('ended', function () {
    console.log('player ended');
});

音频事件

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

播放器事件

• listshow
• listhide
• listadd
• listremove
• listswitch
• listclear
• noticeshow
• noticehide
• destroy
• lrcshow
• lrchide

hexo部分主题启用插件

1. 启用插件

将enable的值改为true即可激活音乐插件。

2. 找链接

然后是找音乐的播放链接,在线音乐地址解析。

3. 专辑封面，

可以从网易云的源码里找

4. 填写地址，

之前多打了一个逗号，一直报错，找了好久(～﹃～)~zZ

5. 完成的效果

注意事项

坑爹的网易云和QQ音乐，我才吃个饭所有的外链播放全部失效，回来一看音乐一个都放不了了，以为代码出错了，一个一个排查，结果没错，找了半天是网易云的在线音乐有个失效机制，害的我又重做，全部换成自己的服务器凸(艹皿艹)