多个动态音频播放器应用于 HTML/JavaScript 中的字典
Posted
技术标签:
【中文标题】多个动态音频播放器应用于 HTML/JavaScript 中的字典【英文标题】：multiple and dynamic audio players applied for a dictionary in HTML/JavaScript 【发布时间】：2015-09-07 10:29:45 【问题描述】：我想延长我不久前提出的一个问题： enter link description here
和以前一样，我也在尝试编写一个 html/javascript 文件，该文件将根据动物的给定名称播放动物声音 (.mp3)。
只有在这里，如果用户输入某种动物的名字，它有很多声音，那么结果将是多个音频播放器（标签）可供选择。
例如，如果输入只有一个结果，例如“cow”示例，那么这不是问题，它只打印cow，并为cow启用声音。到目前为止，上述所有工作！
但如果用户在字段中输入“鸟”，程序会在数组（字典）中搜索它。如果它存在于数组中，它会打印不同种类的鸟（“Blackbird”、“Sparrow”、“Cuckoo”）并在不同的音频播放器中为每个鸟启用音频。当然，它应该是动态的并且适合 2、4、5 或任何其他数量的值结果。
所以这就是我想要弄清楚的——如何为每个元素（值）允许多个音频标签归因于同一个键。也就是说，如果“Bird”有 3 个值：“Blackbird”、“Sparrow”和“Cuckoo”，那么每个值都应该出现一个单独的音频播放器标签。
如本例所示：
-Blackbird --> 音频播放器tag1（播放Blackbird.mp3）
-Cuckoo --> 音频播放器tag2（播放Cuckoo.mp3）
-Sparrow --> 音频播放器tag3（播放Sparrow.mp3）
/
这又是一张简化图片（但只有一个音频标签..），用于此示例和下面的 JavaScript/HTML：
我将非常感谢任何帮助！提前致谢！
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>【问题讨论】：
【参考方案1】：您需要将Arrays 插入到您的字典中（animal_sub 对象）。
然后，如果返回的对象是一个数组，则遍历它的所有键并根据需要附加尽可能多的新音频。注意：要检测对象是否是一个数组，我确实使用 Array.isArray() 方法，它是不幸的是，旧浏览器（IE8-）不支持。你可以在外面找到some polyfills。
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>【讨论】：
【参考方案2】：如果我正确理解您的问题：
//var animal_sub = "Bird":"- (Blackbird) "+"\n "+"- (Cuckoo) "+ "\n "+"- (Sparrow) "
// ;
var animal_sub =
bird: [
'Blackbird', 'Cuckoo', 'Sparrow'
]
function animalVoice()
// Get the names from the text field
theAnimal=document.animals.newAnimal.value;
if(theAnimal in animal_sub)
var result = animal_sub[theAnimal];
document.animals.outAnimal.value=result.join(','); //printing the word in the textarea
for(var i = 0; i < result.length; i++)
var a = document.createElement('audio');
document.body.appendChild(a);
a.setAttribute('src', 'audio/animals/' + result[i]);
a.setAttribute('controls', 'controls');
;<p>please enter the animal's name here: </p>
<form name="animals">
<input type="text" name="newAnimal" size ="30" value="bird" />
<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>【讨论】：
是的，您收到了问题并提供了一个很好的替代答案！谢谢！！以上是关于多个动态音频播放器应用于 HTML/JavaScript 中的字典的主要内容，如果未能解决你的问题，请参考以下文章