移动html<；音频>；及<；按钮>；元素转换为JavaScript for循环_Javascript_Html_For Loop_Element

移动html<；音频>；及<；按钮>；元素转换为JavaScript for循环

javascript html for-loop

移动html<；音频>；及<；按钮>；元素转换为JavaScript for循环,javascript,html,for-loop,element,Javascript,Html,For Loop,Element,我在一份大学练习表中被要求将和元素从html移到JavaScript for循环中，因为显然，编辑播放器会更容易。我一直想这么做，但我似乎无法让它工作。如果有人能给我指出正确的方向，我将不胜感激谢谢, 阿尔奇 <!DOCTYPE HTML> <html> <head> <title>Drum sounds with audio tags</title> <style>

我在一份大学练习表中被要求将和元素从html移到JavaScript for循环中，因为显然，编辑播放器会更容易。我一直想这么做，但我似乎无法让它工作。如果有人能给我指出正确的方向，我将不胜感激

谢谢,

阿尔奇

<!DOCTYPE HTML>
<html>
    <head>
        <title>Drum sounds with audio tags</title>

        <style>
            div#audioElements {
                display: block;
                background-color: rgb(100,250,90);
            }

            div#padArea {
                float: top;
                height: 50%;
                background-color: rgb(220,100,20);
            }

            button.drumPad {
                height: 30%;
                margin: 3px;
                background-color: rgb(190,100,180);
                font-size: 6em;
            }
        </style>
    </head>
    <body>
        <h1>Drum sounds with audio tags</h1>

        <div id="audioElements" width="100%">
            <h2>Audio elements</h2>
            <audio controls id="audio1"></audio>
            <audio controls id="audio2"></audio>
            <audio controls id="audio3"></audio>
            <audio controls id="audio4"></audio>
        </div>

        <div id="padArea" width="100%">
            <h2>Trigger pads</h2>
            <button id="pad1" class="drumPad">1</button>
            <button id="pad2" class="drumPad">2</button>
            <button id="pad3" class="drumPad">3</button>
            <button id="pad4" class="drumPad">4</button>
        </div>


        <script>
            var players = []; // empty array
            var pads = [];


             for(var i=1; i<=4; i++) {

                pads[i] = document.getElementById("pad" + i);
                pads[i].addEventListener("mousedown", padActions);
             players[i] = document.getElementById("audio" + i);
            players[i].src = "sound" + i + ".mp3";
            players[i].load();
             }

            /*
             padActions() callback function triggers an audio player in
             the players[] array depending on which trigger pad activated
            */
            function padActions(event){
                var padThatWasClicked = event.target;
                var padIndexInArray = pads.indexOf(padThatWasClicked);

                players[padIndexInArray].currentTime = 0; //rewind audio
                players[padIndexInArray].play();
            }

            </script>

    </body>
</html>


带音频标签的鼓声
分区#音频元素{
显示：块；
背景色：rgb（100250,90）；
}
分区#焊盘区{
浮动：顶部；
身高：50%；
背景色：rgb（220100,20）；
}
巴顿·德拉姆帕德{
身高：30%；
保证金：3倍；
背景色：rgb（190100180）；
字号：6em；
}
带音频标签的鼓声
音频元素
触发垫
1.
2.
3.
4.
var players=[]；//空数组
var-pads=[]；
对于（var i=1；i一个起点是将音频文件的名称添加到数组中（例如，var clips=['audio1.mp3'，'audio2.mp3']
）
通过这种方式，您可以在clips.length
中循环，而不是在1和4之间编写for循环。这样，如果有四个以上的片段，您就不必更改该行代码
但是在循环内部，您仍然依赖于这样一个事实，即将有HTML标记匹配，例如，ID为pad4
的按钮。如果您添加更多音频剪辑，这可能仍然不是真的
因此，您可以使用循环来创建它，而不是希望
元素在那里！查看document.createElement（）
（文档）
祝你好运