红茶的个人站点

  • 首页
  • 专栏
  • 开发工具
  • 其它
  • 隐私政策
Awalon
Talk is cheap,show me the code.
  1. 首页
  2. 其它
  3. 正文

腾讯云博客搭建 IV:音乐播放器

2021年4月3日 1997点热度 1人点赞 2条评论

好吧,我承认我是来水博客的。

今天打开博客,觉得少了点啥,对了,music。

打开小工具,主题自带个音乐播放器,不过实在过于简陋。

image-20210403113935530

百度一下,发现篇不错的文章最好的免费WordPress音频播放器插件,介绍了几款WordPress的播放器插件。

我选了一款AudioIgniter。

在官方网页上可以下载安装包:

image-20210403114343225

下载好以后解压到wp-content/plugins下。

在插件中启用:

image-20210403114538020

然后会出现一个新菜单Playlists,在这里可以创建播放列表:

image-20210403114651010

可以依次添加歌曲名称,链接等,这个插件是支持原创歌曲购买的,所以有那个Buy link,我们忽略就行了。

设置好歌曲列表后,下面的Player Type可以修改为Simple,否则播放器会显得很大。

image-20210403120120518

最后取消多余按钮,勾选上重复播放。

image-20210403120316378

复制生成的短代码后点右上角更新按钮保存。

外观>小工具中添加文本小工具:

image-20210403120440671

设置一下,将短代码贴入:

image-20210403120639442

现在看前台,已经有了,可以调整到自己喜欢的位置。

image-20210403121017150

默认样式一言难尽,可以用 CSS 改造一下。

打开外观》自定义界面:

image-20250606193034743

在额外 CSS 这个界面可以添加自定义 CSS:

image-20250606193148008

填写自定义 CSS:

image-20250606193225447

.ai-wrap {
    padding: 0px;
    background-color: #ffffff;
}
​
.ai-wrap .ai-track {
    background-color: #ffffff;
}

填写后立即就能看到页面效果,如果满意就点发布按钮。

最终效果长这样:

image-20210403130258742

好像还蛮有极简风的,反正我是没啥美术设计能力,有更好想法的可以留言。

音乐源的话,我使用的是网易云音乐,可以外链。

比如需要外链这首歌:

image-20250606204449676

URL 中有歌曲的 ID,其外链地址就是:

http://music.163.com/song/media/outer/url?id=4939852.mp3

需要注意的是,有的歌曲是 VIP,可以播放但不能外链。

好了,今天份的博客就水到这里了,谢谢阅读。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: wordpress 音乐播放器
最后更新:2025年6月6日

魔芋红茶

加一点PHP,加一点Go,加一点Python......

点赞
< 上一篇
下一篇 >

文章评论

  • ivkeji

    http://eric.cn.com/archives/1187/comment-page-16#comment-15792
    这个播放器不错,发展有一定念头了。。。然后你居然是用的微软网盘的外链的音乐 :lol: :lol:

    2021年5月19日
    回复
    • 魔芋红茶

      @ivkeji 是的。。。不过最近好像抽风了,我换某网抑云了

      2021年5月19日
      回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    COPYRIGHT © 2021 icexmoon.cn. ALL RIGHTS RESERVED.
    本网站由提供CDN加速/云存储服务

    Theme Kratos Made By Seaton Jiang

    宁ICP备2021001508号

    宁公网安备64040202000141号