多元，动态音频播放器适用于在HTML / JavaScript的一本字典 [英] multiple and dynamic audio players applied for a dictionary in HTML/JavaScript
问题描述
我想延长我已经不愿很久以前的一个问题：
<一href=\"http://stackoverflow.com/questions/31915516/how-to-play-an-audio-file-that-reacts-to-an-input-variable-in-html-javascript\">enter链接的描述在这里
和以前一样，我也想编写一个HTML / JavaScript文件这将起到根据动物的定名称的动物声音（.MP3）。
只有在这里，如果用户输入一定的动物，有无数声音的名称，那么结果将是多种音频播放器（标签）可供选择。
例如，如果只有一个结果为输入，如牛的例子，那么这不是一个问题，它只能打印奶牛，使声音只为牛。到目前为止，上述所有的作品！
但是，如果用户在现场输入鸟，该程序在所述阵列（字典）中搜索它。如果数组中存在，它打印不同种类的鸟（黑鸟，麻雀，杜鹃），并能在不同的音频播放器他们每个人的声音。当然应该是动态的，适合于2，4,5或任何其它数量的值的结果。
所以这就是我试图找出 - 如何让归因于同一个密钥的每个元素（值）多个音频标签。也就是说，如果有3个值鸟：黑鸟，麻雀和杜鹃，那么对每个应该出现一个单独的音频播放器标记
如在本实施例
-Blackbird - >音频播放器TAG1（饰演Blackbird.mp3）
-Cuckoo - >音频播放器TAG2（饰演Cuckoo.mp3）
-Sparrow - >音频播放器TAG3（饰演Sparrow.mp3）
/
下面又是一个简化的图象（但只有一个音频代码..），用于本实施例和JavaScript /下面的HTML
我会非常AP preciate任何帮助！在此先感谢！
![在这里输入的形象描述](\"http://i.stack.imgur.com/5Ci0N.png\")
VAR animal_sub = {鸟： - （黑鸟）+\\ N+ - （杜鹃）+\\ n+ - （麻雀）\r
};\r
\r
功能animalVoice（）{\r
//从文本字段的名称\r
theAnimal = document.animals.newAnimal.value;\r
如果（在animal_sub theAnimal）{\r
document.animals.outAnimal.value = animal_sub [theAnimal] //打印字textarea的\r
VAR行= animal_sub [theAnimal]\r
正则表达式= line.match（/ \\（（[^ \\）] *）\\）/ G）; //发现什么是在（），并定期使用前把它放入数组。\r
。的document.getElementById（myPlayer）的src =音频/只动物/+正则表达式[0] .substring（1，正则表达式[0]。长度-1）+的.mp3; //执行音频的第一次出现的索引（正则表达式[0]）\r
}\r
否则如果（！（theAnimal在animal_sub））{\r
theAnimal = document.animals.newAnimal.value;\r
document.animals.outAnimal.value = theAnimal;\r
。的document.getElementById（myPlayer）SRC =音频/动物/+ theAnimal +.MP3 //如果动物不在阵中，它只是简单地打印并播放音频\r
}\r
\r
}; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML\r
＆LT; HEAD＆GT;\r
＆LT;脚本类型=文/ JavaScript的SRC =animal_voices.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 =31行=4NAME =outAnimal＆GT;\r
＆LT; / textarea的＆GT;\r
＆LT;音响\r
SRC =音频/动物/\r
ID =myPlayer\r
preLOAD =自动\r
控制＆GT;\r
＆LT; /音频＆GT;\r
＆LT; /表及GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
您将需要插入的阵列中到您的dictionnary（ animal_sub 对象）。结果
然后，如果返回的对象是一个数组，遍历所有的键，并根据需要追加尽可能多的新的特刊。结果
的注：检测如果对象是一个数组，我使用<一个href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray\"相对=nofollow> Array.isArray（） 方法，这是不幸的是没有被旧的浏览器（IE8-）的支持。你可以找到一些polyfills 的出在那里。的
VAR animal_sub = {鸟：黑鸟，咕咕 麻雀]，鱼：沙丁鱼};\r
\r
功能animalVoice（）{\r
变种multiAud = document.querySelectorAll（'multiple_audio。'）;\r
//删除已添加的音频播放器\r
对于（VAR I = 0; I＆LT; multiAud.length;我++）{\r
multiAud [I] .parentNode.removeChild（multiAud [I]）;\r
}\r
//让我们的某些元素的引用\r
VAR播放器=的document.getElementById（myPlayer）;\r
无功输出= document.animals.outAnimal;\r
VAR theAnimal = document.animals.newAnimal.value;\r
//如果输入值是在Dictionnary\r
如果（在animal_sub theAnimal）{\r
VAR动物= animal_sub [theAnimal]\r
//重新设置textarea的\r
output.value ='';\r
//如果我们的对象是Array\r
如果（Array.isArray（动物））{\r
\r
对于（VAR I = 0; I＆LT; animal.length;我++）{\r
output.value + =动物[I] +的'\\ n';\r
//如果它的阵列中的第一\r
如果（I。1）{\r
player.src =音频/动物/+动物[I] +.MP3\r
}\r
其他{\r
//创建一个新的音频\r
VAR音频=新的音频（音频/动物/+动物[I] +.MP3）;\r
//添加一个类，使我们可以在下次调用删除\r
audio.className ='multiple_audio';\r
audio.controls = TRUE;\r
//在文档中插入它\r
player.parentNode.insertBefore（音频，player.nextNode）;\r
}\r
}\r
}\r
//它不是一个数组\r
否则，如果（typeof运算动物==='串'）{\r
output.value =动物;\r
player.src =音频/动物/+动物+.MP3\r
}\r
}\r
其他{//如果（！（theAnimal在animal_sub））{\r
output.value = theAnimal;\r
是//你确定要这么做？\r
player.src =音频/动物/+ theAnimal +.MP3\r
}\r
\r
}; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML\r
＆LT; HEAD＆GT;\r
＆LT;脚本类型=文/ JavaScript的SRC =animal_voices.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 =31行=4NAME =outAnimal＆GT;\r
＆LT; / textarea的＆GT;\r
＆LT;音响\r
SRC =音频/动物/\r
ID =myPlayer\r
preLOAD =自动\r
控制＆GT;\r
＆LT; /音频＆GT;\r
＆LT; /表及GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
I would like to extend a question which I've asked not long time ago: enter link description here
As before, I'm also trying to write an HTML/JavaScript file which would play an animal sound (.mp3) according to the given name of an animal.
Only here, if the user enters the name of a certain animal that has numerous sounds, then the result would be multiple audio players (tags) to choose from.
For example, If there is only one result for the input, like the "cow" example, then it's not a problem, it only prints cow and enables the sound just for cow. So far, all the above mentioned works!
But if the user enters "Bird" in the field, the program searches it in the array (dictionary). If it exists in the array, it prints different kinds of birds ("Blackbird", "Sparrow", "Cuckoo") and enables the audio for each of them in different audio players. Of course it should be dynamic and fit to 2, 4, 5 or any other number of value results.
So this is what I'm trying to figure out - how to allow multiple audio tags for each element (value) attributed to the same key. That is, if there are 3 values for "Bird": "Blackbird", "Sparrow" and "Cuckoo" then for each should appear a separate audio player tag.
as in this example:
-Blackbird --> audio player tag1 (plays Blackbird.mp3)
-Cuckoo --> audio player tag2 (plays Cuckoo.mp3)
-Sparrow --> audio player tag3 (plays Sparrow.mp3)
/
Here is again a simplified picture (but with only one audio tag..)for this example and the JavaScript/HTML below:
I would very appreciate any help! Thanks in advance!
var animal_sub = {"Bird":"- (Blackbird) "+"\n "+"- (Cuckoo) "+ "\n "+"- (Sparrow) "
};
function animalVoice(){
// Get the names from the text field
theAnimal=document.animals.newAnimal.value;
if(theAnimal in animal_sub) {
document.animals.outAnimal.value=animal_sub[theAnimal]; //printing the word in the textarea
var line=animal_sub[theAnimal];
regex=line.match(/\(([^\)]*)\)/g); //finds what's in the () and puts it in ARRAY using regular ex.
document.getElementById("myPlayer").src = "audio/animals/" + regex[0].substring(1,regex[0].length-1) + ".mp3"; //executes audio for the first appeared index (regex[0])
}
else if(!(theAnimal in animal_sub)) {
theAnimal=document.animals.newAnimal.value;
document.animals.outAnimal.value=theAnimal;
document.getElementById("myPlayer").src = "audio/animals/" + theAnimal + ".mp3"; //if the animal is NOT in the array, it simply prints it and plays the audio
}
};
<!DOCTYPE html>
<html
<head>
<script type="text/javascript" src="animal_voices.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 = "31" rows = "4" name="outAnimal">
</textarea>
<audio
src="audio/animals/"
id="myPlayer"
preload="auto"
controls>
</audio>
</form>
</body>
</html>
You will need to insert Arrays into your dictionnary (animal_sub object).
Then if the object returned is an Array, iterate over all its keys and append as much new Audios as needed.
Note: to detect if the object is an Array, I do use Array.isArray() method, which was unfortunately not supported by older browsers (IE8-). You can find some polyfills out-there.
var animal_sub = {"Bird":["Blackbird", "Cuckoo","Sparrow"], "Fish":"Sardine"};
function animalVoice(){
var multiAud = document.querySelectorAll('.multiple_audio');
// remove the added audio players
for(var i=0; i<multiAud.length; i++){
multiAud[i].parentNode.removeChild(multiAud[i]);
}
// Keep some references of our elements
var player = document.getElementById("myPlayer");
var output = document.animals.outAnimal;
var theAnimal=document.animals.newAnimal.value;
// if the input value is in the Dictionnary
if(theAnimal in animal_sub) {
var animal = animal_sub[theAnimal];
// reset the textArea
output.value='';
// if our object is an Array
if(Array.isArray(animal)){
for(var i=0; i<animal.length; i++){
output.value+=animal[i]+'\n';
// if it's the first in the array
if(i<1){
player.src= "audio/animals/" + animal[i] + ".mp3";
}
else {
// create a new Audio
var audio = new Audio("audio/animals/" + animal[i] + ".mp3");
// add a class so that we can delete it on next call
audio.className = 'multiple_audio';
audio.controls=true;
// insert it in the document
player.parentNode.insertBefore(audio, player.nextNode);
}
}
}
// it's not an Array
else if(typeof animal === 'string'){
output.value = animal;
player.src = "audio/animals/" + animal + ".mp3";
}
}
else { // if (!(theAnimal in animal_sub)) {
output.value = theAnimal;
// are you sure you want to do it ?
player.src = "audio/animals/" + theAnimal + ".mp3";
}
};
<!DOCTYPE html>
<html
<head>
<script type="text/javascript" src="animal_voices.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 = "31" rows = "4" name="outAnimal">
</textarea>
<audio
src="audio/animals/"
id="myPlayer"
preload="auto"
controls>
</audio>
</form>
</body>
</html>
这篇关于多元，动态音频播放器适用于在HTML / JavaScript的一本字典的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
