Android 音频可视化:频谱特效的探索与实践

这篇具有很好参考价值的文章主要介绍了Android 音频可视化:频谱特效的探索与实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

音频可视化,一言以蔽之,就是声音到图像的转换。

随着视觉工业时代的到来,用户逐渐重视产品的极致体验,在市场上诸多优秀的音乐类APP中,频谱动效 是一个经典的应用场景:

Android 音频可视化:频谱特效的探索与实践,android,音视频

图片来源:咪咕音乐

本文以 Android 端为例,从音频信号 数据的获取数据的处理常见问题 几方面进行叙述,针对Android端音频可视化的实现,提供一个通用可行的方案。

一、频谱数据的获取

1.时域与频域

绘制频谱动效,首先要获取歌曲对应的旋律,这里需要先对信号处理中 时域频域 的概念有一个基本的认识:

时域(时间域) 是描述数学函数或物理信号对时间的关系,例如一个信号的时域波形可以表达信号随着时间的变化;
频域(频率域) 是描述信号在频率方面特性时用到的一种坐标系,纵轴是该频率信号的幅度,也就是通常说的频谱图。

对于我们而言,时域虽然是真实存在,但信号的表达 晦涩难懂;而频域相比前者则更加 简洁直观

因此,开发者需进行时域转频域的操作,这里我们借助 傅里叶变换, 将讯号分解成振幅分量和频率分量,将函数的 时域(红色)频域(蓝色) 相关联:

Android 音频可视化:频谱特效的探索与实践,android,音视频

借此我们达到了从频域对模拟信号观察的目的,并将频谱展现给用户,从而提升用户听歌时沉浸式的体验感。

接下来,笔者针对时域转频域中使用到的 FFT算法(非常重要) 进行简单的介绍。

2.FFT-快速傅里叶变换

针对信号分析的最基本方法,称为 离散傅里叶变换(Discrete Fourier Transform,下称DFT) 傅里叶分析方法,它把信号从时域变换到频域,进而研究信号的频谱结构和变化规律。

Android 音频可视化:频谱特效的探索与实践,android,音视频

在某些复杂场景下,比如上图对应的有限长序列,使用 DFT 计算量会很大,很难实时地处理问题,因此我们引出了 快速傅里叶变换 (fast Fourier transform, 下称FFT) 算法,其将 DFT 的运算量减少了几个数量级。

引入了这个概念,读者可以理解,为什么总是需要通过FFT算法,拿到对应的数据输出才能完成绘制,为了便于理解,我们将对应输出的 byte[] 称为fft,就和下面Android官方的API声明的一样:

public int getFft(byte[] fft) {
  //...
}

3.原生API的优缺点

FFT算法复杂且易出错,Android 官方也提供了简单的 API —— Visualizer 类便于开发者调用,只需要传入 audioSessionID ,系统就可以自动捕获当前设备在播音频的信号,完成 fft 的转换后,再回调给开发者,开发者直接进行频谱的绘制即可。

简单概括其优势有:

  • 1.系统自动完成音频信号幅度的采样,无需适配,适用于任何原生和三方播放器;
  • 2.系统自动完成 fft 转换,开发者通过回调拿到数据直接绘制,上手成本低。

因此,原生 Visualizer API 理所当然成为了实现方案的首选,但随着实现的深入,更多问题不断暴露出来:

  • 1.音量为0时,回调函数不会返回 fft 数据;
  • 2.类本身只是一个API的壳,真正实现都是在 native 层,难以针对性进行修改和扩展;
  • 3.在某些特殊机型有兼容性问题;
  • 4.由于 Visualizer API 内部是从当前系统获取音频信号,因此使用前 必须授予麦克风权限,否则没有任何返回。

在实际开发开发中,上述缺陷都是产品无法接受的,尤其是 3、4 两条,随着近两年国家推行一系列用户隐私保护的政策,「展示UI特效需要麦克风权限」 是无法说服任何人的,综上所述,原生Visualizer API 方案被果断抛弃。

4.重整思路

现在又回到了原点,我们需要自定义 Visualizer

具体的思路是,在数字化音频时,我们会对信号幅度进行频繁的采样,这称为 脉冲编码调制 (下称PCM)。正如上文对 时域 的描述,振幅随之被量化,但并不直观,因此,我们需要针对 PCM 信号进行结构,即 FFT 算法。

——之前这一切都是交由原生Visualizer API自动完成的,现在由我们自己控制和实现,最终,我们得到了每个时刻声音的频率,并将这些幅度在页面上展示给用户。

5.底层实现

如何获取当前音频的 PCM 数据?这里可以让底层播放器提供,社区比较完善的三方播放器(ijkplayerExoPlayer)等都提供了对应支持,开发者可以根据自身业务调用API或修改源码。

