页面切">音乐播放组件

音乐播放组件

前往原站点查看

2022-06-09 21:23:44

  这两天加了一个音乐播放的组件,同时对部分功能进行了优化。

页面切换过度

  对页面的切换进行了一个转场过度,对博客成列的展示与切换也简单的做了个过度。

  使用的是vue的transition标签,当里面内容改变的时候,会通过name指定的样式进行过度。(列表使用的标签是transition-group)

// html:<transition name="nav_list" mode="out-in">
      <router-view/>
</transition>
// scss:.nav_list-enter-active,.nav_list-leave-active{
  transition: .3s -0.1s ease-in-out;
}
.nav_list-enter,.nav_list-leave-to{
  margin-top: 50%;
  // opacity: .5;
  // margin-left: 100px;
}

友链评论信息保存

  同一个人在不同的时间点进行评论时,一般来说昵称、邮箱都是不会改变的,方便下次的回复。在之前,每次都要重新填写,显得非常的繁琐,所以这次对于每一次提交,都将基础信息记入了cookie,设置了保存的时间为-1即永久有效。这样下次评论的时候,自动读取cookie,如果各个基础属性存在,那么就自动填充,否则不填充(可能用户会有定期清空cookie的习惯,比如我(ˉ▽ˉ;)...

音乐播放组件添加

  使用了github上的MetingJS组件添加了音乐播放器的功能,其利用了aplayer进行了一个改进,通过metingjs,可以便捷的加载国内的主流音乐源:QQ音乐、网易音乐、酷狗、虾米、百度。不但可以读取单首音乐源,还可以智能获取列表进行播放。非常推荐的一个组件!

  如何使用?对于metingjs,目前似乎只提供了script引入的方式操作,鉴于jsdeliver在国内的稳定性实在是不想吐槽,所以将几个需要的js、css文件下载了下来,但是肯定还是要走cdn的,突然想到博客园的仓库可以上传js和css文件并且读取,也就是一个免费可靠的cdn源!于是便将文件上传到了博客园上,然后引入。

    <!-- require APlayer -->
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/dreamcenter/APlayer.min.css">
    <script src="https://blog-static.cnblogs.com/files/dreamcenter/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://blog-static.cnblogs.com/files/dreamcenter/Meting.min.js"></script>

  然后需要的地方,加上下面内容即可:

<meting-js
  class="music_player"
  server="tencent"
  id="7356701986"
  type="playlist"
  fixed="true"
  mini="true"
  lrc-type="1"
  :autoplay="autoPlay"
  mutex="true"
  list-folded="true">
</meting-js>

  各属性可以参考metingJS的github查看,我这里只对部分进行阐述。

  server是指目标解析的服务方,有netease, tencent, kugou, xiami, baidu五个选项,对应的服务方英文名字一眼可知。

  type代表了播放的类型,有song, playlist, album, search, artist五个选择,我这里是播放的qq音乐的列表功能。id指向的是对应type的id号,可以在浏览器看到其id号。

  以上三个是必填项。只要以上三个填写正确,基本就可以正确的播放目标了!

  如何找到id?参考下图即可。



上一篇:linux系统开mc服务器
下一篇:事务、异步线程池、二级缓存