绘制音频波形图 android 音频波形gif

转载

mob64ca1402a190 2023-11-09 07:22:51

文章标签 绘制音频波形图 android ffmpeg json 数据加载 文章分类 Android 移动开发

在绘制大音频波形的场景（目前只支持wav格式），急着用的同学点这里，如果有问题可以联系我，我会尽快修复。github: github.com/CofeeWithRo…

效果图

传统的音波图渲染流程是 ajax完整加载音频，使用audioContext解码完整的音频，下载解码后的数据使用canvas绘制，这种方式当音频较小时是没有问题，但遇到超大音频（超过100M）时会出现从加载到渲染需要很长的时间（3~8）s。

我们是否能够从下载到绘制逐步地进行，从而做到既不会因占用大量的内存与集中的大量数据绘制造成卡顿，又有快速的响应（用户可以看到加载绘制的过程）。下面主要从下载、解码、绘制三个方面来研究其实现的可行性。

增量的数据下载

XHR 与 fetch

const xhr  = new XMLHttpRequest();
    xhr.responseType = 'arraybuffer'; 
    xhr.onprogress = data => {
        console.log( 'data: ',data );
        console.log('onprogress response: ', xhr.response && xhr.response.byteLength);
    }
    xhr.onloadend = data => {
        console.log('load end..');
    }
    xhr.open('get','/source/test.wav' );
    xhr.send();
复制代码

以上是使用xhr获取音频文件，只有在最后一次的onprogress回调中，获取到完整的数据，不能增量的获取数据，达到我们增量的绘制目的。

fetch

fetch API支持对管道的管道操作与取消. 看下面的例子：

fetch('/source/test.wav').then( (val: Response) => {
        if(val.body){
            // 从Response中获取可读流的reader，用于从管道中读取数据。
            const reader: ReadableStreamReader =  val.body.getReader();
            readData(reader);
        }
    })
    
    function readData(reader: ReadableStreamReader){
        // 从管道中读取数据。
        reader.read().then(data => {
    
            if(!data.done){
                // data.value 为一个Uint8Array.
                console.log(data.value.byteLength);
                // 若还有数据，继续读取。
                readData(reader);
            }
        })    
    };
复制代码

fetch 返回的 Promise中返回的是一个Response对象，最终我们可以在Response的body.getReader() 获取到一个ReadableStreamReader ，通过该对象我们可以读取网络管道中的数据片段，以满足我们增量渲染数据的需求。ReadableStreamReader 的read对象可以获取一个返回值包含ArrayBuffer对象的Promise. 自此，就可以增量的从网络管道中获取数据。