Tmiracle

博客添加APlayer音乐播放器

简介

该项目由一名bilibili的前端 大佬 巨佬 Diygod 开源,目前最热门的网站播放器之一,拥有在线歌源、歌词滚动、随机播放等各种常用功能~

项目github地址 && 项目中文文档

使用方式

前往上面的github地址,clone或者下载到本地,进入目录/dist找到 APlayer.min.css 和 APlayer.min.js 两个文件,复制到你的项目中

然后引用:

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,                //是否附着页面底部,否为false
        volume: 0.7,                //初始音量(0~1)
        lrcType: 3,                 //歌词模式(1、HTML模式 2、js模式 3、lrc文件模式)
        mutex: true,                //互斥模式:阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
        order: 'random',            //音频循环顺序('list':顺序, 'random':随机)
        preload: 'none',            //预加载('none':不预加载, 'metadata':元数据, 'auto':自动)
        listFolded: false,          //列表默认折叠,开启为true
        theme: '#ee8243',           //主题颜色
        audio: [{
            name: 'name',           //歌曲名称
            artist: 'artist',       //歌曲作者
            url: 'url.mp3',         //歌曲源文件地址
            cover: 'cover.jpg',     //歌曲封面地址
            theme: '#eeeeee'        //主题颜色(优先)
        }]
    });
</script>

如何获取网易云歌曲

点我前往

如何实现全局播放器(全站无刷新不间断播放)

实现博客全站不间断播放,需要用到pjax:

pjax教程

简易教程:

pjax示例