Play MP3 with when an image is clicked

onclick mp3 html5-audio

33,695

This is not about PHP, you will just add HTML code to your PHP page.

If you're insistent on embed tag here is the code you want, DEMO

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              var embed = document.getElementById("embed");
              if (!embed) {
                  var embed = document.createElement("embed");
                      embed.id= "embed";
                      embed.setAttribute("src", soundfile);
                      embed.setAttribute("hidden", "true");
                  el.appendChild(embed);
              } else {
                  embed.parentNode.removeChild(embed);
              }
          }
      </script>
  </head>
<body>
    <span id="dummy" onclick="playSound(this, 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');">
      <img src="short_a/bat.jpg" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/>
    </span>
</body>
</html>

Nevertheless I recommend you use Audio API, DEMO

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript">
          function playSound(el,soundfile) {
              if (el.mp3) {
                  if(el.mp3.paused) el.mp3.play();
                  else el.mp3.pause();
              } else {
                  el.mp3 = new Audio(soundfile);
                  el.mp3.play();
              }
          }
      </script>
  </head>
<body>
    <span id="dummy" onclick="playSound(this, 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');">
      <img src="short_a/bat.jpg" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/>
    </span>
</body>
</html>

33,695

Author by

Admin

Updated on July 05, 2022

Comments

Admin about 2 years

I want to play an MP3 file when I click a certain image in my site. I also want the MP3 file to be hidden. How can I do that? I tried this code but nothing happens:

<html>
<body>

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {

document.getElementById("dummy").innerHTML=document.getElementById("dummy").innerHTML +
"<embed src=\""+mp3/a/bat.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\"     />";
 }

<span id="dummy" onclick="playSound('mp3/a/bat.mp3');"><img src="short_a/bat.jpg" 

name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/></a></span>

</script>
</body>
</html>