How to display progress of AVPlayer playback of audio

Question

I'm building a music app that will have a feed of posts that contain url to music files. When a cell in UITableView becomes fully visible playback of a corresponding music track starts. This is a layout I have now.

Waveform is being generated by a server and I receive its data as an array of type [Float]. Complete waveform is a UIView that has a bar subviews with a height of a corresponding item from array from a server.

Here is a WaveformPlot Source:

class WaveformPlot: UIView {


  override init(frame: CGRect) {
    super.init(frame: frame)
    
  }
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    

  }

  //MARK: Populate plot with data from server response
  
  func populateWithData(from dataSet: [Float]){
    
    DispatchQueue.main.async {
      
      var offset: CGFloat = 0
      
      for index in 0..<dataSet.count {
        
        let view = UIView(frame: CGRect(x: offset,
                                        y:   self.frame.height / 2,
                                        width: self.frame.width / CGFloat(dataSet.count),
                                        height: -(CGFloat)((dataSet[index]) / 3)))
        
        let view2 = UIView(frame: CGRect(x: offset,
                                        y:   self.frame.height / 2,
                                        width: self.frame.width / CGFloat(dataSet.count),
                                        height: (CGFloat)((dataSet[index]) / 3)))
        
        
        
        //Upper row of bars adjust
        view.backgroundColor = UIColor.orange
        view.layer.borderColor = UIColor.black.cgColor
        view.layer.borderWidth = 0.25
        view.clipsToBounds = true
        view.round(corners: [.topLeft, .topRight], radius: 2)
        
       
        
        //Lower row of bars adjust
        view2.backgroundColor = UIColor.orange
        view2.layer.borderColor = UIColor.black.cgColor
        view2.layer.borderWidth = 0.25
        view2.round(corners: [.bottomLeft, .bottomRight], radius: 2)
        view2.layer.opacity = 0.6
        self.addSubview(view)
        self.addSubview(view2)
        
        offset += self.frame.width / CGFloat(dataSet.count)
        
      }
      
      //Create gradient
      
      let gradientView = UIView(frame: CGRect(x: 0, y: self.frame.height / 2, width: self.frame.width, height: -self.frame.height / 2))
      let gradientLayer = CAGradientLayer()
      
      gradientLayer.frame = gradientView.bounds
      gradientLayer.colors = [UIColor.black.cgColor, UIColor.clear.cgColor]
      
      gradientView.layer.insertSublayer(gradientLayer, at: 0)
      gradientView.layer.opacity = 0.9
      
      self.addSubview(gradientView)
    }

  }
  
  func clearPlot(){
  
    for item in self.subviews{
      
      item.removeFromSuperview()
      
    }
  
  }
}

Source of a player I've implemented.

class StreamMusicPlayer: AVPlayer {
  private override init(){
    
    super.init()
    
  }
  
  static var currentItemURL: String?
  
  static var shared = AVPlayer()
  
  static func playItem(musicTrack: MusicTrack) {
    
    StreamMusicPlayer.shared = AVPlayer(url: musicTrack.trackURL)
    
    StreamMusicPlayer.currentItemURL = musicTrack.trackURL.absoluteString
    
    StreamMusicPlayer.shared.play()
    
    
    
  }
}

extension AVPlayer {
  
  var isPlaying: Bool {
    return rate != 0 && error == nil
  }
  
}

The problem is that it is required to show progress of a track currently playing in a corresponding cell waveform.

It has to be similar to this:

What approach should i choose? I'm out of ideas how to implement this. Any help appreciated.

Answer 1

The method described by war4l is a way of showing the progress. But to actually get the progress you need to add a periodic time observer. Something like this.

let interval = CMTime(value: 1, timescale: 2)
StreamMusicPlayer.shared.addPeriodicTimeObserver(forInterval: interval, queue: DispatchQueue.main, using: { (progressTime) in

     let seconds = CMTimeGetSeconds(progressTime)

     if let duration = self.StreamMusicPlayer.shared.currentItem?.duration {                   

         let totalDurationInSeconds = CMTimeGetSeconds(duration)

         // Now you have current time and the duration so can display this somehow                          
    }
})