我们不断获得一帧帧的 PCM 数据,通常这是一个 ByteBuffer ,这些 byte 可能来自多个 channel,简化处理可以取所有 channel 的平均值,这之后拿到这些数据进行傅里叶变换。

宏观上理解傅立叶变换,即 N 个时域点变换为 N 个频域点,瓜分采样频率 Fs,频率间隔为△f=Fs / N,根据奈奎斯特采样定理,采样频率是信号最高频率的2倍以上,故有效频点数为N / 2,函数如下:

Android 音频可视化:频谱特效的探索与实践,android,音视频

如上文所说,计算机直接进行傅立叶变换复杂度为 O(N^2),一般是采用快速FFT算法,复杂度降低为 O(N*LogN),我们无需手动实现,社区中已有成熟稳定的 三方库 提供这样的支持。

此外,傅立叶变换后的频域点为复数域,不方便做可视化,处理方式是忽略相位信息,仅取(实数)幅度信息。

6.性能优化

即使 FFT 算法相比较 DFT 有一定的优化,但实际执行的性能消耗依然不能忽视,如何针对这一点进行优化?

网易云音乐在 这篇文章 也有提到这个思路:首先,将FFT 算法执行放在播放进程的 native 层中,通过 JNI 调用回调给 java 层后,再将结果数据跨进程传输给主进程,再进行后续的绘制操作:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aTcOih9w-1689157101651)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b367b8546ec142c7be6253ed65636c9b~tplv-k3u1fbpfcp-watermark.awebp)]

除此之外,由于 PCM 每一帧都包含大量的数据,最初单次的结果 fft 是一个长度为 4096float[]——我们可使用这些频率立即绘制 4096 个条形图,但实际中根本没有这样的场景。

因此,在 FFT 算法执行前,我们可以对不同频段进行初始数据的 二次采样

根据声学,人耳能容易的分辨出100hz200hz的音调不同,但是很难分辨出8100hz8200hz的音调不同,尽管它们各自都是相差100hz,可以说频率和音调之间的变化并不是呈线性关系,而是某种对数的关系。

因此,我们音频的采样以 低频段 为主, 高频段为辅,详细可参考 维基百科。

这样,在 FFT 算法执行时,单次输入的数据源的大小从初始的 4096 降低到了 64128,算法执行速度大幅提升。

二、数据的处理与绘制

拿到 fft 数据后,接下来针对数据各个阶段遇到的问题,分步进行处理。

1.平均算法

首先,因为数据是从不同频段的不同采样点进行获取,因此单个连续数据区间内会存在若干个数据突然很高或很低的情况,这里对数据进行简单的处理,进行 加权平均

Android 音频可视化:频谱特效的探索与实践,android,音视频

2.拟合曲线

对于某一帧的数据而言,即使经过简单的加权平均处理,对文章开头中间的柱状特效而言,展示效果依然不佳,如何将参差不齐的数据经过 平滑处理,形成视觉上的包络效果?

这里我们引入 曲线拟合,顾名思义,就是用连续曲线近似地刻画或比拟平面上离散点组所表示的坐标之间的函数关系的一种数据处理方法。

最小二乘法 是解决曲线拟合问题最常用的方法。其一般形式是:

Android 音频可视化:频谱特效的探索与实践,android,音视频

引入之后,离散化的数据点形成一条光滑的曲线,能明显的提升用户的观感体验。

3.定义衰减系数

经过以上几步处理,单帧效果得到明显改善,但随着划入时间维度之后,相邻两帧的展示效果有明显的跳跃性,对于用户而言就好像掉帧一样。

这里我们引入 衰减系数,每一帧数据绘制前,与上一帧数据进行对比,当单个频率点数据发生较高的抖动,通过衰减系数对抖动进行 抑制

三、其它问题

1.声音和特效不同步问题

这个问题通过gif图是无法体现的,但用户在听音乐时会立即注意到:频谱特效跳跃的太早了,总是比我们实际听到的音乐节奏快了一步。

导致这个现象是因为自定义的播放器在数据传递给 Android 系统的 AudioTrack 之前,我们已经在拿处理好的 fft 进行绘制了,而播放器内部有自定义的缓冲区,这会导致视觉效果领先于音频效果,导致延迟输出。

解决这个问题也非常简单,只需针对PCM数据,参考缓冲区相关源码,再定义一份对应的ByteBuffer即可。

2.绘制方案

对于频谱绘制的技术方案,可以选择系统的 Canvas API 进行自定义View,将数据的相关运算处理在CPU中执行。

考虑到频谱动效本身偏 UI 的展示,且与用户没有直接、复杂的交互,以及性能方面的思量,最终使用了 OpenGL ,并将数据运算相关处理通过矩阵变换,直接交给GPU计算并渲染。

小结

