如果你想先看看最终效果再决定看不看文章 -> bilibili
示例代码下载

第一篇:一步一步教你实现iOS音频频谱动画(一)

本文是系列文章中的第二篇,上篇讲述了音频播放和频谱数据计算,本篇讲述数据处理和动画的绘制。

前言

在上篇文章中我们已经拿到了频谱数据,也知道了数组每个元素表示的是振幅,那这些数组元素之间有什么关系呢?根据FFT的原理, N个音频信号样本参与计算将产生N/2个数据(2048/2=1024),其频率分辨率△f=Fs/N = 44100/2048≈21.5hz,而相邻数据的频率间隔是一样的,因此这1024个数据分别代表频率在0hz、21.5hz、43.0hz....22050hz下的振幅。

那是不是可以直接将这1024个数据绘制成动画?当然可以,如果你刚好要显示1024个动画物件!但是如果你想可以灵活地调整这个数量,那么需要进行频带划分。

严格来说,结果有1025个,因为在上篇文章的FFT计算中通过fftInOut.imagp[0] = 0,直接把第1025个值舍弃掉了。这第1025个值代表的是奈奎斯特频率值的实部。至于为什么保存在第一个FFT结果的虚部中,请翻看第一篇

频带划分

频带划分更重要的原因其实是这样的:根据心理声学,人耳能容易的分辨出100hz和200hz的音调不同,但是很难分辨出8100hz和8200hz的音调不同,尽管它们各自都是相差100hz,可以说频率和音调之间的变化并不是呈线性关系,而是某种对数的关系。因此在实现动画时将数据从等频率间隔划分成对数增长的间隔更合乎人类的听感。


图1 频带划分方式

打开项目AudioSpectrum02-starter,您会发现跟之前的AudioSpectrum01项目有些许不同,它将FFT相关的计算移到了新增的类RealtimeAnalyzer中,使得AudioSpectrumPlayerRealtimeAnalyzer两个类的职责更为明确。

如果你只是想浏览实现代码,打开项目AudioSpectrum02-final即可,已经完成本篇文章的所有代码

查看RealtimeAnalyzer类的代码,其中已经定义了 frequencyBands、startFrequency、endFrequency 三个属性,它们将决定频带的数量和起止频率范围。

public var frequencyBands: Int = 80 //频带数量
public var startFrequency: Float = 100 //起始频率
public var endFrequency: Float = 18000 //截止频率
复制代码

现在可以根据这几个属性确定新的频带:

private lazy var bands: [(lowerFrequency: Float, upperFrequency: Float)] = {
var bands = [(lowerFrequency: Float, upperFrequency: Float)]()
//1:根据起止频谱、频带数量确定增长的倍数:2^n
let n = log2(endFrequency/startFrequency) / Float(frequencyBands)
var nextBand: (lowerFrequency: Float, upperFrequency: Float) = (startFrequency, 0)
for i in 1...frequencyBands {
//2:频带的上频点是下频点的2^n倍
let highFrequency = nextBand.lowerFrequency * powf(2, n)
nextBand.upperFrequency = i == frequencyBands ? endFrequency : highFrequency
bands.append(nextBand)
nextBand.lowerFrequency = highFrequency
}
return bands
}()
复制代码

接着创建函数findMaxAmplitude用来计算新频带的值,采用的方法是找出落在该频带范围内的原始振幅数据的最大值:

private func findMaxAmplitude(for band:(lowerFrequency: Float, upperFrequency: Float), in amplitudes: [Float], with bandWidth: Float) -> Float {
let startIndex = Int(round(band.lowerFrequency / bandWidth))
let endIndex = min(Int(round(band.upperFrequency / bandWidth)), amplitudes.count - 1)
return amplitudes[startIndex...endIndex].max()!
}
复制代码

这样就可以通过新的analyse函数接收音频原始数据并向外提供加工好的频谱数据:

func analyse(with buffer: AVAudioPCMBuffer) -> [[Float]] {
let channelsAmplitudes = fft(buffer)
var spectra = [[Float]]()
for amplitudes in channelsAmplitudes {
let spectrum = bands.map {
findMaxAmplitude(for: $0, in: amplitudes, with: Float(buffer.format.sampleRate) / Float(self.fftSize))
}
spectra.append(spectrum)
}
return spectra
}
复制代码

动画绘制

看上去数据都处理好了,让我们捋一捋袖子开始绘制动画了!打开自定义视图SpectrumView文件,首先创建两个CAGradientLayer

