创建Waves可视化歌曲Swift

Question

这是我正在尝试做的事情：

屏幕截图来自6s iPhone。

我一直在AVAudioPlayer中工作，我想绘制一个看起来像第一个屏幕截图的波形。我正在使用FDWAVEFORMVIEW Github吊舱绘制波浪。但是我很困惑如何画同样的波浪。

码：

 @IBOutlet weak var soundWaveView: FDWaveformView!

  func createSoundWave() {
    soundWaveView.delegate = self
    soundWaveView.alpha = 0.0
    soundWaveView.audioURL = mainTrackURL
    soundWaveView.zoomSamples = 0 ..< soundWaveView.totalSamples / 3
    soundWaveView.doesAllowScrubbing = true
    soundWaveView.doesAllowStretch = true
    soundWaveView.doesAllowScroll = true
    soundWaveView.wavesColor = .lightGray
    soundWaveView.progressColor = UIColor.init(red: 46/255, green: 188/255, blue: 191/255, alpha: 1.0)
}

func waveformViewWillRender(_ waveformView: FDWaveformView) {
    startRendering = Date()
}

func waveformViewDidRender(_ waveformView: FDWaveformView) {
    endRendering = Date()
    NSLog("FDWaveformView rendering done, took %0.3f seconds", endRendering.timeIntervalSince(startRendering))
    profileResult.append(String(format: " render %0.3f ", endRendering.timeIntervalSince(startRendering)))
    UIView.animate(withDuration: 0.25, animations: {() -> Void in
        waveformView.alpha = 1.0
    })
}  

func waveformViewWillLoad(_ waveformView: FDWaveformView) {
    startLoading = Date()
}

func waveformViewDidLoad(_ waveformView: FDWaveformView) {
    endLoading = Date()
    NSLog("FDWaveformView loading done, took %0.3f seconds", endLoading.timeIntervalSince(startLoading))
    profileResult.append(String(format: " load %0.3f ", endLoading.timeIntervalSince(startLoading)))
}

问题：如何显示与原始图像相同的波形（第一个屏幕截图）？

有人可以向我解释如何绘制相同的波形，我已经尝试绘制这些波形，但没有结果。

任何帮助将不胜感激。

提前致谢。

Answer 1

Ah, waveform drawing... From the looks of it, you're probably going to need to fork this and make your changes, because the FDWaveformRenderOperation doesn't support this style.

It looks like you can modify the plotWaveformGraph method in FDWaveformRenderOperation to achieve this. Currently, it iterates over every sample in the buffer, but if instead, you maintain an index that's incremented every nth sample (the bar "width") plus the bar "spacing," you can get this appearance. This is a naive approach, to be clear. Ideally, you'd average the samples in a "bar" and draw that value.

This is NOT compiling code, but should give you a place to start.

let barWidth: CGFloat = 2.0
let barSpacing: CGFloat = 2.0

var x = 0
while x < samples.count { {
   let sample = samples[index]
   let height = (sample - min) * sampleDrawingScale
   context.move(to: CGPoint(x: CGFloat(x), y: verticalMiddle - height))
   context.addLine(to: CGPoint(x: CGFloat(x), y: verticalMiddle + height))
   context.setLineWidth(barWidth) // note: stroke width straddles the path, so play with this
   context.strokePath();
   index += barWidth + barSpacing
}

Humble plug, but you can see how I do this in my waveform drawing framework. This is generally proof of concept and unoptimized. :)