<font color=#27cf5e size=4>前言</font>


有时候我们觉得文章枯燥乏味,或者此处应该有首歌的时候,我们就不得不考虑插入一个音乐播放器,对于Typecho来讲已经有很多插件供大家使用,不过拾叁是一个十分追求极简的人,那些播放器插件对于我来讲功能太过臃肿,而且播放器也算不上精美。于是我在GitHub上发现一款来自DIYgod制作的HTML5播放器——APlayer

<font color=#27cf5e size=4>Aplayer</font>


APlayer

如图,APlayer 一共提供了5个样式

  • 单首歌曲播放

  • 单首歌曲带歌词播放

  • 列表歌曲播放

  • 列表歌曲带歌词播放

  • 封面歌曲播放

<font color=#27cf5e size=4>实现方法</font>


<center><font color=#e72356 size=2>这里只讲如何实现样式一,其他样式的实现方法也是一样的,只不过参数不同,大家可以自行下载APlayer查看</font></center>


首先需要引入APlayer.min.js到footer.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.5.0/APlayer.min.js"></script>

然后在文章内容中直接插入播放器参数

<div id="player1" class="aplayer"></div>
<script>var ap1=new APlayer({"id":"player1","narrow":false,"autoplay":false,"showlrc":false,"mutex":true,"theme":"#615754","music":{"title":"side effects","author":"若い蒸気","url":"https://cdn.ryongyon.com/mp3-side%20effects.mp3","pic":"https://cdn.ryongyon.com/mp3-side%20effects.jpg",}});</script>

示例

配置参数

  • theme: 播放器部分颜色样式

  • title: 音乐名称

  • author: 音乐作者

  • url: mp3文件地址

  • pic: 专辑图片

最终效果

效果演示