- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想扩展一下我不久前问过的一个问题: enter link description here
和以前一样,我还尝试编写一个 HTML/JavaScript 文件,该文件将根据给定的动物名称播放动物声音 (.mp3)。
仅在这里,如果用户输入某种有多种声音的动物的名称,那么结果将是多个音频播放器(标签)可供选择。
例如,如果输入只有一个结果,例如“cow”示例,那么这不是问题,它只会打印“cow”并启用“cow”的声音。到目前为止,上述所有内容都有效!
但是,如果用户在字段中输入“Bird”,程序就会在数组(字典)中搜索它。如果数组中存在,它会打印不同种类的鸟(“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>
最佳答案
您需要插入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>
关于javascript - HTML/JavaScript 中应用于字典的多个动态音频播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32436491/
我写了几个命令来转换数据框,但我想将我写的代码简化为四个部分。第 1,2 和 3 部分用于计算第 1、2 和 3 列(计算每列重复值的次数,并完成 0 和三列最大值之间的缺失数)。第四部分是加入前面的
我试图理解应用于函数的类型参数。 我想在下面的方法中使用通用类型,但为了我的理解使用 String 和 Int。 当我如下定义一个函数时 def myfunc[Int](f:String => I
我有一个像下面这样的 DIV: // link to some js .js 在 div 中呈现最新的文章摘要。然而,它在 Calibri
我在 GridView 中有以下列,一列是日期,另一列是美元金额。我应用了格式并将 HtmlEncode 属性设置为 false,但值仍然未格式化: 这就是这些值在 GridView 中的显示方式
假设我已经定义了这些类型: data Km = Km Float deriving (Show, Eq) data Mile = Mile Float deriving (Show, Eq
我有一个关于 value in context 的小问题。 取 Just 'a',所以在这种情况下 Maybe 类型上下文中的值是 'a' 采用[3],因此在这种情况下,[a] 类型上下文中的值为3
require(quantmod) require(PerformanceAnalytics) getSymbols('INTC') x<- monthlyReturn(INTC) rollapply
我正在使用 VBA 对“已应用字轨更改”文档进行更改。 红色段落结束标记是插入段落结束标记。(打开“跟踪更改”> 将光标放在第一段末尾 > 按 Enter > 插入新段落内容 > 格式风格不同) 我需
考虑以下代码: class A{ my_method(const B& b){ import_something_from_c(this, b.getC()); // does some
我正在为自定义 Material 分配图像。分配的图像看起来有点像素化,类似于此图像 我已经将抗锯齿设置为 4 倍。我该如何解决这个问题? 最佳答案 尝试将 Material 的 mipFilter
我将样式应用于 元素和 元素。是否可以在 上使用样式元素应用于 似乎不遵循 CSS 特异性的通常规则。这是真的吗? 示例:http://jsfiddle.net/59dpy/ 尝试将所有背景色设为红
有没有办法将垂直虚线边框应用于 没有他们(边界)合并?我说的是附图上的东西——有 3 个 这里的元素,每个元素包含 2 的。如果我申请 border-right: 1px dashed black到
当我在 CSS 中对主体应用线性渐变时,如下所示 body { background: linear-gradient(#10416b, black); } 它不会将它应用到整个网页,而是将它应用到页
当我将边框和边框半径应用于 td 时,内半径是一个直 Angular ,根本不是圆的。 最佳答案 问题很可能是背景不透明的子元素会剪掉边框的内半径。 要解决此问题,您可以在 td 上应用 overfl
基本上,我有一个小的 SVG,它使用一个组来定义一个可重用的符号。该组包括我想在 CSS 中设置动画的路径。我面临的问题是只有“原始”元素应用了 CSS,“使用过”的元素没有。 .player_arr
宽度属性在这里不起作用: td { height: 50px; width: 25px; border: 1px
我想要一个函数(例如)在两种情况下输出 Map 的所有值: Map map1 = new HashMap(); Map map2 = new HashMap(); output(map1, "1234
我被要求将我们应用中的警报对话框的外观与应用主题使用的外观相匹配。 我设法将样式应用于应用程序中的所有警报对话框,并将其用作应用程序主题的一部分,但有些情况下样式应用不正确。 例如,当警报对话框包含“
我有一个 CGPath(由 UIBezierPath 创建),我想通过应用 CGAffineTransformScale 将其缩放到我想要的任何大小。 这会影响我的绘图质量(在转换为图像时)吗?如果不
您好,我已经在 vector 上使用了一些 STL 算法,例如 find_if、count_if、sort、push_back 等。现在我想为所有容器对象( vector 、列表、映射、集合)制作一个
我是一名优秀的程序员,十分优秀!