html open new tab with playing sound

Question

I know how to open a new tab. For example, this is what I have:

<a href="pdfs/award_2.pdf" target="_blank" style="font-size:17px">Award</a></span>

This code, will open a new tab, and loads my award_2.pdf file. But how can I also do something that it plays a music also when the new tab is opened? And how can I make such that when I close the new tab, the music stops as well?

I also already have the audio tag code:

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

But how can I make this plays/stops by opening/closing the pdf file?

score 2 · Answer 1 · edited Dec 07 '14 at 02:25

Create a new html file in the same folder where is your pdf file located and put this code in that html file.

 <audio autoplay>
  <source src="youraudio.ogg" type="audio/ogg">
  <source src="youraudio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio> 
   <iframe id="viewer" src="yourpdffile.pdf" allowfullscreen="" webkitallowfullscreen="" height="500" width="700"></iframe>

save the file(change path in the code as necessary). Point the Anchor to the new html file.

<a href="newhtmlfile.html" target="_blank" style="font-size:17px">Award</a></span>

Thats it.

thanks a lot. this is exactly what i needed. worked perfect !! — Rudy01, Dec 07 '14 at 02:32

score 0 · Answer 2 · answered Dec 07 '14 at 02:07

try setting onfocus and onblur events to your code:

ex:

window.onfocus=function(){
    //stop the music
}
window.onblur=function(){
    //play the music
}

note: this will not stop the music when you close the new tab, but only when you navigate back to the original tab.

see onfocus and onblur documentation for more details.

score 0 · Answer 3 · edited May 23 '17 at 12:13

Are you trying to open the new tab with the music "inside"? If so, it's not recommended but, let me try to help you.

You can display the .pdf using an iframe (it's not recommended too).

To play the audio you can use the audio tag by HTML5:

<audio src="audio.ogg" autoplay loop>
  <p>Your browser does not support the audio element </p>
</audio>

And then, display the iframe below with the .pdf file.

<iframe src="pdf.pdf"></iframe>

Don't forget to set the iframe to full page size.

html open new tab with playing sound

3 Answers3

Linked