С помощью каких технологий рисуется звуковая волна?

#javascript #canvas #аудио #mac #web_audio

Пример.



Вообще, интересует, как из аудиофайла получить рисунок волноформы, желательно нужного
размера, в графическом формате (png, jpg).

В аудиоредакторах, например Logic pro x волноформа отображается, но нет возможности
сохранить ее, как рисунок.
Скриншот не лучший вариант, т.к. при уменьшении/увеличении изображения, теряем в
качестве.


    

Ответы

Ответ 1

Технологии рисования звуковой волны делятся на два этапа - сначала из аудиофайла
получают данные для рисования. На JS это делают с помощью WebAudio Api - функции decodeAudioData().

Второй этап - вывод рисунка можно сделать очень по-разному. Пожалуй с помощью тега
canvas будет попроще, но если требуется сохранить изображение в определённом формате,
то есть другой способ - записать данные изображения в требуемом графическом формате
в массив типа blob. Из него их потом можно будет задать, как атрибут src для элемента
img, как буд-то из файла. А если это же самое задать, как атрибут href для ссылки,
то потом кликом по этой ссылке можно будет скачать изображение в папку для загрузок,
указанную в настройках браузера. Так же можно будет сохранить изображение, кликнув
правой клавишей по рисунку и выбрав сохранить изображение.

В этой теме: Получение сырых данных Audio в js во втором ответе есть пример кода
рисования звуковой волны с последующей возможностью сохранения рисунка пока что в формате BMP.


Ответ 2

Аудиоволна в цифровом виде это массив значений (целых, или с плавающей запятой),
отображающих силу сигнала в конкретный момент времени. Что бы нарисовать ее, мы делим
все сэмплы (длину массива) на количество пикселей, для которого будем рисовать картинку.
Совмещая участок массива с каждым пикселем, ищем максимальный и минимальный уровень
сигнала на данном участке времени, и рисуем соответствующую вертикальную линию.

По ссылке описано, как рисуется waveform в Audacity: https://manual.audacityteam.org/man/audacity_waveform.html

Они еще рисуют среднее квадратичное на каждом участке, что соответствует тому, как
громко в целом слышен данный участок.

Ниже примерный код на джаваскрипте, можно запустить прям отсюда, подсунув ему mp3
файл, и скачав картинку в png.



function processFile() {
    var reader = new FileReader();
    reader.onload = function (e) {
        let buffer = e.target.result;
        let ctx = new AudioContext();
        ctx.decodeAudioData(buffer).then(function (audioBuffer) {
            // здесь массив Float32
            // для примера рисуем только первый канал
            let channel = audioBuffer.getChannelData(0);
            var allMin = 0;
            var allMax = 0;                    
            for (var i = 0; i < channel.length; i++) {
                allMin = channel[i] < allMin ? channel[i] : allMin;
                allMax = channel[i] > allMax ? channel[i] : allMax;
            }
            let allAvg = (allMin + allMax) / 2;
            let width = parseInt(document.querySelector('#width').value);
            let height = parseInt(document.querySelector('#height').value);
            let canvas = document.querySelector('#canvas');
            canvas.width = width;
            canvas.height = height;
            let ctx = canvas.getContext('2d');
            ctx.fillStyle = '#CCCCCC';
            ctx.fillRect(0, 0, width, height);
            for (var i = 0; i < width; i++) {
                var min = 0;
                var max = 0;
                let sampleFrom = Math.floor(channel.length * i / width);
                let sampleTo = Math.floor(channel.length * (i + 1) / width);
                var rms = 0;
                // считаем минимум и максимум на участке + среднее квадратичное
                for (var j = sampleFrom; j < sampleTo; j++) {
                    min = channel[j] < min ? channel[j] : min;
                    max = channel[j] > max ? channel[j] : max;
                    rms += channel[j] * channel[j] / (sampleTo - sampleFrom);
                }

                var fromY = Math.floor(height * (allMax - min) / (allMax - allMin));
                var toY = Math.floor(height * (allMax - max) / (allMax - allMin));
                ctx.fillStyle = '#414BD3';
                ctx.fillRect(i, fromY, 1, toY - fromY);

                rms = Math.sqrt(rms);
                var fromY = Math.floor(height / 2 + height * (allAvg - rms) / (allMax
- allMin));
                var toY = Math.floor(height / 2 + height * (allAvg + rms) / (allMax
- allMin));
                ctx.fillStyle = '#777CE3';
                ctx.fillRect(i, fromY, 1, toY - fromY);
            }
        });
    };
    reader.readAsArrayBuffer(document.querySelector('#file').files[0]);
}

function downloadImage() {
    let image = document.querySelector('#canvas').toDataURL('image/png').replace('image/png',
'image/octet-stream');
    let a = document.querySelector('a');
    a.setAttribute('download', 'image.png');
    a.setAttribute('href', image);
}

    Width: 
    Height: 


    
    


    

Download Image