ios - Create Waves 可视化歌曲 Swift

Question

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

截图取自 6s iPhone。

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

代码：

 @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

啊，波形图...从外观上看，您可能需要分叉并进行更改，因为FDWaveformRenderOperation不支持这种风格。

看起来您可以修改plotWaveformGraph方法FDWaveformRenderOperation来实现这一点。目前，它迭代缓冲区中的每个样本，但如果相反，您维护一个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
}

不起眼的插件，但你可以在我的波形绘图框架中看到我是如何做到这一点的。这通常是概念证明并且未优化。:)