单击链接时在新选项卡上运行音频 - 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>

我希望如果我点击链接然后打开一个新窗口并开始播放音频...不知道怎么做？

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

Answer 1

您可以使用javascript来实现此目的。

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

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

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

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

当用户点击此链接时，将执行第二个功能：

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

newTab div包含音乐播放器：

<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来显示结果是什么。