效果圖

條狀波形圖

線狀波形圖

配置AvAudioSession

繪制波形圖前首先需要配置好AVAudioSession，同時(shí)需要建立一個(gè)數(shù)組去保存音量數(shù)據(jù)。

相關(guān)屬性

recorderSetting用于設(shè)定錄音音質(zhì)等相關(guān)數(shù)據(jù)。

timer以及updateFequency用于定時(shí)更新波形圖。

soundMeter和soundMeterCount用于保存音量表數(shù)組。

recordTime用于記錄錄音時(shí)間，可以用于判斷錄音時(shí)間是否達(dá)到要求等進(jìn)一波需求。

/// 錄音器

private var recorder: AVAudioRecorder!? ? /// 錄音器設(shè)置

private let recorderSetting = [AVSampleRateKey : NSNumber(value: Float(44100.0)),//聲音采樣率

AVFormatIDKey : NSNumber(value: Int32(kAudioFormatMPEG4AAC)),//編碼格式

AVNumberOfChannelsKey : NSNumber(value: 1),//采集音軌

AVEncoderAudioQualityKey : NSNumber(value: Int32(AVAudioQuality.medium.rawValue))]//聲音質(zhì)量

/// 錄音計(jì)時(shí)器

private var timer: Timer?? ? /// 波形更新間隔

private let updateFequency = 0.05

/// 聲音數(shù)據(jù)數(shù)組

private var soundMeters: [Float]!? ? /// 聲音數(shù)據(jù)數(shù)組容量

private let soundMeterCount = 10

/// 錄音時(shí)間

private var recordTime = 0.00

AvAudioSession相關(guān)配置

configAVAudioSession用于配置AVAudioSession，其中AVAudioSessionCategoryRecord是代表僅僅利用這個(gè)session進(jìn)行錄音操作，而需要播放操作的話是可以設(shè)置成AVAudioSessionCategoryPlayAndRecord或AVAudioSessionCategoryPlayBlack,兩者區(qū)別一個(gè)是可以錄音和播放，另一個(gè)是可以在后臺(tái)播放（即靜音后仍然可以播放語音）。

configRecord是用于配置整個(gè)AVAudioRecoder，包括權(quán)限獲取、代理源設(shè)置、是否記錄音量表等。

directoryURL是用于配置文件保存地址。

private func configAVAudioSession() {? ? ? ? let session = AVAudioSession.sharedInstance()? ? ? ? do { try session.setCategory(AVAudioSessionCategoryPlayAndRecord, with: .defaultToSpeaker) }? ? ? ? catch { print("session config failed") }

}? ?

private func configRecord() {? ? ? ? AVAudioSession.sharedInstance().requestRecordPermission { (allowed) in

if !allowed {? ? ? ? ? ? ? ? return

}

}? ? ? ? let session = AVAudioSession.sharedInstance()? ? ? ? do { try session.setCategory(AVAudioSessionCategoryPlayAndRecord, with: .defaultToSpeaker) }? ? ? ? catch { print("session config failed") }? ? ? ? do {? ? ? ? ? ? self.recorder = try AVAudioRecorder(url: self.directoryURL()!, settings: self.recorderSetting)? ? ? ? ? ? self.recorder.delegate = self

self.recorder.prepareToRecord()? ? ? ? ? ? self.recorder.isMeteringEnabled = true

} catch {? ? ? ? ? ? print(error.localizedDescription)

}? ? ? ? do { try AVAudioSession.sharedInstance().setActive(true) }? ? ? ? catch { print("session active failed") }

}? ?

private func directoryURL() -> URL? {? ? ? ? // do something ...

return soundFileURL

}

記錄音頻數(shù)據(jù)

在開始錄音后，利用我們剛剛配置的定時(shí)器不斷獲取averagePower，并保存到數(shù)組之中。

updateMeters被定時(shí)器調(diào)用，不斷將recorder中記錄的音量數(shù)據(jù)保存到soundMeter數(shù)組中。

addSoundMeter用于完成添加數(shù)據(jù)的工作。

private func updateMeters() {

recorder.updateMeters()

recordTime += updateFequency

addSoundMeter(item: recorder.averagePower(forChannel: 0))

}? ?

private func addSoundMeter(item: Float) {? ? ? ? if soundMeters.count < soundMeterCount {

soundMeters.append(item)

} else {? ? ? ? ? ? for (index, _) in soundMeters.enumerated() {? ? ? ? ? ? ? ? if index < soundMeterCount - 1 {

soundMeters[index] = soundMeters[index + 1]

}

}? ? ? ? ? ? // 插入新數(shù)據(jù)

soundMeters[soundMeterCount - 1] = item? ? ? ? ? ? NotificationCenter.default.post(name: NSNotification.Name.init("updateMeters"), object: soundMeters)

}

}

開始繪制波形圖

現(xiàn)在我們已經(jīng)獲取了我們需要的所有數(shù)據(jù)，可以開始繪制波形圖了。這時(shí)候讓我們轉(zhuǎn)到MCVolumeView.swift文件中，在上一個(gè)步驟中，我們發(fā)送了一條叫做updateMeters的通知，目的就是為了通知MCVolumeView進(jìn)行波形圖的更新。

