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