Create Waves Visualization Video Swift

1.1k views Asked by At

Here is what I am trying to do:

Screen Shot

The screenshot is taken from a 6s iPhone.

Screen Shot

I have been working on create video wavefrom and I would like to draw a waveform which looks look like the first screenshot. I am using VIWaveformView Github pods to draw waves. but I m confused how to draw same waves.

Code:

@IBOutlet weak var vWmainWave: VIWaveformView!
override func viewDidLoad() {
    super.viewDidLoad()
    vWmainWave.waveformNodeViewProvider = BasicWaveFormNodeProvider(generator: { () -> NodePresentation in
        let view = VIWaveformNodeView()
        view.waveformLayer.strokeColor = UIColor(red:0.86, green:0.35, blue:0.62, alpha:1.00).cgColor
        return view
    }())
    vWmainWave.layoutIfNeeded()
    if let url = Bundle.main.url(forResource: "bulletTrain", withExtension: "mp4") {
        let asset = AVAsset.init(url: url)
        _ = vWmainWave.loadVoice(from: asset, completion: { (asset) in
        })
    }
}

Question: How to show the same waves as the original image(first screenshot)?

Can someone please explain to me how to draw same, I've tried to draw these waves but no results yet.

Any help would be greatly appreciated.

Thanks in advance.

1

There are 1 answers

1
Furkan Kaan Ugsuz On

you can check this part

var waveformView: VIWaveformView!
override func viewDidLoad() {
        super.viewDidLoad()
        
        
        view.backgroundColor = UIColor(red:0.10, green:0.14, blue:0.29, alpha:1.00)
        
        setupWaveformView()
        view.addSubview(waveformView)
        
        waveformView.translatesAutoresizingMaskIntoConstraints = false
        waveformView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 15).isActive = true
        waveformView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -15).isActive = true
        waveformView.topAnchor.constraint(equalTo: view.topAnchor, constant: 65).isActive = true
        waveformView.heightAnchor.constraint(equalToConstant: 80).isActive = true
        
        waveformView.layoutIfNeeded()
        if let url = Bundle.main.url(forResource: "Moon River", withExtension: "mp3") {
            let asset = AVAsset.init(url: url)
            _ = waveformView.loadVoice(from: asset, completion: { (asset) in
            })
        }
}

https://github.com/VideoFlint/VIWaveformView/blob/master/VIWaveformView/ViewController.swift