本文针对 Android 端频谱特效实现的整体流程进行概括性的描述,由于频谱动画属于定制化较高的效果,读者无需纠缠于细节,而是将目光聚焦在实际问题的解决思路上。实际开发中,可根据自身产品的需求,灵活运用开发。

参考资料

  • 傅里叶变换-维基百科

  • 快速傅里叶变换-百度百科

  • 最小二乘法-百度百科

  • Android 音频可视化

  • 译|Android Visualizer 可视化器的自定义实现文章来源地址https://www.toymoban.com/news/detail-555042.html

到了这里,关于Android 音频可视化:频谱特效的探索与实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 音频可视化

    ​ 书接上文 vue实现歌词滚动效果,既然有了歌词滚动那么今天给大家来个绝活——音频可视化。伴随着各种新技术的更新迭代,往后大家或多或少都会接触到这个技能,因为在未来前端可视化必定会占有极其重要的地位,可视化应用场景应用模式也是千变万化,我将以最直

    2024年02月03日
    浏览(76)
  • python对wav音频可视化

    本文主要是使用代码实现音频文件(wav)的多种可视化。 1.信号 2.傅里叶变换 3.Mel(梅尔)谱图 4.log_Mel谱图 提示:以下是本篇文章正文内容,下面案例可供参考 为了便于展示,我将信号和傅里叶变换使用plt组合在一起进行展示。 结果展示: 为了便于展示,我将信号和傅里

    2023年04月08日
    浏览(82)
  • 【数据可视化】(二)数据探索组件

    目录 0.简介 一、数据模式与数据组织 1、数据的定义 2、数据库的定义 3、什么是数据模式? 4、数据模式举例 5、什么是数据纲要? 6、数据组织的层次 二、矢量数据 1、什么是

    2024年02月14日
    浏览(32)
  • 记录--关于前端的音频可视化-Web Audio

    最近听音乐的时候,看到各种动效,突然好奇这些音频数据是如何获取并展示出来的,于是花了几天功夫去研究相关的内容,这里只是给大家一些代码实例,具体要看懂、看明白,还是建议大家大家结合相关API文档来阅读这篇文章。 参考资料地址:Web Audio API - Web API 接口参考

    2024年02月16日
    浏览(53)
  • Pixi + Tone 实现简单midi音频可视化

    Pixi.js 是一个前端图形渲染库,使用精灵技术绘制高性能的图形。 Tone.js是一个前端音频框架,对web audio api进行了封装,可以快速创建音频样本、音频效果、进行音频分析和音频播放。 @tonejs/midi是tonejs的一个插件,可以讲midi文件转化为Tone.js可以解析的json格式。 首先需要讲

    2024年02月16日
    浏览(40)
  • 探索规律:Python地图数据可视化艺术

    使用 Pyecharts 构建地图可视化也是很简单的。Pyecharts 支持多种地图类型,包括普通地图、热力图、散点地图等。以下是一个构建简单地图的示例,以中国地图为例: 首先,确保已安装了Pyecharts 库。可以使用以下命令来安装: 然后,创建一个 Python 脚本,例如 map_example.py ,并

    2024年02月13日
    浏览(93)
  • 面向AI编程:探索可视化分析模型

    大规模语言模型 (LLM) 拥有大量的数据来源,能针对用户提出的问题提供不同形式的回答,但其回答形式仅限于“文本”。尽管文本内容清晰,但在包含复杂逻辑或需要向外展示的场景下,文本表达存在局限性。可以想象,将“文本” 转换为“可视化” 分析模型甚至UI界面将

    2024年02月17日
    浏览(41)
  • 数据之美:探索数据可视化设计的奇妙世界

    在信息时代的浪潮中,海量的数据正在影响着我们的生活和决策。然而,数据本身虽然有力量,但如何将其有机地呈现给我们,却成为了一个挑战。数据可视化设计应运而生,它不仅让枯燥的数字变得生动,还带来了一场视觉和认知的盛宴。 数字的生动画面 数据可视化设计

    2024年02月11日
    浏览(50)
  • EDA-数据探索-pandas自带可视化-iris

    sepal_length sepal_width petal_length petal_width species 0 5.1 3.5 1.4 0.2 setosa 1 4.9 3.0 1.4 0.2 setosa 2 4.7 3.2 1.3 0.2 setosa 3 4.6 3.1 1.5 0.2 setosa 4 5.0 3.6 1.4 0.2 setosa 条形图(柱状图)展示每个字符特征的频数分布。 df[‘字符特征’].value_counts().plot(kind=‘bar’) 直方图展示数字特征的分布情况。 df[‘数

    2024年01月19日
    浏览(56)
  • HTML5+CSS3+JS小实例:音频可视化

    实例:音频可视化 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 【CSS】

    2024年01月18日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包