2017-03-17 37 views
0

我正在構建一個音樂應用程序,該應用程序將擁有包含音樂文件URL的帖子的提要。當UITableView中的單元格變爲完全可見時,對應音樂曲目的播放開始。 這是我現在的佈局。如何顯示AVPlayer播放音頻的進度

Layout

正在由服務器生成的波形和我接收其數據類型[浮點]的數組。 完整的波形是一個UIView,它具有一個欄子視圖,其中包含一個來自服務器的數組中相應項目的高度。

這裏是一個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 
 
    } 
 
    
 
}

的問題是,它需要顯示當前正在播放的在相應小區波形軌跡的進步。

它必須是與此類似:

enter image description here

,我應該選擇什麼樣的方法?我不知道如何實現這一點。 任何幫助表示讚賞。

回答

1

war41描述的方法是一種顯示進度的方法。但要實際取得進展,您需要添加一個定期時間觀察員。像這樣的東西。

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

謝謝,我會盡我所能。 –

+0

我已經在解決方案的許多變體,似乎我失去了一些東西。當帖子完全可見時,我開始播放。 –

相關問題