ios - 创建 Waves 可视化歌曲 Swift

Question

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

截图取自iPhone 6s。

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

代码:

 @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

啊，波形图...从外观上看，您可能需要 fork 它并进行更改，因为 FDWaveformRenderOperation 不支持这种样式。

它看起来您可以修改FDWaveformRenderOperation 中的plotWaveformGraph 方法来实现此目的。目前，它遍历缓冲区中的 每个 样本，但如果相反，您维护一个 index，它每第 n 个样本(“宽度”栏)加上“间距”栏递增”，你可以得到这个外观。需要明确的是，这是一种天真的方法。理想情况下，您可以对“条形”中的样本进行平均并绘制该值。

这不是编译代码，但应该为您提供一个起点。

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

var x = 0
while x < samples.count { {
   let sample = samples[x]
   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();
   x += barWidth + barSpacing
}

简陋的插件，但你可以在我的 waveform drawing framework 中看到我是如何做到这一点的.这通常是概念证明并且未优化。 :)