There's many different ways this could be achieved.

[milaniterate]

          There's many different ways this could be achieved.

In this particular case, it looks like the "2nd color" is simply the same white, just with 40% or so opacity. So what you could do is:

• render yourself one waveform as a 100% white image
• assign this to one waveform image view (below that's the viewModel.playbackWaveformImageView)
• assign it to a 2nd waveform image view that you position exactly underneath the 1st one
• set the secondImageView.opacity = 0.4 or similar
• as the audio plays back, update your upmost waveform's layerMask so that it only covers a part of the space

I happen to have done this masking in one of my apps, so for illustration here's that code:

func updateProgressWaveform(_ progress: Double) {
    let fullRect = viewModel.playbackWaveformImageView.bounds
    let newWidth = Double(fullRect.size.width) * progress

    let maskLayer = CAShapeLayer()
    let maskRect = CGRect(x: 0.0, y: 0.0, width: newWidth, height: Double(fullRect.size.height))

    let path = CGPath(rect: maskRect, transform: nil)
    maskLayer.path = path

    viewModel.playbackWaveformImageView.layer.mask = maskLayer
}

Originally posted by @dmrschmidt in https://github.com/dmrschmidt/DSWaveformImage/issues/21#issuecomment-782581320

[milaniterate]

Could you please provide a full example here, i am trying to archive in UIkit

Thanks

[dmrschmidt]

Given this has been asked for a few times now, I'll see to update the example in the near future with an implementation of this for SwiftUI and UIKit. I'll update this thread once it is pushed. May take a few days though until I find the time for it.

[dmrschmidt]

I've added an example of how one might do this and updated the README. There's code for UIKit and SwiftUI.

Note that I've intentionally not hooked the progress stuff up to any actual audio playback, to keep the code concise and relevant to the actual task as there's too many different ways people may play back audio.