7

Пример.


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

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

введите сюда описание изображения

4
  • Так png, jpg - это растровые форматы. При увеличении как раз у вас и будет терятся качество.
    – nick_n_a
    14 мая 2018 в 13:59
  • Теоретически так - нужно узнать среднюю амплитуду на "участке" в "один пиксель", и нарисовать линию от "условного нуля" вверх и вниз по размеру амплитуды. Т.е. задача делится на две - 1. Получить массив амплитуд. 2. Отрисовать массив амплитуд. Теперь вопросы.... на каком языке вы хотите это реализовывать?
    – nick_n_a
    14 мая 2018 в 14:01
  • Файл сжат или не сжат? Тоже важно. Если файл сжат - нужно сначала расжать.
    – nick_n_a
    14 мая 2018 в 14:04
  • С помощью каких технологий - с помощью линий. Обычных линий. Можно считать "векторная графика". Если для web - то svg формат бы был более подходящий.
    – nick_n_a
    14 мая 2018 в 14:06

2 ответа 2

3

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

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

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

1
  • 2
    привели бы хоть какой-то минимальный пример кода, было бы вообще супер
    – ThisMan
    21 дек 2018 в 13:32
2
+500

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

По ссылке описано, как рисуется 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);
}
<div>
    Width: <input type="number" id="width" value="3200">
    Height: <input type="number" id="height" value="200">
</div>
<div>
    <input type="file" id="file">
    <input type="button" value="Show" onclick="processFile()">
</div>
<div style="width: 420px; height: 220px; overflow: auto;">
    <canvas id="canvas" width="400" height="200"></canvas>
</div>
<a href="#" onclick="downloadImage()">Download Image</a>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.