var leftGradientLayer = CAGradientLayer()
var rightGradientLayer = CAGradientLayer()
复制代码

新建函数setupView(),分别设置它们的colorslocations属性,这两个属性分别决定渐变层的颜色和位置,再将它们添加到视图的layer层中,它们将承载左右两个声道的动画。

private func setupView() {
rightGradientLayer.colors = [UIColor.init(red: 52/255, green: 232/255, blue: 158/255, alpha: 1.0).cgColor,
UIColor.init(red: 15/255, green: 52/255, blue: 67/255, alpha: 1.0).cgColor]
rightGradientLayer.locations = [0.6, 1.0]
self.layer.addSublayer(rightGradientLayer) leftGradientLayer.colors = [UIColor.init(red: 194/255, green: 21/255, blue: 0/255, alpha: 1.0).cgColor,
UIColor.init(red: 255/255, green: 197/255, blue: 0/255, alpha: 1.0).cgColor]
leftGradientLayer.locations = [0.6, 1.0]
self.layer.addSublayer(leftGradientLayer)
}
复制代码

接着在View的初始化函数init(frame: CGRect)init?(coder aDecoder: NSCoder)中调用它,以便在代码或者Storyboard中创建SpectrumView时都可以正确地进行初始化。

override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
复制代码

关键的来了,定义一个spectra属性对外接收频谱数据,并通过属性观察didSet创建两个声道的柱状图的UIBezierPath,经过CAShapeLayer包装后应用到各自CAGradientLayermask属性中,就得到了渐变的柱状图效果。

var spectra:[[Float]]? {
didSet {
if let spectra = spectra {
// left channel
let leftPath = UIBezierPath()
for (i, amplitude) in spectra[0].enumerated() {
let x = CGFloat(i) * (barWidth + space) + space
let y = translateAmplitudeToYPosition(amplitude: amplitude)
let bar = UIBezierPath(rect: CGRect(x: x, y: y, width: barWidth, height: bounds.height - bottomSpace - y))
leftPath.append(bar)
}
let leftMaskLayer = CAShapeLayer()
leftMaskLayer.path = leftPath.cgPath
leftGradientLayer.frame = CGRect(x: 0, y: topSpace, width: bounds.width, height: bounds.height - topSpace - bottomSpace)
leftGradientLayer.mask = leftMaskLayer // right channel
if spectra.count >= 2 {
let rightPath = UIBezierPath()
for (i, amplitude) in spectra[1].enumerated() {
let x = CGFloat(spectra[1].count - 1 - i) * (barWidth + space) + space
let y = translateAmplitudeToYPosition(amplitude: amplitude)
let bar = UIBezierPath(rect: CGRect(x: x, y: y, width: barWidth, height: bounds.height - bottomSpace - y))
rightPath.append(bar)
}
let rightMaskLayer = CAShapeLayer()
rightMaskLayer.path = rightPath.cgPath
rightGradientLayer.frame = CGRect(x: 0, y: topSpace, width: bounds.width, height: bounds.height - topSpace - bottomSpace)
rightGradientLayer.mask = rightMaskLayer
}
}
}
}
复制代码

其中translateAmplitudeToYPosition函数的作用是将振幅转换成视图坐标系中的Y值:

private func translateAmplitudeToYPosition(amplitude: Float) -> CGFloat {
let barHeight: CGFloat = CGFloat(amplitude) * (bounds.height - bottomSpace - topSpace)
return bounds.height - bottomSpace - barHeight
}
复制代码

回到ViewController,在SpectrumPlayerDelegate的方法中直接将接收到的数据交给spectrumView:

// MARK: SpectrumPlayerDelegate
extension ViewController: AudioSpectrumPlayerDelegate {
func player(_ player: AudioSpectrumPlayer, didGenerateSpectrum spectra: [[Float]]) {
DispatchQueue.main.async {
//1: 将数据交给spectrumView
self.spectrumView.spectra = spectra
}
}
}
复制代码

敲了这么多代码,终于可以运行一下看看效果了!额...看上去效果好像不太妙啊。请放心,喝杯咖啡放松一下,待会一个一个来解决。

图2 初始动画效果

调整优化

效果不好主要体现在这三点:1)动画与音乐节奏匹配度不高;2)画面锯齿过多; 3)动画闪动明显。 首先来解决第一个问题:

节奏匹配

匹配度不高的一部分原因是目前的动画幅度太小了,特别是中高频部分。我们先放大个5倍看看效果,修改analyse函数:

