CODEWITHSUNDEEP
htmlaudio
Joe Huang
Joe Huang

Reputation: 6570

How to play an audio file in the background after clicking a link? (no embed)

Currently I am using following code to play some audio after a link is clicked:

<a href="http://somehost.com/word_audio.ogg">Pronunciation of a word</a>

For now if the user clicks on the link, a new page with an audio playing panel is loaded. After playing the audio, the user has to click GO BACK button of the browser to get back to the original content.

Is it possible to play the audio without being directed to a new page? When the user clicks on the link, the audio just plays in the background? (Don't want to use embed because it's just a 1 second audio for a word's pronunciation as a minor explanation of an uncommon word).

Upvotes: 1

Views: 4074

Answers (3)

Nikola Lukic
Nikola Lukic

Reputation: 4244

If you use a tag be careful with href . Code snippet fixed . First you will need to make convert ogg to the mp3 and than use it for multi source .

Small browser detector (chrome/opera/safari - mp3 and mozilla - ogg . )

E("PLAYER").addEventListener("error", function(e) { 
      
   console.log("error: " + e.target.error)
       
});

function PLAYER_BACKGROUND(what) {
 
 var SOURCE_PATH = E(what).getAttribute("whattoplay")
 
   if (isChrome == true)
   {
 
      SOURCE_PATH = SOURCE_PATH.replace(".ogg" , ".mp3")
      
   }
   else {
   
      SOURCE_PATH = SOURCE_PATH.replace( ".mp3" , ".ogg" )
      
   }
 
  E("PLAYER").src = SOURCE_PATH 
  E("PLAYER").play() 
    
 }
<script>

var E = function(id){return document.getElementById(id)};
var isChrome = /Chrome/.test(navigator.userAgent) || /Safari/.test(navigator.userAgent);

</script>

<a id="audio_1" onclick="PLAYER_BACKGROUND(this.id)" whattoplay="https://maximumroulette.com/framework/res/audio/laser7.ogg" href="javascript:void(0)">Pronunciation of a word</a>

<audio style="display:none" id="PLAYER" autoplay controls>

 <source src="#" type="audio/ogg">
 <source src="#" type="audio/mpeg">
Sorry, your browser does not support the  element. 

</audio>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

Actually the href attribute is redirecting you to the new page, you can use e.prevenDefault() in the link click event handler to stop this redirection and create a dynamic audio element with this href as source and play it.

This is what you need: 

function playItHere(e, link) {
  var audio = document.createElement("audio");
  var src = document.createElement("source");
  src.src = link.href;
  audio.appendChild(src);
  audio.play();
  e.preventDefault();
}
<a href="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" onclick="playItHere(event, this)">Pronunciation of a word</a>

Upvotes: 3

cosinepenguin
cosinepenguin

Reputation: 1575

In html5, you can actually use the <audio> tag to get that done!

<audio src="/music/myaudio.ogg" autoplay> Sorry, your browser does not support the <audio> element. </audio>

SOURCE: Wired

Upvotes: 1

Related Questions