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

我希望如果我单击一个链接，然后打开一个新窗口并开始播放音频...知道如何执行此操作吗？

附言 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向您展示结果。