Typecho 主流音乐插件及 Youdu Player 完全配置指南

之前写过 在 Typecho 插入 Dplayer 视频播放器，及修复本主题比例错误的文章，今天再介绍一下音频播放器。主流的音频播放插件有 APlayer 和 Youdu Player，前者支持直接填写网易云歌单、歌手 ID，还支持歌词显示，而后者一开始也内置了网易云 API，但随着猪场 API 改变便不再支持了。所以方便起见选择前者，但如果你喜欢后者的界面，也就是本博客使用的，可以接着往下看。

生成网易云歌单配置

无需多言，首先要安装该插件，具体看作者主页介绍。接着你可以将歌曲上传到 CDN 或网站，然后按作者指定格式编写插件配置。

不过，我已经编写了 Youdu Player 配置生成器，你可以使用它直接生成网易云歌单配置。具体操作为：在网易云 新建歌单，将想要展示的音乐加进去。接着选择 分享，将分享链接在 PC 浏览器 打开，随后复制 浏览器地址，将其粘贴到配置生成器中点击 生成，随后点击 复制，最后将配置粘贴到 插件后台。

调整 Youdu Player 界面

插件默认风格可能与博客不符，不过它预留了自定义 CSS 接口。下面的我的 CSS 配置，主要调整了高度，进度条颜色，歌曲名称间隔以及长歌曲名不换行等。

/* 高度 */
#bgmpanel, span.bgmbuttom {
    height: 72px;
}

/* 进度条颜色 */
#jindu {
    background-color: red;
}

/* 歌名与作者间距 */
.artist {
    float: initial !important;
    margin-left: 5px;
}

/* Chrome 隐藏滚动条 */
.yd-lib::-webkit-scrollbar {
    display: none !important;
}

.yd-lib {
    /* 歌曲上下间距 */
    margin: 5px 0;

    /* 歌曲信息超出不换行 */
    white-space: nowrap;
    overflow-x: scroll;

    /* 火狐隐藏滚动条 */
    overflow: -moz-hidden-unscrollable;
    scrollbar-width: none;
    
    /* IE、EDGE 隐藏滚动条 */
    -ms-overflow-style: none !important;
}

自行部署生成器

生成器主要解决 2 个问题，首先是方便，其次是强制返回 https，避免 http 浏览器报不安全。最后采用前后端分离，将后端部署到腾讯云 SCF，而非博客服务器，避免了国外 VPS IP 被网易云屏蔽的问题。

点击我下载 后端，部署说明见 腾讯云 SCF Python3.6 环境编写 RESTFUL API 指南，只需阅读 首尾两段，但需注意部署地区应选择 国内。

前端在这，打开后右键查看源代码，将其复制到本地文件保存。随后将 142 行改成你的后端地址，最后将该文件放到你的网站。

目前仍可使用我的生成器，但如果人数过多我可能会关闭它，那时你可能需要自行部署。