AVPlayer. Add Periodic TimeObserver to Update Music Playback Slider

In this Swift code example, you will learn how to make the music playback slider smoothly move as the music continues to play so that the user is visually aware of how much of the music file has been already played and how much is left to play.

• Create AVPlayer and AVPlayerItem
• Create UIButton programmatically
• Create AVPlayerLayer and add it as a subview
• Handle Play Button action to Pause and Play music
• Add UISlider as a subview
• Handle UISlider value changed event
• Determine music file duration in seconds
• Set UISlider maximum value equal to music file duration in seconds
• Add addPeriodicTimeObserverForInterval to AVPlayer

AVPlayer. addPeriodicTimeObserverForInterval Example in Swift.

Before we look at a more complex example of how the addPeriodicTimeObserver() function can be used with the AVPlayer to play the music file, let’s have a look at a very simple code example first.

Below is a very simple code example of how to use the addPeriodicTimeObserver() function with the AVPlayer.

player!.addPeriodicTimeObserver(forInterval: CMTimeMakeWithSeconds(1, preferredTimescale: 1), queue: DispatchQueue.main) { (CMTime) -> Void in
     if self.player!.currentItem?.status == .readyToPlay {
         let time : Float64 = CMTimeGetSeconds(self.player!.currentTime());
         self.playbackSlider!.value = Float ( time );
     }
 }

Complete Code Example

Now that you have seen how to use the addPeriodicTimeObserver() function in a very simple code example above. Let’s have a look at how to use it in a UIViewController. Below is a complete code example of UIViewController that creates an AVPlayer and plays an MP3 music file. The music file is loaded from a remote location using its URL.

Try running this code example in your project. As music continues to place, the music playback slider should move smoothly.

import UIKit
import AVFoundation
class ViewController: UIViewController  {
    
    var player:AVPlayer?
    var playerItem:AVPlayerItem?
    var playButton:UIButton?
    var playbackSlider:UISlider?
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        let url = URL(string: "https://s3.amazonaws.com/kargopolov/kukushka.mp3")
        let playerItem:AVPlayerItem = AVPlayerItem(url: url!)
        player = AVPlayer(playerItem: playerItem)
        
        let playerLayer=AVPlayerLayer(player: player!)
        playerLayer.frame=CGRect(x: 0, y: 0, width: 10, height: 50)
        self.view.layer.addSublayer(playerLayer)
        
        playButton = UIButton(type: UIButton.ButtonType.system) as UIButton
        let xPostion:CGFloat = 50
        let yPostion:CGFloat = 100
        let buttonWidth:CGFloat = 150
        let buttonHeight:CGFloat = 45
        
        playButton!.frame = CGRect(x: xPostion, y: yPostion, width: buttonWidth, height: buttonHeight)
        playButton!.backgroundColor = UIColor.lightGray
        playButton!.setTitle("Play", for: UIControl.State.normal)
        playButton!.tintColor = UIColor.black
        //playButton!.addTarget(self, action: "playButtonTapped:", forControlEvents: .TouchUpInside)
        playButton!.addTarget(self, action: #selector(self.playButtonTapped(_:)), for: .touchUpInside)
        
        self.view.addSubview(playButton!)
        
        
        // Add playback slider
        
        playbackSlider = UISlider(frame:CGRect(x: 10, y: 300, width: 300, height: 20))
        playbackSlider!.minimumValue = 0
        
        
        let duration : CMTime = playerItem.asset.duration
        let seconds : Float64 = CMTimeGetSeconds(duration)
        
        playbackSlider!.maximumValue = Float(seconds)
        playbackSlider!.isContinuous = false
        playbackSlider!.tintColor = UIColor.green
        
        playbackSlider?.addTarget(self, action: #selector(self.playbackSliderValueChanged(_:)), for: .valueChanged)
        //playbackSlider!.addTarget(self, action: "playbackSliderValueChanged:", for: .valueChanged)
        self.view.addSubview(playbackSlider!)
        
        
        player!.addPeriodicTimeObserver(forInterval: CMTimeMakeWithSeconds(1, preferredTimescale: 1), queue: DispatchQueue.main) { (CMTime) -> Void in
            if self.player!.currentItem?.status == .readyToPlay {
                let time : Float64 = CMTimeGetSeconds(self.player!.currentTime());
                self.playbackSlider!.value = Float ( time );
            }
        }
        
    }
    
    @objc func playbackSliderValueChanged(_ playbackSlider:UISlider)
    {
        
        let seconds : Int64 = Int64(playbackSlider.value)
        let targetTime:CMTime = CMTimeMake(value: seconds, timescale: 1)
        
        player!.seek(to: targetTime)
        
        if player!.rate == 0
        {
            player?.play()
        }
    }
    
    
    @objc func playButtonTapped(_ sender:UIButton)
    {
        if player?.rate == 0
        {
            player!.play()
            //playButton!.setImage(UIImage(named: "player_control_pause_50px.png"), forState: UIControlState.Normal)
            playButton!.setTitle("Pause", for: UIControl.State.normal)
        } else {
            player!.pause()
            //playButton!.setImage(UIImage(named: "player_control_play_50px.png"), forState: UIControlState.Normal)
            playButton!.setTitle("Play", for: UIControl.State.normal)
        }
    }
    
}

I hope that this Swift code example was helpful for you. There are more tutorials and Swift code examples that show how to play a music file in Swift if you check this page Swift Code Examples.