不会pjax?这篇博客教你如何搞定背景音乐


本文章最初发表在XJHui’s Blog,未经允许,任何人禁止转载!
为使您获得最好的阅读体验,强烈建议您点击 这里 前往 XJHui’s Blog 查看!

前言

初衷

之前写的这篇文章详细的介绍了如何使用aplayer插件给自己的博客添加音乐播放器,体验了一段时间后觉得该播放器应用在在单一页面中使用效果挺好。但如果想作为博客背景音乐播放器还是有很大的局限性,其中最重要的一点是因为博客不支持pjax导致每次切换页面后音乐都会从头播放体验很不好。
在Shawn的推荐下,用上了下面这款播放器,可以前往我的个人主页体验。
不会pjax?这篇博客教你如何搞定背景音乐_第1张图片

声明

  1. 因为很多小伙伴在配置这款播放器过程中遇到了问题,为了少让你们跳些坑才有了这篇博客
    不会pjax?这篇博客教你如何搞定背景音乐_第2张图片
  2. 创作这篇博客无任何利益驱动,博主也仅为播放器普通用户。

    播放器

    明月浩空音乐

    上面说aplayer用作背景音乐存在局限性,下面这款播放器解决该局限性的方法是断点续播
    点击进入播放器官网,提供两种版本,分别是免费版和付费版:
  3. 免费版:
    • 每三个月必须登陆一次后台否则回收账号
      不会pjax?这篇博客教你如何搞定背景音乐_第3张图片
    • 功能受限(一个歌单,不可批量导入歌曲,个性设置受限(下图))
      不会pjax?这篇博客教你如何搞定背景音乐_第4张图片
    • 存在广告,注意看下图:
      不会pjax?这篇博客教你如何搞定背景音乐_第5张图片
  4. 付费版:
    • 不存在上述免费版本限制
    • 免费提供独立域名播放器:推荐点击这里体验。
      • 收费标准:自行前往官网查看。
        个人想法:我是花一元买的5000次播放量升级到付费版本,这些播放量对我这小站来说也是足够了,毕竟作者还要为服务器买单,总是白嫖也不好(我主要是想去广告…)。

        注册并登陆

    • 点击这里开始注册,输入用户名密码等信息:
      不会pjax?这篇博客教你如何搞定背景音乐_第6张图片
      注意保护个人隐私安全!
    • 点击进入后台
      不会pjax?这篇博客教你如何搞定背景音乐_第7张图片
    • 点击确定添加播放器,输入播放器名称:
      不会pjax?这篇博客教你如何搞定背景音乐_第8张图片
    • 创建成功,点击下一步不会pjax?这篇博客教你如何搞定背景音乐_第9张图片

      配置播放器

    • 输入授权域名
      不会pjax?这篇博客教你如何搞定背景音乐_第10张图片
      这个功能的目的是防止盗取播放次数,对于付费用户(特别购买播放次数的用户)如果别人盗取了你播放器id将其用于自己网站,那么你的播放次数就得不到保障
    • 创建歌单:
      不会pjax?这篇博客教你如何搞定背景音乐_第11张图片
    • 为歌单添加歌曲
      不会pjax?这篇博客教你如何搞定背景音乐_第12张图片
    • 将歌单加入播放器
      不会pjax?这篇博客教你如何搞定背景音乐_第13张图片
      删除原有歌单的原因:免费用户只能添加一个歌单。

      开始使用

    • 测试播放器:
      不会pjax?这篇博客教你如何搞定背景音乐_第14张图片
      如果没有该选项,尝试刷新页面解决。
      不会pjax?这篇博客教你如何搞定背景音乐_第15张图片
      看自己添加的歌曲是否在歌曲列表中出现。
    • 获取js代码:
      不会pjax?这篇博客教你如何搞定背景音乐_第16张图片
    • 在博客中使用(butterfly主题为例):
      查看自己主题的版本号不会pjax?这篇博客教你如何搞定背景音乐_第17张图片
      • < v2.3.5
        配置文件搜索footer_custom_text:,在后面添加上一步获取的js代码,如下图:
        f9871960e668e34f3434289b5aa4e077.png
        如果本地运行时提示:
        不会pjax?这篇博客教你如何搞定背景音乐_第18张图片
        在刚刚添加的代码前面加上下面的代码:
        
                            
                            

你可能感兴趣的:(安装使用教程,博客搭建)