我正在处理音频文件,每次从服务器上传音频文件时,它都会在用户界面上显示出播放暂停等功能。我使用的是.wav.mp3文件,持续时间接近一个小时。
我正在使用的用于显示波形的库将整个音频文件一次性加载到一个叫 "WAV.MP3 "的文件中。audioBuffer
所以流媒体是没有办法的。
我正在努力寻找一种方法来缓存的。audioBuffer
为了跳过 decodeAudioData()
步完全。
我目前所做的是将 Float32Array
利用 audioBuffer.getChannelData(0)
方法,并转换回 audioBuffer
(这几乎需要同样的时间),并使用 localforage
来使用indexedDB来设置和获取,但它有它的局限性,不能存储的是 Float32Array
对于大型MP3文件(1小时~文件大小约86-100mb)。
我不能直接存储 audioBuffers
在indexedDB中,由于indexedDB对这种格式的存储不兼容。
我需要一种方法来跳过 decodeAudioData()
步,直接消耗 audioBuffer
的文件已经加载一次。
作为一个替代方案,可能值得在视觉波形生成后进行缓存(或在服务器上进行预渲染)。 也许可以将可视化波形栅格化,并存储为本地的pngjpg或从服务器发送。 或者如果是SVG,可以保存这些元素。 或者如果是画布,也许可以保存像素矩阵,这可能会比解码的音频使用更少的内存。
有一件事 <audio>
元素的好处是流媒体和寻找。 浏览器为你做了很多繁重的工作,应该平衡性能优化,而不需要获取和解码整个1hr的音频文件。 如果你能利用原生平台的功能,同时使用视觉组件缓存,这可能是一种绕过本地缓存大小限制的方法。