likepoems
发布于 2021-09-16 / 1 阅读
0
0

在博客中实现播放音乐功能(QQ,网易,酷狗,虾米,百度)

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

<link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/likepoems/rushi/aplayer/dist/APlayer.min.css">
<script src="https://gcore.jsdelivr.net/gh/likepoems/rushi/aplayer/dist/APlayer.min.js"></script>
<script src="https://gcore.jsdelivr.net/gh/likepoems/rushi/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/搜索关键字
minifalse迷你模式
fixedfalse启用固定模式, 默认位置在左下角
autoplayfalse音频自动播放
orderfalse排序,值:list, random
loopall循环播放,值:all, one, none
preloadauto预加载,值:'none', 'metadata', 'auto'
volume0.7音量,值:0~1
list-foldedfalse表示歌单列表是否折叠
list-max-height示歌单列表的最大高度

详情见Apayer以及MetingJS


评论