CODEWITHSUNDEEP
iosswiftuser-interfacebeatsmusicsoundwaves
Sham Dhiman
Sham Dhiman

Reputation: 1556

Create Waves Visualization Video Swift

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.

Upvotes: 4

Views: 1631

Answers (1)

Furkan Kaan Ugsuz
Furkan Kaan Ugsuz

Reputation: 76

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

Upvotes: 1

Related Questions