【H5 音樂播放實例】第五節 音軌制作

我就不瞎比比了，直接上代碼吧：

//獲取隨機顏色
function randomColor(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    return "rgb("+r+","+g+","+b+")";//IE7不支出rgb
};

window.onload = function(){

    //給音樂播放器（audio）添加一個timeupdate時間
    document.getElementById("music").ontimeupdate = function(){

        var currentTime = Math.floor(this.currentTime); //獲取當前時間

       
        var m = parseInt(currentTime / 60);//分鐘
        var s = parseInt(currentTime % 60);//秒鐘
        var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化

        //console.log(time); //打印出來看看

        // 百分比 = 當前時長 ÷ 總時長 × 100%
        var total = this.duration;//總時長
        //console.log(currentTime + '=======' + total);
        //console.log( Math.floor(currentTime / total * 100) + "%" );


        document.getElementsByClassName("progress")[0].style.width = Math.floor(currentTime / total * 100) + "%" ;

    }

    //音軌制作

    var box = document.getElementsByClassName('mbox')[0];  //獲取承載音軌的父盒子

    var allWidth = box.clientWidth;//獲取承載音軌盒子的寬度

    var itemWidth = 5;


    var len = (allWidth / itemWidth );     //計算一共出現多少條音軌 

    var html = '';                  //動態拼接音軌

    for(var i = 0;i < len ; i ++){
        html+="<span class='item' style='left:"+(i * itemWidth)+"px;background:"+randomColor()+";'></span>";
    }

    box.innerHTML += html;           //添加音軌

    var audio = document.getElementById("music");

    //1:音頻上下文
    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();

    var flag = null; //控制是否解析的開關變量

    //拿到播放器去解析音樂文件
    var audioBufferSouceNode = audioContext.createMediaElementSource(audio);

    audio.onplay = function(){
        flag = true;
        //創建解析對象
        var analyser = audioContext.createAnalyser();
        parse(analyser,function(array){
            console.log(array); //打印解析出來的音軌節點
            for(var i = 0;i < len ; i ++){
                document.getElementsByClassName('item')[i].style.height = array[i] + 'px';
            }
        });
    }

    audio.onpause = function(){
        for(var i = 0;i < len ; i ++){
            document.getElementsByClassName('item')[i].style.height = 1 + 'px';
        }
        flag = false;
    }


    function parse(analyser,callback){
        if(!flag){
            return;
        }
        audioBufferSouceNode.connect(analyser); 
        analyser.connect(audioContext.destination);
        var array = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        if(callback) callback(array);
        requestAnimationFrame(function(){
            parse(analyser,callback);
        });
    }

}

css:

.item {
    position:absolute;
    width:5px;
    height:1px;
    left:0px;
    bottom:0px;
    opacity: 0.5;
}

效果：

總結思路

1.獲取mbox的寬度，然後動態計算一共有多少條音軌。

2.用H5的音頻解析器去解析當前音樂播放的各頻率的音高

3.用這些音高去給每一條音軌動態地設置高度height