博客内嵌音乐播放器代码及点击链接后歌曲被中断解决方案

最近在博客里加了个音乐播放器，结果发现一个特别烦人的问题：每次点开博客内的新文章，正在放的歌就会中断。试了好几种方法都觉得不完美，要么影响网页加载速度，要么要改一堆代码。后来灵机一动，干脆让所有链接都在新标签页打开，这样原来的页面不会刷新，音乐就能一直播放了。这个方法简直不要太简单，完全不用动播放器的代码，对网页速度零影响，实现起来特别容易，虽然看起来有点取巧，但实际用起来还是不错的！有时候感觉啊，想太多了不好，最简单的办法反而最管用，折腾半天不如换个思路。

操作步骤

1. 播放器代码及安装流程

复制以下播放器代码到页首HTML代码中。这里引用的是网易云歌单，想换自己的歌单需要修改data-id，获取id的方法，点击网易云中的生成外联播放器即可获取到歌单id。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>

 

全站链接在新窗口打开

2. 操作步骤

复制以下全站链接在新窗口打开代码到页脚html中即可。搞定，现在播放音乐就不会被打断了。

  document.querySelectorAll('a:not([target])').forEach(link => {
    link.setAttribute('target', '_blank');  // 添加新窗口属性
    link.setAttribute('rel', 'noopener');   // 安全优化
  });

完工搞定