ios - 如何显示AVPlayer播放音频的进度

Question

我正在构建一个音乐应用程序，它将有一个包含音乐文件 url 的帖子提要。当 UITableView 中的单元格变得完全可见时，开始播放相应的音乐轨道。这是我现在的布局。

波形由服务器生成，我收到它的数据作为类型 [Float] 的数组。完整的波形是一个 UIView，它有一个条形 subview ，其高度是服务器数组中相应项目的高度。

这是一个 WaveformPlot 源:

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()
      
    }
  
  }
}

我实现的播放器的来源。

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
  }
  
}

问题是需要在相应的单元格波形中显示当前播放轨道的进度。

它必须类似于这样:

我应该选择什么方法？我不知道如何实现这个。任何帮助表示赞赏。

Answer 1

war4l描述的方法是一种显示进度的方式。但要真正获得进展，您需要添加一个周期性时间观察器。像这样。

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                          
    }
})