运行 单击 link 时新选项卡上的音频 - HTML

Question

我知道通过下面的代码音频将播放....

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

我想如果我点击 link 然后一个新的 window 打开并开始播放音频...知道如何做到这一点吗？

P.S。 Here 是一种方法。但是我不想制作任何额外的 HTML 页。

Answer 1

您可以使用 javascript 来实现。

例如，使用 JQuery，您可以像这样创建 2 个函数：

function newTabFunction() {
    var w = window.open();
    var html = $("#newTab").html();

    $(w.document.body).html(html);
}

$(function() {
    $("a#link").click(newTabFunction);
});

第二个函数将在用户单击此 link 时执行：

<a href="javascript:;" id="link">Open music</a>

newTabdiv包含音乐播放器：

<div id="newTab">
    <p>The music is playing in a new tab</p>
    <audio controls autoplay>
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>

最后，这里有一个JS Fiddle告诉你结果是什么。