override init(frame: CGRect) {? ? ? ? super.init(frame: frame)

backgroundColor = UIColor.clear

contentMode = .redraw? //內(nèi)容模式為重繪，因?yàn)樾枰啻沃貜?fù)繪制音量表

NotificationCenter.default.addObserver(self, selector: #selector(updateView(notice:)), name: NSNotification.Name.init("updateMeters"), object: nil)

}? ?

@objc private func updateView(notice: Notification) {

soundMeters = notice.object as! [Float]

setNeedsDisplay()

}

當(dāng)setNeedsDisplay被調(diào)用之后，就會(huì)調(diào)用drawRect方法，在這里我們可以進(jìn)行繪制波形圖的操作。

noVoice和maxVolume是用于確保聲音的顯示范圍

波形圖的繪制使用CGContext進(jìn)行繪制，當(dāng)然也可以使用UIBezierPath進(jìn)行繪制。

override func draw(_ rect: CGRect) {? ? ? ? if soundMeters != nil && soundMeters.count > 0 {? ? ? ? ? ? let context = UIGraphicsGetCurrentContext()

context?.setLineCap(.round)

context?.setLineJoin(.round)

context?.setStrokeColor(UIColor.white.cgColor)? ? ? ? ? ?

let noVoice = -46.0 // 該值代表低于-46.0的聲音都認(rèn)為無聲音

let maxVolume = 55.0 // 該值代表最高聲音為55.0

// draw the volume...? ? ? ? ? ?

context?.strokePath()

}

}

柱狀波形圖的繪制

根據(jù)maxVolume和noVoice計(jì)算出每一條柱狀的高度，并移動(dòng)context所在的點(diǎn)進(jìn)行繪制

另外需要注意的是CGContext中坐標(biāo)點(diǎn)時(shí)反轉(zhuǎn)的，所以在進(jìn)行計(jì)算時(shí)需要將坐標(biāo)軸進(jìn)行反轉(zhuǎn)來計(jì)算。

case .bar:? ? ? ? ?

context?.setLineWidth(3)? ? ? for (index,item) in soundMeters.enumerated() {? ? ? ? let barHeight = maxVolume - (Double(item) - noVoice)? ? //通過當(dāng)前聲音表計(jì)算應(yīng)該顯示的聲音表高度

context?.move(to: CGPoint(x: index * 6 + 3, y: 40))

context?.addLine(to: CGPoint(x: index * 6 + 3, y: Int(barHeight)))

}

線狀波形圖的繪制

線狀與條狀一樣使用同樣的方法計(jì)算“高度”，但是在繪制條狀波形圖時(shí)，是先畫線，再移動(dòng)，而繪制條狀波形圖時(shí)是先移動(dòng)再畫線。

case .line:

context?.setLineWidth(1.5)? ? ? ? for (index, item) in soundMeters.enumerated() {? ? ? ? ? ? let position = maxVolume - (Double(item) - noVoice)? ? //計(jì)算對(duì)應(yīng)線段高度

context?.addLine(to: CGPoint(x: Double(index * 6 + 3), y: position))

context?.move(to: CGPoint(x: Double(index * 6 + 3), y: position))

}

}

進(jìn)一步完善我們的波形圖

在很多時(shí)候，錄音不單止是需要顯示波形圖，還需要我們展示目前錄音的時(shí)間和進(jìn)度，所以我們可以在波形圖上添加錄音的進(jìn)度條，所以我們轉(zhuǎn)向MCProgressView.swift文件進(jìn)行操作。

使用UIBezierPath配合CAShapeLayer進(jìn)行繪制。

maskPath是作為整個(gè)進(jìn)度路徑的蒙版，因?yàn)槲覀兊匿浺鬑UD不是規(guī)則的方形，所以需要使用蒙版進(jìn)度路徑進(jìn)行裁剪。

progressPath為進(jìn)度路徑，進(jìn)度的繪制方法為從左到右依次繪制。

animation是進(jìn)度路徑的繪制動(dòng)畫。

private func configAnimate() {? ? ? ? let maskPath = UIBezierPath(roundedRect: CGRect.init(x: 0, y: 0, width: frame.width, height: frame.height), cornerRadius: HUDCornerRadius)? ? ? ? let maskLayer = CAShapeLayer()

maskLayer.backgroundColor = UIColor.clear.cgColor

maskLayer.path = maskPath.cgPath

maskLayer.frame = bounds? ? ? ?

// 進(jìn)度路徑

/*

路徑的中心為HUD的中心，寬度為HUD的高度，從左往右繪制

*/

let progressPath = CGMutablePath()

progressPath.move(to: CGPoint(x: 0, y: frame.height / 2))

progressPath.addLine(to: CGPoint(x: frame.width, y: frame.height / 2))

progressLayer = CAShapeLayer()

progressLayer.frame = bounds

progressLayer.fillColor = UIColor.clear.cgColor //圖層背景顏色

progressLayer.strokeColor = UIColor(red: 0.29, green: 0.29, blue: 0.29, alpha: 0.90).cgColor? //圖層繪制顏色

progressLayer.lineCap = kCALineCapButt

progressLayer.lineWidth = HUDHeight

progressLayer.path = progressPath

progressLayer.mask = maskLayer

animation = CABasicAnimation(keyPath: "strokeEnd")

animation.duration = 60 //最大錄音時(shí)長(zhǎng)

animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)? ? //勻速前進(jìn)

animation.fillMode = kCAFillModeForwards

animation.fromValue = 0.0

animation.toValue = 1.0

animation.autoreverses = false

animation.repeatCount = 1

}

結(jié)語

以上就是我在繪制錄音波形圖的一些心得和看法，在demo中我還為錄音HUD加入了高斯模糊和陰影，讓HUD在展示上更具質(zhì)感，這些就略過不提了。雖然如此，但是這個(gè)錄音HUD我覺得還是有一些缺陷的，一來是和VC的耦合比較高，二是繪制線狀波形圖的效果并不是太理性，希望各位如果有更好的方法可以與我交流。