创建 Waves 可视化歌曲 Swift

Question

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

截图来自6s iPhone.

我一直在 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

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

看起来您可以修改FDWaveformRenderOperation中的plotWaveformGraph方法来实现。目前，它遍历缓冲区中的每个样本，但如果相反，您维护一个 index，它每第 n 个样本（柱 "width"）加上柱"spacing,"你可以得到这个外观。需要明确的是，这是一种天真的方法。理想情况下，您会对 "bar" 中的样本进行平均并得出该值。

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

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 中看到我是如何做到这一点的。这通常是概念证明并且未优化。 :)

创建 Waves 可视化歌曲 Swift

Create Waves Visulization Song Swift

user-interface

ios

beatsmusic

swift

soundwaves