I want to show an interactive audio waveform like this.
I've extracted the sample data using AVAssetReader. Using this data, I'm drawing a UIBezierPath in a Scrollview's contentView. Currently, when I pinch zoom-in or zoom-out the scrollView, I'm downsampling the sample data to determine how many samples are to be shown.
class WaveformView: UIView {
var amplitudes: [CGFloat] = [] {
didSet {
setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext(), !amplitudes.isEmpty else { return }
// Set up drawing parameters
context.setStrokeColor(UIColor.black.cgColor)
context.setLineWidth(1.0)
context.setLineCap(.round)
let midY = rect.height / 2
let widthPerSample = rect.width / CGFloat(amplitudes.count)
// Draw waveform
let path = UIBezierPath()
for (index, amplitude) in amplitudes.enumerated() {
let x = CGFloat(index) * widthPerSample
let height = amplitude * rect.height * 0.8
// Draw vertical line for each sample
path.move(to: CGPoint(x: x, y: midY - height))
path.addLine(to: CGPoint(x: x, y: midY + height))
}
path.stroke()
}
}
Added gesture handle
@objc private func handlePinch(_ gesture: UIPinchGestureRecognizer) {
switch gesture.state {
case .began:
initialPinchDistance = gesture.scale
case .changed:
let scaleFactor = gesture.scale / initialPinchDistance
var newScale = currentScale * scaleFactor
newScale = min(max(newScale, minScale), maxScale)
// Update displayed samples with new scale
updateDisplayedSamples(scale: newScale)
print(newScale)
// Maintain zoom center point
let pinchCenter = gesture.location(in: scrollView)
let offsetX = (pinchCenter.x - scrollView.bounds.origin.x) / scrollView.bounds.width
let newOffsetX = (totalWidth * offsetX) - (pinchCenter.x - scrollView.bounds.origin.x)
scrollView.contentOffset.x = max(0, min(newOffsetX, totalWidth - scrollView.bounds.width))
view.layoutIfNeeded()
case .ended, .cancelled:
currentScale = scrollView.contentSize.width / (baseWidth * widthPerSample)
default:
break
}
}
private func updateDisplayedSamples(scale: CGFloat) {
let targetSampleCount = Int(baseWidth * scale)
displayedSamples = downsampleWaveform(samples: rawSamples, targetCount: targetSampleCount)
waveformView.amplitudes = displayedSamples
totalWidth = CGFloat(displayedSamples.count) * widthPerSample
contentWidthConstraint?.constant = totalWidth
scrollView.contentSize = CGSize(width: totalWidth, height: 300)
}
private func downsampleWaveform(samples: [CGFloat], targetCount: Int) -> [CGFloat] {
guard samples.count > 0, targetCount > 0 else { return [] }
if samples.count <= targetCount {
return samples
}
var downsampled: [CGFloat] = []
let sampleSize = samples.count / targetCount
for i in 0..<targetCount {
let startIndex = i * sampleSize
let endIndex = min(startIndex + sampleSize, samples.count)
let slice = samples[startIndex..<endIndex]
// For each window, take the maximum value to preserve peaks
if let maxValue = slice.max() {
downsampled.append(maxValue)
}
}
return downsampled
}
The following approach works very inefficiently as every time gesture.state is changed, I'm calculating the downsampled data and perform UI operation based on that. How can I implement this functionality more efficiently for smooth interaction?
