写了一个Javascript小玩意送女朋友（女性朋友(*^_^*)）

青梅竹马的朋友生日到了，

不知道送什么礼物好，

记得她说喜欢一首歌但是在国内没找到过，

果断翻墙给她找了做个音轨效果给她个惊喜吧

CSS代码

*{padding:0;margin:0}
body{font-size:14px;font-family:"微软雅黑"}
a{text-decoration:none;}
ul li{list-style:none}
#box{width:100%;margin:100px auto;height:710px;
    background-image:url("http://demo.cssmoban.com/cssthemes2/cctp_37_pixel/css/images/slide-1.jpg");
    background-size:cover;
    background-repeat:repeat-x;
    position:relative;
}
#box .overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.3);
    transform:scale(1);
    transition:all 1s ease;
    color:#fff;
    text-align:center;
    line-height:200px;
}
#box:hover .overlay{
    background:rgba(0,0,0,0.8);
    transform:scale(0.5);
}   
#musicbox span{width:4px;background:green;height:2px;display:inline-block;
    position:absolute;
    bottom:0;
    left:0;
    z-index:3
}

HTML代码

<a href="javascript:void(0);" onclick="playNext('mp3/2.mp3');">下一首</a>
<div id="audiobox"></div>   
<div id="box">
    <div class="overlay">生日快乐</div>
    <div id="musicbox"></div>
</div>

Javascript代码

window.onload = function(){
    //音乐播放器
    playNext("mp3/1.mp3");
};

var quantouMusic = {
    mark:false,
    init:function(){
        //1:音频上下文===html5+ajax+audioContext   html5+audio+audioContext  
        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
        /*动画执行的兼容写法*/
        window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
        //2:初始化音轨对象
        var audioContext = new window.AudioContext();
        return audioContext;
        },
            parse:function(audioContext,audioDom,callback){
                try{
                    //拿到播放器去解析你音乐文件
                    var audioBufferSouceNode = audioContext.createMediaElementSource(audioDom);
                    //创建解析对象
                    var analyser = audioContext.createAnalyser();
                    //将source与分析器连接
                    audioBufferSouceNode.connect(analyser); 
                    //将分析器与destination连接，这样才能形成到达扬声器的通路
                    analyser.connect(audioContext.destination);
                    quantouMusic.data(analyser,callback);
                }catch(e){
                    
                }
            },
            data:function(analyser,callback){
                if(quantouMusic.mark){
                    var array = new Uint8Array(analyser.frequencyBinCount);
                    analyser.getByteFrequencyData(array);
                    if(callback)callback(array);
                    requestAnimationFrame(function(){
                        quantouMusic.data(analyser,callback);
                    });
                }
            }
        };

        function initBar(){
            //每个元素的宽度
            var mw = 5;
            //盒子的宽度
            var boxDom = document.getElementById("musicbox");
            var bwidth =  boxDom.offsetWidth;
            var cells = Math.floor(bwidth / mw);
            var arr = [];
            for(var i=0;i<cells;i++){
                var spanDom = document.createElement("span");
                spanDom.style.left = (i * mw) +"px";
                arr.push(spanDom);
                boxDom.appendChild(spanDom);
            };

            return arr;
        };

        function playNext(src){
            //初始柱形
            var arr = initBar();
            //创建音乐播放器
            var audio = document.createElement("audio");
            audio.src = src;
            audio.controls="controls";
            //将音乐播放器放入盒子中
            document.getElementById("audiobox").innerHTML = "";
            document.getElementById("audiobox").appendChild(audio);
            //audioContext初始化
            var audioContext = quantouMusic.init();
            //播放解析
            audio.onplay = function(){
                //打开解析播放器分析器开关
                quantouMusic.mark = true;
                //开始解析
                quantouMusic.parse(audioContext,audio,function(array){//array 1024长度与
                    console.log(array);
                    for(var i=0;i<arr.length;i++){
                        arr[i].style.height = array[i]+"px";
                        arr[i].style.background = "linear-gradient(red 5%,green 60%,#fff 100%)"
                    }
                });
            };
            audio.onended = function(){
                quantouMusic.mark = false;
            };
        }

其实前端蛮好玩的(^_^)

转载于:https://my.oschina.net/quantou/blog/738053