HTML5 WebAudioAPI(四)--繪制頻譜圖2

繪制分析器數組所有數據。本文內容，承接上文

1.800寬度繪制

var url='../content/audio/海闊天空.mp3';
if (!window.AudioContext) {
    alert('您的瀏覽器不支持AudioContext');
} else {
    //創建上下文
    var atx = new AudioContext();
    var source = null;
    //使用Ajax獲取音頻文件
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';//配置數據的返回類型
    //加載完成
    request.onload = function () {
        var arraybuffer = request.response;
        atx.decodeAudioData(arraybuffer, function (buffer) {
            //創建分析器
            var analyser = atx.createAnalyser();
            source = atx.createBufferSource();
            //將source與分析器鏈接
            source.connect(analyser);
            //將分析器與destination鏈接，這樣才能形成到達揚聲器的通路
            analyser.connect(atx.destination);
            //將解碼后的buffer數據復制給source
            source.buffer = buffer;
            //播放
            source.start(0);

            //開始繪制頻譜圖
            var canvas = document.getElementById('canvas'),
                cwidth = canvas.width,
                cheight = canvas.height ;
            var ctx = canvas.getContext('2d');
            //定義一個漸變樣式用於畫圖
            var gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(1, '#0f0');
            gradient.addColorStop(0.5, '#ff0');
            gradient.addColorStop(0, '#f00');
            ctx.fillStyle = gradient;
            //繪制頻譜圖
            function drawSpectrum() {
                var array = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(array);
                //清理畫布
                ctx.clearRect(0, 0, cwidth, cheight);
                //只繪制出當前寬度內的線
                /*
                *從頻率分布數據中可以看到數組中大於800的數據都是0 
                */
                for (var i = 0; i < cwidth; i++) {
                    var value = array[i];
                    ctx.fillRect(i, cheight - value, 1, cheight);
                }
                requestAnimationFrame(drawSpectrum);
            }
            requestAnimationFrame(drawSpectrum);
        }, function (e) {
            console.info('處理出錯');
        });

    }
    request.send();    
    //綁定播放按鈕
    $('#playBtn').click(function () {
        var icon = $(this).find('i');;
        icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
        //停止播放
        source.stop();
    });
}

2.1024寬度繪制

var url = '../content/audio/海闊天空.mp3';
if (!window.AudioContext) {
    alert('您的瀏覽器不支持AudioContext');
} else {
    //創建上下文
    var atx = new AudioContext();
    var source = null;
    //使用Ajax獲取音頻文件
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';//配置數據的返回類型
    //加載完成
    request.onload = function () {
        var arraybuffer = request.response;
        atx.decodeAudioData(arraybuffer, function (buffer) {
            //創建分析器
            var analyser = atx.createAnalyser();
            source = atx.createBufferSource();
            //將source與分析器鏈接
            source.connect(analyser);
            //將分析器與destination鏈接，這樣才能形成到達揚聲器的通路
            analyser.connect(atx.destination);
            //將解碼后的buffer數據復制給source
            source.buffer = buffer;
            //播放
            source.start(0);

            //開始繪制頻譜圖
            var canvas = document.getElementById('canvas'),
                        cwidth = canvas.width,
                        cheight = canvas.height - 2;
            ctx = canvas.getContext('2d'),
            gradient = ctx.createLinearGradient(0, 0, 0, 300);
            gradient.addColorStop(1, '#0f0');
            gradient.addColorStop(0.5, '#ff0');
            gradient.addColorStop(0, '#f00');
            var drawMeter = function () {
                var array = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(array);
                ctx.clearRect(0, 0, cwidth, cheight);
                number++;
                if (number > 1000 && number < 1003) {
                    console.info(array);
                }
                if (array[1020] > 0) {
                    console.info(array);
                }
                for (var i = 0; i < array.length; i++) {
                    var value = array[i];
                    ctx.fillStyle = gradient;
                    ctx.fillRect(i, cheight - value, 1, cheight);
                }
                requestAnimationFrame(drawMeter);
            }
            requestAnimationFrame(drawMeter);

        }, function (e) {
            console.info('處理出錯');
        });

    }
    request.send();
    var number = 0;
    //綁定播放按鈕
    $('#playBtn').click(function () {
        var icon = $(this).find('i');;
        icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
        //停止播放
        source.stop();
    });
}

 

更多參考：

HTML5 WebAudioAPI簡介(一)

HTML5 WebAudioAPI-實例(二)

HTML5 WebAudioAPI(三)--繪制頻譜圖