一步一步教你实现iOS音频频谱动画（二）

时间  2019-11-06
标签 一步 实现 ios 音频 频谱 动画 栏目 iOS 繁體版
原文   原文链接

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

第一篇：一步一步教你实现iOS音频频谱动画（一）git

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

前言

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

那是否是能够直接将这1024个数据绘制成动画？固然能够，若是你恰好要显示1024个动画物件！可是若是你想能够灵活地调整这个数量，那么须要进行频带划分。数组

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

频带划分

频带划分更重要的缘由实际上是这样的：根据心理声学，人耳能容易的分辨出100hz和200hz的音调不一样，可是很难分辨出8100hz和8200hz的音调不一样，尽管它们各自都是相差100hz，能够说频率和音调之间的变化并非呈线性关系，而是某种对数的关系。所以在实现动画时将数据从等频率间隔划分红对数增加的间隔更合乎人类的听感。app

图1 频带划分方式

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

若是你只是想浏览实现代码，打开项目AudioSpectrum02-final便可，已经完成本篇文章的全部代码ide

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

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

如今能够根据这几个属性肯定新的频带:post

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()，分别设置它们的colors和locations属性，这两个属性分别决定渐变层的颜色和位置，再将它们添加到视图的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包装后应用到各自CAGradientLayer的mask属性中，就获得了渐变的柱状图效果。

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] 动画效果：网易云音乐APP、MOO音乐APP。感兴趣的同窗能够用卡农钢琴版音乐和这两款APP进行对比^_^，会发现区别。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程