Web Audio API - 使用以及根據時間設定變化的頻譜圖

參考

實作

使用 Canvas 繪圖

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div id="example">
    <audio id="player" class="hideIfNoApi" controls="controls" src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3" crossorigin="anonymous"> </audio>

    <div id="visualisation" class="hideIfNoApi"> </div>
</div>

<div id="visualizer_wrapper">
    <canvas id='canvas' width="702" height="350" style="border: 1px #eee solid;"></canvas>
</div>

<script>
    $(function () {
        context = new (window.AudioContext || window.webkitAudioContext)();
        
        // Create the analyser
        var analyser = context.createAnalyser();
        
        // https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize
        analyser.fftSize = 64;
        
        // Get the frequency data and update the visualisation
        function update() {
            var canvas = document.getElementById('canvas'),
                    cwidth = canvas.width,
                    cheight = canvas.height - 2,
                    meterWidth = 20, //width of the meters in the spectrum
                    gap = 2, //gap between meters
                    capHeight = 2,
                    capStyle = '#fff',
                    meterNum = 702 / (10 + 2), //count of the meters
                    capYPositionArray = []; //store the vertical position of hte caps for the preivous frame
            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);
                
                for (var i = 0; i < array.length; i++) {
                    var value = array[i];
                    if (capYPositionArray.length < Math.round(meterNum)) {
                        capYPositionArray.push(value);
                    }
                    ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
                    ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);
                }
                requestAnimationFrame(drawMeter);
            };
            
            requestAnimationFrame(drawMeter);
        }

        // Hook up the audio routing...
        // player -> analyser -> speakers
        // (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)
        $("#player").bind('canplay', function() {
            var source = context.createMediaElementSource(this);
            source.connect(analyser);
            analyser.connect(context.destination);

            update();
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>

<html>

</head>

<body>

</div>

</div>

$(function () {

context = new (window.AudioContext || window.webkitAudioContext)();

// Create the analyser

var analyser = context.createAnalyser();

// https://developer.mozilla.org/zh-TW/docs/Web/API/AnalyserNode/fftSize

analyser.fftSize = 64;

// Get the frequency data and update the visualisation

function update() {

var canvas = document.getElementById('canvas'),

cwidth = canvas.width,

cheight = canvas.height - 2,

meterWidth = 20, //width of the meters in the spectrum

gap = 2, //gap between meters

capHeight = 2,

capStyle = '#fff',

meterNum = 702 / (10 + 2), //count of the meters

capYPositionArray = []; //store the vertical position of hte caps for the preivous frame

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);

for (var i = 0; i < array.length; i++) {

var value = array[i];

if (capYPositionArray.length < Math.round(meterNum)) {

capYPositionArray.push(value);

}

ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look

ctx.fillRect(i * 22 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);

}

requestAnimationFrame(drawMeter);

};

requestAnimationFrame(drawMeter);

}

// Hook up the audio routing...

// player -> analyser -> speakers

// (Do this after the player is ready to play - https://code.google.com/p/chromium/issues/detail?id=112368#c4)

$("#player").bind('canplay', function() {

var source = context.createMediaElementSource(this);

source.connect(analyser);

analyser.connect(context.destination);

update();

});

</script>

</body>

</html>

analyser.fftSize
設定值除以 2 就是陣列取樣數，預設 2048
analyser.getByteFrequencyData(Uint8Array(analyser.frequencyBinCount));
數值在 0 - 255 ，沒聲音為 0
analyser.getByteTimeDomainData(Uint8Array(analyser.frequencyBinCount));
數值在 0 - 255 ，沒聲音為 128
requestAnimationFrame 根據瀏覽器設定(一般來說是 60fps) 更新
能量條的高度是根據 0-255 所繪製，所以如果要增減就必須調整 analyser.getByteFrequencyData(array) 的 array 值

1,022 total views, 1 views today

Web Audio API - 使用

參考

實作

Related Post

發佈留言

Web Audio API - 使用 以及根據時間設定變化的頻譜圖

參考

實作

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

發佈留言

Web Audio API - 使用