别停音乐：播放音频页面上的链接

在 ShopTalk，我们收到了很多用户的请求，他们希望我们在节目笔记中的链接在新标签页中打开。 他们已经厌倦了在通过嵌入式播放器收听播客时点击页面上的链接。 当浏览器离开我们的页面并转到链接时，音频将停止播放。 我们可以解决这个问题。

一个选择是在每个链接上直接应用 target 属性，以便这些链接在新窗口或标签页中打开。

<a href="#" target="_blank">Show Note Link</a>

我们必须浏览整个节目档案，才能将该属性添加到 HTML 中。 这并非不可能，但并不理想，也不够灵活。

我个人通常不喜欢在新标签页中打开链接，我认为这与一般的 UX 共识一致。 除非有充分的理由，否则不要更改默认行为。 我们这里确实有充分的理由，但如果我们再仔细考虑一下，我们实际上想要做的就是防止声音突然停止。 因此，只有在音频实际播放时才更改该行为。

我们使用 MediaElements.js 作为播放器，并在页面上使用 jQuery。 这个播放器提供了我们可以绑定到的事件，用于启动和停止音频。

var player = $('audio').mediaelementplayer();

$(player).on("play", function(event) {

  // Links in new tabs
  $("a").attr("target", "_blank");

});

酷。 你可以更复杂地处理它，例如在暂停时删除该属性。 我让你决定如何处理它。

但是，如果你不喜欢像这样改变默认行为怎么办？ 这可以理解。 我们还可以通过另一种方式实现这一点，那就是使用 onbeforeunload 事件（在浏览器即将更改页面时触发）来确认导航。

这很容易实现。 我们只需要在音频没有播放时删除它。

var player = $('audio').mediaelementplayer();

$(player).on("play", function(event) {

  window.onbeforeunload = function() {
    return "The podcast will stop playing if you navigate away.";
  }

}).on("pause", function(event) {

  window.onbeforeunload = void(0);

});

这两种方法都有效。 我选择了 target=”_blank” 技术用于 ShopTalk，但 CodePen 在你对作品进行未保存的更改时会经常使用 onbeforeunload，以防止你丢失更改。 相关地，在过去，我们曾不遗余力地 将整个网站改为 Ajax，以防止你在浏览网站时音频停止。