Greetings, I want to change the src of a label to be able to reproduce a sound depending on the image pressed.
The original code is:
<head>
<script>
function EvalSound(soundobj) {
var thissound= eval("document." soundobj);
thissound.Play();
}
</script>
</head>
<body>
<embed src="animales/perro.mp3" autostart=false width=0 height=0 name="sound1" enablejavascript="true">
<img src="play.gif" onClick="EvalSound('sound1')">
</body>
It works but always plays the dog.
I have modified it:
<head>
<script type="text/javascript">
function EvalSound(soundobj) {
document.getElementById("reproductor").src = soundobj;
var thissound= eval("document." soundobj);
thissound.Play();
}
</script>
</head>
<body>
<embed src="" autostart=false id="reproductor" width=0 height=0 name="sound1" enablejavascript="true">
<main>
<div class="" id="midiv">
<img id="leon" src="animales/leon.jpg" onClick="EvalSound('animales/leon.mp3')" alt="León" />
<img id="Halcon" src="animales/halcon.jpg" onClick="EvalSound('animales/halcon.mp3')" alt="Halcón" />
</div>
</main>
</body>
The logic is simple: I pick up the sound path when I call the function and then I change the embed src but it does not work ....
Solution ::
<script type="text/javascript">
var audio = new Audio();;
function EvalSound(soundobj) {
if(audio.play()){
audio.pause();
audio = null;
audio = new Audio(soundobj);
audio.play();
}
}
</script>
<div class="" id="midiv">
<img id="leon" src="animales/leon.jpg" onClick="EvalSound('animales/leon.mp3')" alt="León" />
<img id="Halcon" src="animales/halcon.jpg" onClick="EvalSound('animales/halcon.mp3')" alt="Halcón" />
</div>