0

I know that through below code audio will play ....

<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>

I want that if I click a link then a new window open and start playing audio ... Any idea how to do this?

P.S. Here is a way to do this. BUT I don't want to make any extra HTML page.

Community
  • 1
  • 1
Junaid
  • 2,572
  • 6
  • 41
  • 77
  • do you want the link to resume the audio from where it was clicked – Naeem Shaikh Feb 04 '15 at 05:37
  • @NaeemShaikh Nope ... At first the audio should be stopped ... After clicking the link a new window open and start playing audio automatically ... !! – Junaid Feb 04 '15 at 05:39
  • @Junaid This can help.. http://stackoverflow.com/questions/9399354/how-to-open-a-new-window-and-insert-html-into-it-using-jquery – Rakesh_Kumar Feb 04 '15 at 06:28

1 Answers1

1

You can use javascript to achieve this.

For example, using JQuery, you can create 2 functions like this :

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

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

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

The second function will be executed when a user clicks on this link : 

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

The newTab div contains the music player : 

<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>

Finally, here's a JS Fiddle to show you what is the result.

Freelex
  • 176
  • 3
  • 10
  • But in you JSFiddle I am not able to play the audio. It open in new tab but cannot be played !! – Junaid Feb 04 '15 at 06:28
  • @Junaid It is normal, you need to replace horse.ogg and horse.mp3. These files don't exist, so you can simply replace them with a valid URL. I've just updated the JS Fiddle with a mp3 sample. – Freelex Feb 04 '15 at 07:05