func analyse(with buffer: AVAudioPCMBuffer) -> [[Float]] {
let channelsAmplitudes = fft(buffer)
var spectra = [[Float]]()
for amplitudes in channelsAmplitudes {
let spectrum = bands.map {
//1: 直接在此函数调用后乘以5
findMaxAmplitude(for: $0, in: amplitudes, with: Float(buffer.format.sampleRate) / Float(self.fftSize)) * 5
}
spectra.append(spectrum)
}
return spectra
}
复制代码

图3 幅度放大5倍之后,低频部分都超出画面了

低频部分的能量相比中高频大许多,但实际上低音听上去并没有那么明显,这是为什么呢?这里涉及到响度的概念:

响度(loudness又称音响或音量),是与声强相对应的声音大小的知觉量。声强是客观的物理量,响度是主观的心理量。响度不仅跟声强有关,还跟频率有关。不同频率的纯音,在和1000Hz某个声压级纯音等响时,其声压级也不相同。这样的不同声压级,作为频率函数所形成的曲线,称为等响度曲线。改变这个1000Hz纯音的声压级,可以得到一组等响度曲线。最下方的0方曲线表示人类能听到的最小的声音响度,即听阈;最上方是人类能承受的最大的声音响度,即痛阈。

图4 横坐标为频率,纵坐标为声压级,波动的一条条曲线就是等响度曲线(equal-loudness contours),这些曲线代表着声音的频率和声压级在相同响度级中的关联。

原来人耳对不同频率的声音敏感度不同,两个声音即使声压级相同,如果频率不同那感受到的响度也不同。基于这个原因,需要采用某种频率计权来模拟使得像人耳听上去的那样。常用的计权方式有A、B、C、D等,A计权最为常用,对低频部分相比其他计权有着最多的衰减,这里也将采用A计权。

图5 蓝色曲线就是A计权,是根据40 phon的等响曲线模拟出来的反曲线

RealtimeAnalyzer类中新建函数createFrequencyWeights(),它将返回A计权的系数数组:

private func createFrequencyWeights() -> [Float] {
let Δf = 44100.0 / Float(fftSize)
let bins = fftSize / 2 //返回数组的大小
var f = (0..<bins).map { Float($0) * Δf}
f = f.map { $0 * $0 } let c1 = powf(12194.217, 2.0)
let c2 = powf(20.598997, 2.0)
let c3 = powf(107.65265, 2.0)
let c4 = powf(737.86223, 2.0) let num = f.map { c1 * $0 * $0 }
let den = f.map { ($0 + c2) * sqrtf(($0 + c3) * ($0 + c4)) * ($0 + c1) }
let weights = num.enumerated().map { (index, ele) in
return 1.2589 * ele / den[index]
}
return weights
}
复制代码

更新analyse函数中的代码:

func analyse(with buffer: AVAudioPCMBuffer) -> [[Float]] {
let channelsAmplitudes = fft(buffer)
var spectra = [[Float]]()
//1: 创建权重数组
let aWeights = createFrequencyWeights()
for amplitudes in channelsAmplitudes {
//2:原始频谱数据依次与权重相乘
let weightedAmplitudes = amplitudes.enumerated().map {(index, element) in
return element * aWeights[index]
}
let spectrum = bands.map {
//3: findMaxAmplitude函数将从新的`weightedAmplitudes`中查找最大值
findMaxAmplitude(for: $0, in: weightedAmplitudes, with: Float(buffer.format.sampleRate) / Float(self.fftSize)) * 5
}
spectra.append(spectrum)
}
return spectra
}
复制代码

再次运行项目看看效果,好多了是吗?

图6 A计权之后的动画表现

锯齿消除

接着是锯齿过多的问题,手段是将相邻较长的拉短较短的拉长,常见的办法是使用加权平均。创建函数highlightWaveform()

private func highlightWaveform(spectrum: [Float]) -> [Float] {
//1: 定义权重数组,数组中间的5表示自己的权重
// 可以随意修改,个数需要奇数
let weights: [Float] = [1, 2, 3, 5, 3, 2, 1]
let totalWeights = Float(weights.reduce(0, +))
let startIndex = weights.count / 2
//2: 开头几个不参与计算
var averagedSpectrum = Array(spectrum[0..<startIndex])
for i in startIndex..<spectrum.count - startIndex {
//3: zip作用: zip([a,b,c], [x,y,z]) -> [(a,x), (b,y), (c,z)]
let zipped = zip(Array(spectrum[i - startIndex...i + startIndex]), weights)
let averaged = zipped.map { $0.0 * $0.1 }.reduce(0, +) / totalWeights
averagedSpectrum.append(averaged)
}
//4:末尾几个不参与计算
averagedSpectrum.append(contentsOf: Array(spectrum.suffix(startIndex)))
return averagedSpectrum
}
复制代码

