audio2wave/lib/Drawer.js

draw wave in canvas from audio element source

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { ALIGN } from './interface/IConfig';
var DEFAULT_CONFIG = {
    color: '',
    barWidth: 2,
    align: ALIGN.LEFT,
    xSpace: 2
};
var Drawer = /** @class */ (function () {
    function Drawer(container, fftSize, config) {
        var _this = this;
        this.height = 0;
        this.width = 0;
        this.drawing = false;
        this.heightScale = 0;
        this.run = function () { };
        this.innerRun = function () {
            _this.beforeDraw();
            // TODO draw work
            _this.draw();
            _this.animationFrameId = requestAnimationFrame(_this.run);
        };
        this.config = (__assign(__assign({}, DEFAULT_CONFIG), config));
        this.container = container;
        this.fftSize = fftSize;
        this.init();
    }
    Drawer.prototype.init = function () {
        var _this = this;
        this.canvas = document.createElement('canvas');
        this.context = this.canvas.getContext('2d');
        this.setCanvasSize();
        this.container.appendChild(this.canvas);
        this.proxySetSize = function () {
            _this.setCanvasSize();
        };
        window.addEventListener('resize', this.proxySetSize);
    };
    Drawer.prototype.setCanvasSize = function () {
        if (this.config.canvasWH) {
            this.height = this.canvas.height = this.config.canvasWH.height;
            this.width = this.canvas.width = this.config.canvasWH.width;
        }
        else {
            var styleInfo = getComputedStyle(this.container);
            this.height = this.canvas.height = parseFloat(styleInfo.height);
            this.width = this.canvas.width = parseFloat(styleInfo.width);
        }
        this.heightScale = (this.height / 2) / ((this.fftSize / 2) - 1);
        // translate x,y origin to canvas y alias middle(keep x old)
        this.context.translate(0, this.height / 2);
    };
    Drawer.prototype.start = function () {
        if (!this.drawing) {
            this.run = this.innerRun;
            this.run();
            this.drawing = true;
            return Promise.resolve();
        }
        return Promise.reject('Drawer still drawing');
    };
    Drawer.prototype.stop = function () {
        if (this.drawing) {
            cancelAnimationFrame(this.animationFrameId);
            this.run = function () { };
            this.drawing = false;
            return Promise.resolve();
        }
        return Promise.reject('Drawer was stoped');
    };
    Drawer.prototype.draw = function () {
        this.context.clearRect(0, -(this.height / 2), this.width, this.height);
        if (this.config.color) {
            this.context.fillStyle = this.config.color;
        }
        else {
            this.context.fillStyle = "rgb(" + 85 + " 8 156)";
        }
        this.context.fillRect(0, 0, this.width, 1);
        var length = this.waveData.length;
        for (var index = 0, x = 4; index < length; index++) {
            var byteFrequenceData = this.waveData[index];
            var Y = byteFrequenceData * this.heightScale;
            var negativeY = -Y;
            // this.context.fillStyle = this.config.color;
            if (this.config.color) {
                this.context.fillStyle = this.config.color;
            }
            else {
                this.context.fillStyle = "rgb(" + index + " 8 156)";
                // this.context.fillStyle = `rgb(${85} 8 156)`;
            }
            this.context.fillRect(x, negativeY, this.config.barWidth, 2 * Y);
            x += this.config.barWidth + this.config.xSpace;
        }
    };
    Drawer.prototype.destroy = function () {
        cancelAnimationFrame(this.animationFrameId);
        this.container.removeChild(this.canvas);
        this.canvas = null;
        this.context = null;
        window.removeEventListener('resize', this.proxySetSize);
        this.proxySetSize = function () { };
        return Promise.resolve();
    };
    return Drawer;
}());
export { Drawer };
//# sourceMappingURL=Drawer.js.map