如何发挥这一反应在HTML / JavaScript的一个输入变量的音频文件？ [英] How to play an audio file that reacts to an input variable in HTML/JavaScript?
问题描述
我试图写入一个HTML / JavaScript文件这将根据动物的给定名称发挥动物声音（.MP3）。
脚本提示用户输入的动物的名字。用户输入的名后，将动物的名字出现在输出框。在我的音频目录中的code搜索用于给定动物的名字，当名称被发现，然后（才把）声音的音频代码被加载。用户可以preSS播放键听到它（如果他选择如此）。这是在给定的图象中所示：
![](\"http://i.stack.imgur.com/YmRaY.png\")
的问题是，我不知道如何使用MP3文件源作为一个变量！
有人可以帮助请??
下面是我到目前为止已经编写的JavaScript和HTML文件：
函数animalVoice（）{\r
//从文本字段获取动物名\r
theAnimal = document.animals.newAnimal.value;\r
document.animals.outAnimal.value = theAnimal; //再次写入输入在输出场\r
\r
} \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML\r
＆LT; HEAD＆GT;\r
＆LT;脚本类型=文/ JavaScript的SRC =audio_check.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; /头＆GT;\r
＆LT;身体GT;\r
＆LT; P＆gt;请在此处输入动物的名字：LT; / P＆GT;\r
＆LT;表格名称=动物＆GT;\r
＆LT;输入类型=文本名称=newAnimal大小=30/＆GT;\r
＆LT;输入类型=按钮NAME =动物值=发现声音\r
的onclick =animalVoice（）;＆GT;\r
＆LT; BR /＆GT;\r
＆LT; H4＆GT;输出：LT; / H4＆GT;\r
＆LT; textarea的COLS =30行=2NAME =outAnimal＆GT;\r
＆LT; / textarea的＆GT;\r
＆LT;音响\r
SRC =音频/ cow.mp3＆LT;！ - 如何实现输入变量theAnimal ??? - ＆GT;\r
prelaod =自动\r
控制\r
＆LT; /音频＆GT;\r
＆LT; /表及GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
使音频标签的ID并更改其源：
函数animalVoice（）{
//从文本字段获取动物名
theAnimal = document.animals.newAnimal.value;
。的document.getElementById（myPlayer）SRC =音频/+ theAnimal +.MP3
}
HTML
＆LT;音响
SRC =音频/ cow.mp3
ID =myPlayer
preLOAD =自动
控制＆GT;
＆LT; /音频＆GT;
然而，你可能想先验证指定的字符串是支持的动物。
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:
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>
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.
这篇关于如何发挥这一反应在HTML / JavaScript的一个输入变量的音频文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
