How to generate svg from waveform from a voice message on VKontakte?

Question

JavaScript

The VK API returns voice messages in the form of an array of values ​​called waveform.
In the web version, they are given as SVG (bottom of the picture)

How not too expensive in terms of performance to do the same in JS?

Answer 1

First, understand how the path is formed and what parameters it consists of.
https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...
Next, you can see that a vertical line is being drawn. And after M there is a shift to the right.
How would I do. I would go around the array and add string values ​​\u200b\u200bto the array, which I would then combine.
Here is the code if you want to take a look. The first parameter is waveform and the second I did not understand some number from 127 to 128.

function s(e, t) {
        t = Math.round(t), e.length != t && (e = a.fastResample(e, t));
        for (var n = "", i = 0, r = 0; r < e.length; r++)
            i = Math.floor(10 * e[r] * .95), 0 == i && (i = .5), n += "M" + (3 * r + 1) + "," + (10 - i) + "v" + 2 * i + "Z";
        return '<svg class="audio-msg-track--wave" width="' + 3 * e.length + 'px"><path d="' + n + '"></path></svg>'
    }

function a.fastResample(e, t) {
        var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : "peak";
        return new l({
            srcSampleRate: e.length,
            dstSampleRate: t,
            normalizeAlgorithm: n,
            truncateTo: 0
       }