在博客中实现播放音乐功能（QQ，网易，酷狗，虾米，百度）

likepoems

发布于 2023-03-04 17:07:36

8660

发布于 2023-03-04 17:07:36

文章被收录于专栏：学习笔记分享

本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。

1、在页头head标签里添加：

<link rel="stylesheet" href="https://static.likepoems.com/cdn/aplayer/dist/APlayer.min.css">
<script src="https://static.likepoems.com/cdn/aplayer/dist/APlayer.min.js"></script>
<script src="https://static.likepoems.com/cdn/aplayer/dist/Meting.min.js"></script>

<!-- 自定义歌词样式 -->
<style>
.aplayer-list li, .aplayer-music{text-align: left; color: #666}
.aplayer-lrc .aplayer-lrc-contents p{
    font-size: 15px !important;
    font-weight: bold !important;
}
.aplayer-lrc .aplayer-lrc-contents .aplayer-lrc-current {
    color: #212121 !important;
}
</style>

2、在页脚footer标签里(/body前)添加：

<div class="aplayer" 
      data-id="8268823919"
      data-server="tencent" 
      data-type="playlist" 
      data-fixed="true" 
      data-autoplay="false" 
      data-list-folded="true"
      data-mutex="true"
      data-order="random" 
      data-loop="all"
      data-volume="0.4" 
      date-preload="auto" > 
 </div>

3、相应配置

常见的配置：

参数	默认	描述
server	无	音乐平台：netease, tencent, kugou, xiami, baidu
type	无	播放的音乐类型，值：song, playlist, album, search, artist
id	无	歌曲id/播放列表id/专辑id/搜索关键字
mini	false	迷你模式
fixed	false	启用固定模式, 默认位置在左下角
autoplay	false	音频自动播放
order	false	排序，值：list, random
loop	all	循环播放，值：all, one, none
preload	auto	预加载，值：’none’, ‘metadata’, ‘auto’
volume	0.7	音量，值：0~1
list-folded	false	表示歌单列表是否折叠
list-max-height	无	示歌单列表的最大高度