12. Slider 기능 구현

Silder에 대한 기능 구현

 

 

우리가 구현할 것은 아래와 같다.

1. 현재재생시간

2. totalDuration time

3. 시간이 지남에 따라 slider 이동

4. seeking

 

 

 

---

 

 

 

우선 시간을 표현하는 기능부터 구현하자.

 

 

 

timeObserver는 현재 재생되는 item의 시간을 일정하게 관찰하겠다를 의미한다.

—> addPeriodicTimeObserver: 일정 간격으로 시간을 관찰하는 녀석을 더하겠다. 라는 메소드를 구현해주면 된다.

(AVPlayer에 원래 내장 되어 있는 함수를 편하게 사용하기 위해 다음과 같이 구현하였다.)

 

 

 

 

 

---

 

 

 

 

우리는 위에서 필요한 파라미터를 전달해주면 된다.

 

 

 

1. CMTime

 

여기서 CMTime(Core Media Time)라는 것이 존재한다. 

우리가 관찰하고 싶은 시간 주기는 0.1초 이다. —> 이를 CMTime에 해당하는 값으로 바꿔야 한다.

 

우리는 현재 AVPlayer를 사용하고 있는데 이는 CMTime를 통해 만들어 져있다.

—> Python이 C를 기반으로 만들어 진것처럼 Core Media는 AVFoundation 밑에서 사용되는 놈들이다. 

AVFoundation도 밑에 있는 Core media에서 제공하는 툴들을 사용한다.

 

우리는 관찰하는 시간 주기는 0.1초 이기에 이를 CMTime 객체로 전달해줘야한다.

CMTime 객체는 시간과 그것에 대한 스케일을 지정해주면 된다.

 

 

우리는 1초를 10개로 나눈것이 0.1초 이기에 이를 아래와 같이 지정해주면 된다. 

기준 시간이 있고, 이를 몇개로 분할 시킬 것인가?

 

 

 

 

 

 

 

2. DispatchQueue

queue: DispatchQueue? —> queue: DispatchQueue.main 으로 구현한다.

우리가 Dispatch 관련해서는 차후에 싱크, 어싱크(동기, 비동기) 관련해서 concurrency(동시성)과 관련해서 배울 것이다.

여기서 간략하게 설명하면 

우리는 0.1초마다 UILabel을 update시킬것인데, UILabel은 main thread라는 공간에서 변경이 되어야 하는데,

Main thread에게 0.1초 마다 알려주겠다. 라는 내용이다.

 

 

 

 

 

 

 

3. using

 

Using

마지막 파라미터는 클로져이다. 

 

 

 

이 CMTime이 인자로 넘어오는데 이게 무슨 시간이냐면 —> 해당하는 곡의 현재시간을 넘겨받는다.

현재시간을 넘겨받아 업데이트를 해주면 되는 것이다.

 

 

우선 TimeObserver부분은 틀을 구현하였고 updateTime메소드를 수정해보자

 

 

 

---

 

 

updateTime()

 

 

우리는 update method는 updateTime()로 틀은 만들어 놓았다.

 

 

 

 

 

 

이를 수정해보자

 

 

 

 

 

이렇게 되면 우리는 현재 시간을 띄우는 것과 total 시간을 띄우는 것을 완성한 것이다. 

 

 

 

 

 

 

 

---

 

 

 

 

이제 시간에 따른 Slider update 기능을 구현해보자

 

 

우선 내가 Seeking(내가 원하는 지점으로 옮기기)를 하고 있지 않으면 자동으로 현재시간에 해당하는 만큼 움직여야 한다.

 

내가 Seeking를 한다고 하면 나의 input이 중요하기에 나의 Seeking을 위해 동그라미를 업데이트 시키면 안된다. 

 

그렇다면 내가 현재 Seeking 을 하고 있지 않다면 update 작업을 시행하도록 하자

 

 

 

 

 

 

 

 

 

그런데 생각해보면 0.1초 주기로 계속해서 시간을 업데이트하는 것을 확인할 수 있다. 그렇다면 위의 updateTime() 메소드 또한 계속해서 호출된다는 것을 알 수 있다. 그렇다면 if문 안에 timeSlider의 값을 바꿔주면 주기적으로 시간을 업데이트하며 슬라이더의 동그라미가 업데이트 됨을 확인할 수 있다.

 

 

 

전체시간에서 현재시간을 나눈만큼의 값을 timeSlider에 넣어주기만 하면 된다. 

여기서 currentTime와 totalDurationTime는 Double형이다. 그렇기에 type casting해주고 삽입한다.

 

 

 

 

 

이렇게 되면 해당 시간만큼 Slider의 동그라미가 이동 기능이 구현됨을 알 수 있다.

 

 

 

 

 

 

 

---

 

 

 

 

이제 Seeking만 구현하면 된다.

 

 

 

자! 생각해보자! 

현재 Slider은 비율로 나타내져 있기때문에 전체가 1이고 중간은 0.5이다.

이를 sender로 받아온것이다. —> position

여기서 전체시간을 곱해주면 우리가 지정한 position의 시간이 될 것이다. 

이를 CMTime 객체로 생성하여 AVPlayer에 있는 seek 메소드를 쉽게 사용하기 위해 구현한 

simplePlayer의 seek를 호출하여 time를 전달한 것이다.

이렇게 Seeking는 구현이 완료되었다.

 

 

 

 

 

 

 

 

 

우리가 만든 어플은 음악을 튼 다음 home 화면으로 돌아와도 음악이 정지 되지 않기에 

정지하고, 현재 아이템을 reset 시키는 기능을 함수로 호출하여 disappear 기능을 업데이트 하였다.