CODEWITHSUNDEEP
html
Aaqiba
Aaqiba

Reputation: 21

play a sound on image click in html

I am working on an alphabets kid learning website, and want to play a sound on clicking an image. e.g. if user clicks on A(image) then in background sound of pronunciation of A must be played. Can it possible without using java script? Could anyone help?

Upvotes: 2

Views: 48075

Answers (2)

Balake
Balake

Reputation: 199

Without JavaScript? I don't think so but the JavaScript is very easy.

You can play an audio element that you have put in your page withdocument.getElementById('audioTag').play(); So this should work:

<a onclick="document.getElementById('yourAudioTag').play();">
     <img src="yourSrc.jpg">
</a>

JSFiddle.

You might even be able to put the onclick method into your image tag itself like so:

<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">

You can then use the .pause() method to pause the audio and .load() if you would like to load some new audio. It works similar to the HTML5 video tag.

And if you don't want to use an element for the audio you can declare it like this:

var audio = new Audio('audio_file.mp3'); audio.play();

and use it the same way. Just instead of 

document.getElementById('yourAudioTag').play();

you would use

audio.play();

An example of the whole thing would look something like this:

 <a onclick="myAudioFunction('A');">
     <img src="A.jpg">
 </a>
 <a onclick="myAudioFunction('B');">
     <img src="B.jpg">
 </a>
 <script>
     var aAudio = new Audio('a.mp3');
     var bAudio = new Audio('b.mp3');
     function myAudioFunction(letter) {
         if(letter == 'a') {
             aAudio.play();
         } else if(letter == 'b') {
             bAudio.play();
         }
     }
 </script>

Upvotes: 4

guysigner
guysigner

Reputation: 2922

Interesting question.

Obviously, you should go for a JavaScript solution (like this post). To quote css-tricks.com:

Again unfortunately, we can't tell an <audio> element what to do through CSS, so we'll need JavaScript.

However you have set up quite a nice challenge.

The <audio> element has the ability to show controls. In most browsers, the play button would come first from left in the controls. Thus, if you wrap the appropriate <audio> element inside your letter element (<div>/<img>/ etc.), then, with a little absolute-positioning magic, and low opacity for the <audio>, you could put your letter "over the sound". So, when users click on the letter, they actually click on the play button.

If you use the browser's default controls, then you're browser dependent, as the controls dimensions do differ between browsers. However, you can create custom controls, or use players available in the market (like JPlayer), to have constant dimensions to fit to your letters.

Example and Demo:

The following code will make a click on the letter H play a sound of a horse, as long as you test it in a Chrome browser.

CSS:

div#lH {
  position: absolute;
  width: 30px;
  height: 30px;
  overflow: hidden;
  z-index: 1;
  font-size: 25px;
  text-align:center;
}
audio#aH {
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 0.01;
}

HTML:

<div id="lH">
  <audio controls id="aH">
    <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
    <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>

Here's a JSFiddle.

Upvotes: 3

Related Questions