1

I trying to write an HTML/JavaScript file which would play an animal sound (.mp3) according to the given name of an animal.

The script prompts the user to enter an animal's name. After the user entered the name, the animal's name is appeared in the output box. The code searches in my audio directory for the given animal's name and when the name is found, then (and only then) the audio tag of the sound is loaded. The user can press the play key to hear it (if he chooses so). This is illustrated in the given picture: enter image description here

The problem is that I don't know how to use the mp3 file source as a variable! Can someone help please??

here are the JavaScript and HTML files which I've written so far:

function animalVoice(){
    // Get the Animal name from the text field
    theAnimal=document.animals.newAnimal.value; 
    document.animals.outAnimal.value=theAnimal; //writing the input again in the "output" field"
    
}
<!DOCTYPE html>
<html 
    <head>
    <script type="text/javascript" src="audio_check.js"></script>
    </head>
    <body>  
        <p>please enter the animal's name here: </p>
        <form name="animals">
        <input type="text" name="newAnimal" size ="30" />
        <input type="button" name="animal" value="find the sound"
        onclick="animalVoice();">
        <br/>
        <h4>output:</h4>
        <textarea cols = "30" rows = "2" name="outAnimal"> 
        </textarea>
        <audio
            src="audio/cow.mp3" <!--how to implement the input variable theAnimal???-->
            prelaod = "auto"
            controls       
        </audio>    
        </form>
</body>
</html>
Apython
  • 453
  • 6
  • 19

1 Answers1

3

Give the audio tag an ID and change its source:

function animalVoice(){
    // Get the Animal name from the text field
    theAnimal=document.animals.newAnimal.value; 
    document.getElementById("myPlayer").src = "audio/" + theAnimal + ".mp3"; 
}

HTML:

<audio
    src="audio/cow.mp3"
    id="myPlayer"
    preload="auto"
    controls>     
</audio>

However you probably want to first validate that the given string is a supported animal.

idmean
  • 14,540
  • 9
  • 54
  • 83
  • That works!!! I just needed to rewrite the source in the HTML file to: src="audio/" because the cow.mp3 was just an example.. many thanks! – Apython Aug 10 '15 at 09:22