创建 Waves 可视化歌曲 Swift答案

【问题标题】：Create Waves Visulization Song Swift创建 Waves 可视化歌曲 Swift
【发布时间】：2019-12-30 08:40:54
【问题描述】：

这是我想要做的：

截图来自 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)))
}

问题：如何显示与原图相同的波浪（第一张截图）？

谁能给我解释一下如何画相同的，我试着画这些波浪，但还没有结果。

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

我相信您将不得不使用不同的库，它可以帮助您像第一个屏幕截图一样显示波浪。您正在使用的库/可可豆荚：FDWaveformView 只会像第二个屏幕截图那样为您提供波形视图，除非它允许自定义波形。不过在 Github 页面上没有提到自定义波形视图。
您可能对cocoacontrols.com/search?q=Wave感兴趣
TBH 您可以自己制作第一个波形，如果您可以从库中获取音频值，制作 UIScrollview，设置最大条形宽度，具有滚动水平堆栈视图，左对齐并添加条形基于音频值 min/max 的高度约束

标签： ios swift user-interface beatsmusic soundwaves

【解决方案1】：

啊，波形图...从外观上看，您可能需要分叉并进行更改，因为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 中看到我是如何做到这一点的。这通常是概念验证并且未优化。 :)

【讨论】：