JS jQuery === 实现钢琴效果

jQuery === 实现了钢琴效果

<!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 ; // 用来表示当前播放到哪一句了,当执行一次函数的时候 证明播放完一句了。

        function play_yiju(yiju){
            if(count === sentences.length){ //当我的计数器=我所有音乐的长度了，证明播放完毕，return
                return;
            }
            count++ // 播放一次count++
            //获取每一句里面的字符，与 div的索引有关系，与audio的索引有关系
            // 获取到每一句 里面的每一个音符


            var notes = yiju.split("");//获取了包括每个音符的数组
            //遍历这个数组
            for(let i = 0 ; i < notes.length;i++){
                //获取索引、、在第一个音符调用自己的audio 后 500毫秒之后再调用第二个，才能形成音乐的效果，所以在这里要使用一个setTimeout 函数
                // 第一个 0 * 500 第二个 1 * 500ms后播放，第三个 2 * 500 ms后播放 //所以时间间隔应该是 500 * i

                setTimeout(function(){
                    //获取对应的div 索引 和 audio的索引
                    var index = notes[i]-1;
                    //加载音频
                    $('audio')[index].load();
                    //播放音频
                    $('audio')[index].play();
                    //给div 加上动画
                    $('div').eq(index).animate({
                        height: 300,
                        top: 100
                    },function(){
                        $('div').eq(index).animate({
                        height:100,
                        top:300
                    })
                    })

                    if(i === notes.length -1){ // 当我的i 等于了最后一个音符，这个时候要开始播放下一段了，间隔500ms
                        (
                            setTimeout(()=> {
                                play_yiju(sentences[count])
                            },500)
                        )

                    }
                    
                },500 * i)
            }
        }




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

 

posted @ 2019-08-02 21:23  小兔子09  阅读(1156)  评论(1)    收藏  举报