如何给网站添加一个小巧可爱的播放器??

在这里我运用的是【APlayer.min】播放器

演示地址:APIayer.min

G站地址:APIayer.min

这个播放器可以支持的浏览器有

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer 11
  • Microsoft Edge

至于使用方法麻~~~我肯定会以最简单的方式来教大家的啦,话不多说,正式开始教学。

第一步:添加播放器

我们需要去官网下载两个文件即可,没错就是两个文件。

如何给网站添加一个小巧可爱的播放器??插图
如何给网站添加一个小巧可爱的播放器??插图1

我们只需要APlayer.min.css和APlayer.min.js即可,将这两个文件夹放在你需要播放器网站的根目录下即可。

如何给网站添加一个小巧可爱的播放器??插图2

然后我们来到博客的后台,找到外观>主题文件编辑器。

再找到【主题页脚】和【主题页眉】这两文件,我们只需要在这两个文件上加一些代码即可

我们来到【主题页眉】文件

找到</head>在它的上方添加以下代码

<link rel="stylesheet" href="APlayer.min.css">
如何给网站添加一个小巧可爱的播放器??插图5

接下来我们来到【主题页脚】文件

找到</body>在它的上方添加以下代码

	<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,                //是否附着页面底部,否为false
        autoplay: false,             //是否自动播放,否为false,移动端不能生效
        volume: 0.4,                //初始音量(0~1)
        lrcType: 2,                 //歌词模式(1、HTML模式 2、js模式 3、lrc文件模式)
        mutex: true,                //互斥模式:阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
        order: 'list',            //音频循环顺序('list':顺序, 'random':随机)
        preload: 'auto',            //预加载('none':不预加载, 'metadata':元数据, 'auto':自动)
        listFolded: true,          //列表默认折叠,开启为true
        theme: '#FFB6C1',           //主题颜色
        audio: [
			  {
            name: 'Coffee (Extended Mix)',          //歌曲名称
            artist: 'Wisp X',      //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1297742744',    //歌曲源文件地址
            cover: 'https://p1.music.126.net/ZyGjMn3pZuP_yFfweo4JZA==/109951163440031715.jpg?param=130y130',     //歌曲封面地址
            lrc: '[99:00.00]纯音乐,请欣赏',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色(优先)
        },
			{
            name: 'home',           //歌曲名称
            artist: 'Xxx',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1925831429',         //歌曲源文件地址
            cover: 'https://p1.music.126.net/iTGo_SDqTJX9dAKAMCcL9Q==/109951167120338326.jpg?param=130y130',     //歌曲封面地址
            lrc:  '[00:00.000] 作词 : 无\n[00:01.000] 作曲 : 起风了\n[00:02.000] 编曲 : 无\n[99:00.00]纯音乐,请欣赏',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色(优先)
        }]
    });
</script>
如何给网站添加一个小巧可爱的播放器??插图6

注:【如果是但index.html也可以添加播放器,只要找对位置即可】

就这样我们回到主页在左下角就可以看到播放器啦。

如何给网站添加一个小巧可爱的播放器??插图7

第二步:如何添加歌曲及其相关内容

其实添加歌曲非常简单我们只需要改四个地方即可。

	<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,                //是否附着页面底部,否为false
        autoplay: false,             //是否自动播放,否为false,移动端不能生效
        volume: 0.4,                //初始音量(0~1)
        lrcType: 2,                 //歌词模式(1、HTML模式 2、js模式 3、lrc文件模式)
        mutex: true,                //互斥模式:阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
        order: 'list',            //音频循环顺序('list':顺序, 'random':随机)
        preload: 'auto',            //预加载('none':不预加载, 'metadata':元数据, 'auto':自动)
        listFolded: true,          //列表默认折叠,开启为true
        theme: '#FFB6C1',           //主题颜色
        audio: [
			  {
            name: 'Coffee (Extended Mix)',          //歌曲名称
            artist: 'Wisp X',      //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1297742744',    //歌曲源文件地址
            cover: 'https://p1.music.126.net/ZyGjMn3pZuP_yFfweo4JZA==/109951163440031715.jpg?param=130y130',     //歌曲封面地址
            lrc: '[99:00.00]纯音乐,请欣赏',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色(优先)
        }]
    });
</script>

第一个地方

name: 'Coffee (Extended Mix)',          //歌曲名称
artist: 'Wisp X',      //歌曲作者

#只需要把【Coffee (Extended Mix)】相对应歌曲的名字就行
#只需要把【Wisp X】相对应歌曲著作人的名字就行

第二个地方

url: 'https://music.163.com/song/media/outer/url?id=1297742744',    //歌曲源文件地址

#只需要把【url?id=1297742744】后面这串数字改成网页相对应的ID就行
#最好是网页版本的网易云。
如何给网站添加一个小巧可爱的播放器??插图8

第三个地方。

cover: 'https://p1.music.126.net/ZyGjMn3pZuP_yFfweo4JZA==/109951163440031715.jpg?param=130y130',     //歌曲封面地址

#只需要把cover:'https://#/#jpg'链接换成相对应的图片就行,可以用图床上传啊,但我们只需要一个F12即可解决
#同时按住CTRL+SHIFT+S点击左边胶片的图片,右边的元素就会出现相对应的图片链接,我们复制下来再替换进去即可
如何给网站添加一个小巧可爱的播放器??插图9

第四个地方

 lrc: '[99:00.00]纯音乐,请欣赏',        //歌曲的歌词文件

#同上面我们也需要用到F12。
#我们切换到步骤1的【网络】【一开始可能是很少的文件但F5刷新以下即可】
#找到步骤2的lyrc?文件
#点击右边的预览然后找到步骤3
#再步骤3的内容复制并替换进去即可
#小提示【lrcType: 2,                 //歌词模式(1、HTML模式 2、js模式 3、lrc文件模】必须要为2否则歌词不显示。
如何给网站添加一个小巧可爱的播放器??插图10

具体教程就两大步骤,播放器和替换音乐其实也没什么难的地方,只要愿意搞就行的啦

如何给网站添加一个小巧可爱的播放器??插图11
本片文章是由【茗茶】所编写的。
如要转载此文章必须经过本文章作者【茗茶】授权允许
转载本文章【如何给网站添加一个小巧可爱的播放器??】时,需要标注来源地址!否则后果自负!
本片文章的网址是:https://www.asukatea.cc/604.html | 请标注来源地哦~~~
THE END
分享
二维码
打赏
海报
如何给网站添加一个小巧可爱的播放器??
怎么给网站添加一个播放器呢?
<<上一篇
下一篇>>
文章目录
关闭
目 录