analyse函数需要再次更新:

func analyse(with buffer: AVAudioPCMBuffer) -> [[Float]] {
let channelsAmplitudes = fft(buffer)
var spectra = [[Float]]()
for amplitudes in channelsAmplitudes {
let weightedAmplitudes = amplitudes.enumerated().map {(index, element) in
return element * weights[index]
}
let spectrum = bands.map {
findMaxAmplitude(for: $0, in: weightedAmplitudes, with: Float(buffer.format.sampleRate) / Float(self.fftSize)) * 5
}
//1: 添加到数组之前调用highlightWaveform
spectra.append(highlightWaveform(spectrum: spectrum))
}
return spectra
}
复制代码

图7 锯齿少了,波形变得明显

闪动优化

动画闪动给人的感觉就好像丢帧一样。造成这个问题的原因,是因为频带的值前后两帧变化太大,我们可以将上一帧的值缓存起来,然后跟当前帧的值进行...没错,又是加权平均! (⊙﹏⊙)b 继续开始编写代码,首先需要定义两个属性:

//缓存上一帧的值
private var spectrumBuffer: [[Float]]?
//缓动系数,数值越大动画越"缓"
public var spectrumSmooth: Float = 0.5 {
didSet {
spectrumSmooth = max(0.0, spectrumSmooth)
spectrumSmooth = min(1.0, spectrumSmooth)
}
}
复制代码

接着修改analyse函数:

func analyse(with buffer: AVAudioPCMBuffer) -> [[Float]] {
let channelsAmplitudes = fft(buffer)
let aWeights = createFrequencyWeights()
//1: 初始化spectrumBuffer
if spectrumBuffer.count == 0 {
for _ in 0..<channelsAmplitudes.count {
spectrumBuffer.append(Array<Float>(repeating: 0, count: frequencyBands))
}
}
//2: index在给spectrumBuffer赋值时需要用到
for (index, amplitudes) in channelsAmplitudes.enumerated() {
let weightedAmp = amplitudes.enumerated().map {(index, element) in
return element * aWeights[index]
}
var spectrum = bands.map {
findMaxAmplitude(for: $0, in: weightedAmplitudes, with: Float(buffer.format.sampleRate) / Float(self.fftSize)) * 5
}
spectrum = highlightWaveform(spectrum: spectrum)
//3: zip用法前面已经介绍过了
let zipped = zip(spectrumBuffer[index], spectrum)
spectrumBuffer[index] = zipped.map { $0.0 * spectrumSmooth + $0.1 * (1 - spectrumSmooth) }
}
return spectrumBuffer
}
复制代码

再次运行项目,得到最终效果:

结尾

音频频谱的动画实现到此已经全部完成。本人之前对音频和声学毫无经验,两篇文章涉及的方法理论均参考自互联网,肯定有不少错误,欢迎指正。

参考资料
[1] 维基百科, 倍频程频带, en.wikipedia.org/wiki/Octave…
[2] 维基百科, 响度, zh.wikipedia.org/wiki/%E9%9F…
[3] mathworks,A-weighting Filter with Matlab,www.mathworks.com/matlabcentr…
[4] 动画效果:网易云音乐APPMOO音乐APP。感兴趣的同学可以用卡农钢琴版音乐和这两款APP进行对比^_^,会发现区别。

作者:potato04
链接:https://juejin.im/post/5c26d44ae51d45619a4b8b1e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

