html切网页音乐会停,hexo NexT主题插入音乐

  • Post author:
  • Post category:其他


66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

找到选中的歌的地址:

music1.png

获取外链,选择是否播放模式,并复制箭头指向的那段代码

music2.png
将外链插入到hexo/themes/next/layout中的文件中我选择把播放器放在sidebar里面,所以我就选择了_macro文件夹中的 sidebar.swig文件,将之前复制的代码到了该文件中我选择将音乐盒子放在这个div下面

music3.png
如果选择放到主页的话,就放到_layout.swig文件中去就行了

最后,保存,提交。

hexo g -d

效果图如下:

music4.png

BUG

然后我发现两个bug这个音乐插入只能在本地播放,就是说blog同步到线上的时候就没有音乐了

还有就是切换页面的时候,比如我从首页点到日志,音乐播放器就会暂停,网页重新加载一次,音乐会重新播放一次

解决问题

bug1

在发布本地博文的过程中,页面解析时可能因为跨域的原因,播放器无法加载出来,会报如图的错误

music6.png

诺,最下面的两个错误,所以音乐播放器才显示不出来

那么!重点来了!!这个问题怎么解决呢!!!

很简单,把http改成https就好啦

music8.png

然后hexo deploy就可以完美的看到播放器惹~~~

music7.png

bug2

原则上不同的页面,资源重新加载,音乐的播放会被重置。

要实现音乐的连续播放,可以尝试使用如下的一些方法:

主页面使用frame

实际上是隐藏了music.html,只显示index.html,然后页面切换只是在index.html所在的那个frame发生,而主页面和music页面实际未重新加载。

这样音乐可以连续播放,但缺点是没办法在index.html页面中控制音频播放。

使用ajax+HTML5 history API

Ajax动态加载非音乐部分的页面,使用HTML5 history API来控制浏览器的前后跳转。history.pushState(null, null, link.href);

在按下浏览器回退时,触发popState事件,window.addEventListener(“popstate”, function(e) {

//loadPreviousPage();

}