个人中心
gpt4 book ai didi

javascript - HTML/JavaScript 中应用于字典的多个动态音频播放器

转载 作者：行者123 更新时间：2023-12-02 15:43:03 27 4
gpt4 key购买 nike

我想扩展一下我不久前问过的一个问题: 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:

我非常感谢任何帮助!提前致谢!

enter image description here 

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/

27 4 0
文章推荐： javascript - 如何从页面执行定义到我的页面中包含的 .js 文件中的 JavaScript 函数？
文章推荐： dom - 我需要元素的完整 dom 节点路径
文章推荐： md5 - BSD md5 与 GNU md5sum 输出格式？
文章推荐： javascript - 如何使用nodejs将图像文件夹从网站下载到本地目录
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com