JS jQuery === achieve the effect of the piano

jQuery === realized piano effect
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        div{
            height:100px;
            width:100px;
            position: absolute;
            left:300px;
            top:300px;
            background:red;
        }
        div:nth-of-type(2){
            left:400px;
            background:orange;
        }
        div:nth-of-type(3){
            left:500px;
            background:yellow;
        }
        div:nth-of-type(4){
            left:600px;
            background:green;
        }
        div:nth-of-type(5){
            left:700px;
            background:#0ff;
        }
        div:nth-of-type(6){
            left:800px;
            background:blue;
        }
        div:nth-of-type(7){
            left:900px;
            background:purple;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <audio src="audio/1.mp3"></audio>
    <audio src="audio/2.mp3"></audio>
    <audio src="audio/3.mp3"></audio>
    <audio src="audio/4.mp3"></audio>
    <audio src="audio/5.mp3"></audio>
    <audio src="audio/6.mp3"></audio>
    <audio src="audio/7.mp3"></audio>

    <script src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        //window 点击 ，自动播放
        var music = '1155665 4433221 5544332 5544332 1155665 4433221';
        var sentences = music.split(" ");
        $(window).on('click',function(){
            play_yiju(sentences[0])
        }) 
        Var COUNT = 0; // is used to indicate the current playback where a, a function performed when the time to play out a proof of. 

        function play_yiju (Yiju) {
             IF (COUNT === sentences.length) { // When my counter I = length of all the music, proving finished playing, return 
                return ; 
            } 
            COUNT ++ // play once ++ COUNT 
            // get inside each one of the characters, there is an index div relationship, a relationship with the audio index 
            // get to every one inside every note 


            var Notes = yiju.split ( ""); // acquired include each note array 
            // traverse the array 
            for (the let I = 0; I <notes.length; I ++ ) {
                 //Gets the index ,, in the first note after the second call and then call their own audio after 500 milliseconds, in order to form the effect of the music, so here you want to use a setTimeout function 
                // first second 1 0 * 500 * after playing 500ms, after the third player @ 2 * 500 ms interval so it should be I * 500 

                the setTimeout ( function () {
                     // Get div index corresponding to the index and audio 
                    var index = Notes [I] -1 ;
                     // load audio 
                    $ ( 'audio' ) [index] .load ();
                     // play audio 
                    $ ( 'audio' ) [index] .play ();
                     // to animate the div 
                    $ ( 'div' ). EQ (index) .animate ({ 
                        height: 300 ,
                        Top: 100 
                    }, function () { 
                        $ ( 'div' ) .EQ (index) .animate ({ 
                        height: 100 , 
                        Top: 300 
                    }) 
                    }) 

                    IF (I === notes.length -1) { // when I i is equal to the last note, this time to start playing the next segment, the interval 500ms 
                        ( 
                            the setTimeout (() => { 
                                play_yiju (Sentences [COUNT]) 
                            }, 500 ) 
                        )

                    }
                    
                },500 * i)
            }
        }




    </script>
</body>
</html>
JS jQuery === achieve the effect of the piano

Guess you like