一步一步教你实现iOS音频频谱动画(二)的更多相关文章

  1. 一步一步教你实现iOS音频频谱动画(一)

    如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第二篇:一步一步教你实现iOS音频频谱动画(二) 基于篇幅考虑,本次教程分为两篇文章,本篇文章主要讲述音频播放和频谱 ...

  2. iOS音频频谱动画,仿QQ录音频谱

    先上效果图: display.gif 有需要的请移步GitHub下载: https://github.com/HuangGY1993/GYSpectrum 用法很简单,示例: SpectrumView ...

  3. iOS音频学习笔记二:iOS SDK中与音频有关的相关框架

      上层:       Media Player Framework: 包含MPMoviePlayerController.MPMoviePlayerViewController.MPMusicPla ...

  4. 通过Dapr实现一个简单的基于.net的微服务电商系统(十)——一步一步教你如何撸Dapr之绑定

    如果说Actor是dapr有状态服务的内部体现的话,那绑定应该是dapr对serverless这部分的体现了.我们可以通过绑定极大的扩展应用的能力,甚至未来会成为serverless的基础.最开始接触 ...

  5. 一步一步教你如何在linux下配置apache+tomcat(转)

    一步一步教你如何在linux下配置apache+tomcat   一.安装前准备. 1.   所有组件都安装到/usr/local/e789目录下 2.   解压缩命令:tar —vxzf 文件名(. ...

  6. 一步一步教你将普通的wifi路由器变为智能广告路由器

    一步一步教你将普通的wifi路由器变为智能广告路由器 相信大家对WiFi智能广告路由器已经不再陌生了,现在很多公共WiFi上网,都需要登录并且验证,这也就是WiFi广告路由器的最重要的功能.大致就是下 ...

  7. 一步一步实现iOS微信自动抢红包

    微信红包 前言:最近笔者在研究iOS逆向工程,顺便拿微信来练手,在非越狱手机上实现了微信自动抢红包的功能.   此教程所需要的工具/文件 yololib class-dump dumpdecrypte ...

  8. 【转载】一步一步搭建自己的iOS网络请求库

    一步一步搭建自己的iOS网络请求库(一) 大家好,我是LastDay,很久没有写博客了,这周会分享一个的HTTP请求库的编写经验. 简单的介绍 介绍一下,NSURLSession是iOS7中新的网络接 ...

  9. 一步一步教你使用Git

    一步一步教你使用Git 互联网给我们带来方便的同时,也时常让我们感到困惑.随便搜搜就出一大堆结果,然而总是有大量的重复和错误.小妖发出的内容,都是自己实测过的,有问题请留言. 现在,你已经安装了Git ...

随机推荐

  1. Oracle ORA-00984: column not allowed here

    ORA-00984错误: 列在此处不允许当数据以char的形式存在时,应加单引号,则插入数据库就不会出现类似错误.

  2. InfluxDB+Grafana大数据监控系列之基础环境部署(一)

    一.单节点环境部署 机器节点信息及 InfluxDB.Grafana 版本选择: 节点 Linux版本 部署服务 10.223.1.198 Centos 6.8 InfluxDB 1.7.7 10.2 ...

  3. MySQL中表的列结构的修改操作

    首先创建一个用于测试的表test_table: drop table if exists test_table; CREATE TABLE `test_table` ( `id` int(11) DE ...

  4. 比较SSO协议: WS-Fed, SAML, and OAuth

    真实比喻 在我们获得技术之前,让我们用完全非技术性的东西来解决这个问题.作为工程师,我们非常注重将事情分解为组件和流程.这有助于我们了解事情,以便我们可以排除故障或构建复杂的系统.当你去机场登机时,你 ...

  5. 字符串匹配算法---BF

    Brute-Force算法,简称BF算法,是一种简单朴素的模式匹配算法,常用语在一个主串string 内查找一个子串 pattern的出现位置. 核心思想: i 遍历主串string i 每自增一次, ...

  6. Work? working!

    0.总要想想为什要做这个(目的是什么,优缺点,必要性,不用行不行,产品定位,如何保证最后的稳定性) 1.如何逐步排查问题所在(做实验+分析排查:不同的实验手段) 2.如何利用网络(搜索问题的所在,确定 ...

  7. 各种 Java Thread State 分析

    转自:https://www.cnblogs.com/zhengyun_ustc/archive/2013/03/18/tda.html 1,线程状态为“waiting for monitor ent ...

  8. 当后端返回的数据是以属性做开头,怎么用length取值

    在我们前端开发中,一般需要的数据是分条的如 [{},{},{},{}] ,这样的数据方便我们用length取值,尤其是在表格中.在控制台看的时候能轻易的看出1 2 3 4条,但有时候后台返回的数据不是 ...

  9. Java面试 - == 和 equals 的区别?

    ==:如果比较的对象是基本数据类型,则比较的是数值是否一致:如果比较的是引用数据类型,则比较的是对象的地址值是否一致. equals():equals()方法不能用于比较基本数据类型的对象,如果对象和 ...

  10. PCL学习(五)如何在mesh模型上sample更多点及三维物体姿态估计

    ---恢复内容开始--- 最近在做关于物体姿态估计的项目 基本思路就是 我们在估计物体的pose的时候,需要用分割得到的点云与模型库中的模型做匹配 1.通过基于RANSANC的SAC-IA将点云和模型 ...