title: How to display progress of AVPlayer playback of audio
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/CnMih.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CnMih.png" alt="Layout"></a> </p>
  
  <p>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.</p>
  
  <p>Here is a WaveformPlot Source: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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..&lt;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()
        
      }
    
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Source of a player I've implemented.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; error == nil
    }
    
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that it is required to show progress of a track currently playing in a corresponding cell waveform.</p>
  
  <p>It has to be similar to this:</p>
  
  <p><a href="https://i.stack.imgur.com/WhGKS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WhGKS.png" alt="enter image description here"></a></p>
  
  <p>What approach should i choose? I'm out of ideas how to implement this.
  Any help appreciated.</p>