Console.log 与数组不匹配

Question

按下乐器声音按钮播放声音。我已尝试匹配 console.log 上的每个数组元素，但没有成功。

为什么“console.log”与数组匹配有时不匹配？我的意思是，console.log 有时会显示与听到的声音相对应的乐器名称，有时会显示错误的名称。第一个“console.log”是唯一与播放的声音匹配的。

   
    let index;
   
    let sounds = ["DB.WAV","CLA.WAV","TBN.WAV","REC.WAV","TRI.WAV"];
    oldSounds = [];

    let playSounds = function () {
    index = Math.floor(Math.random() * sounds.length);
     
        thisSound = sounds[index];

        oldSounds.push(thisSound);
        sounds.splice(index, 1);

        if (sounds.length < 1) {
            sounds = oldSounds.splice(0, oldSounds.length);
        }

  $("#element").html("<audio autoplay><source src=\"" + thisSound + "\" type=\"audio/mpeg\"><embed src=\"" + thisSound + "\" hidden=\"true\" autostart=\"true\" /></audio>"); 
    
    
        
            if(index === 0) {
             console.log(`Double Bass`);
        } else if(index === 1) {
            console.log(`Clarinet`);
        }else if(index === 2) {
            console.log(`Trombone`);
        }else if(index === 3) {
            console.log(`Recorder`);
        }else if(index === 4) {
            console.log(`Triangle`);}
}
</script>

<div class="wrapper clearfix">
        <div class="player-panel">
                
                 <button class="btn-answer"><i class="ion-ios-download-outline"></i>Answer</button>
            <div onclick="playSounds()">
                <button class="btn-play"><i class="far fa-play-circle"></i>Instrument Sound</button>
            </div>
                <input type="text" placeholder="Instrument name" class="instrument">
                <div id="element"></div>
       </div>
</div>

Answer 1

我想我终于明白了!!!

<html>
    <head>
        <title>lkl</title>
    </head>
    <body>

        <div class="wrapper clearfix">
            <div class="player-panel">
                    
                <button class="btn-answer"><i class="ion-ios-download-outline"></i>Answer</button>
                
                <div onclick="playSounds()">
                    <button class="btn-play"><i class="far fa-play-circle"></i>Instrument Sound</button>
                </div>
                
                <input type="text" placeholder="Instrument name" class="instrument">
                <div id="element"></div>
           </div>
        </div>

    <script>         
    let index;
    let sounds = ["DB.WAV","CLA.WAV","TBN.WAV","REC.WAV","TRI.WAV"];
    oldSounds = [];

    let playSounds = function () {
        index = Math.floor(Math.random() * sounds.length);
        
        console.log(sounds[index]);

        if(index == sounds.indexOf('DB.WAV')) {
            console.log(`Double Bass`);
        } else if(index == sounds.indexOf('CLA.WAV')) {
            console.log(`Clarinet`);
        }else if(index == sounds.indexOf('TBN.WAV')) {
            console.log(`Trombone`);
        }else if(index == sounds.indexOf('REC.WAV')) {
            console.log(`Recorder`);
        }else if(index == sounds.indexOf('TRI.WAV')) {
            console.log(`Triangle`);
        }


        thisSound = sounds[index];

        oldSounds.push(thisSound);
        sounds.splice(index, 1);

        //checking if the code of avobe is working
        console.log(oldSounds);
        console.log(sounds);

        if (sounds.length < 1) {
            sounds = oldSounds.splice(0, oldSounds.length);
        }
    }


    
      </script>
    </body>
</html>

如果这不是您所期望的，请告诉我。

$("#element").html("<audio autoplay><source src=\"" + thisSound + "\" type=\"audio/mpeg\"><embed src=\"" + thisSound + "\" hidden=\"true\" autostart=\"true\" /></audio>"); 行我要删除它，因为它给我一个错误。把它贴回去就可以了（我希望xd）

（顺便说一句，代码仅在按下乐器声音按钮时运行（我是这样理解的（如果不是，请告诉我，我会尝试修复它）））

Console.log 与数组不匹配

Console.log does not mach to array

arrays

audio

console.log