개발일지(4) - ListenApp

 

< 지난 포스팅 >

 

2023.02.03 - [개발일지] - 개발 일지(3) - ListenApp

개발 일지(3) - ListenApp

 

 

 

 

이전 포스팅 이후로 여행을 비롯한 약속들이 많아서 개발이 조금 늦어졌다ㅎ

목표는 개강전까지 출시였는데 3월말은 되어야 출시가 가능하지 않을 까 싶다.

 

 

 

 

< UI/UX >

 

먼저 UI는 다음과 같이 변했다. 크게 달라진 점들은 색깔로 구분을 해두었다.

 

 

먼저 상단의 빨간색 부분은 AB구간 반복을 구현했다. 

A버튼은 시작점을 설정할 수 있고, B버튼은 끝지점과 해당 구간을 반복하도록 할 수 있다.

"<<" 를 누르면 설정한 A지점으로 이동할 수 있고 휴지통은 설정을 초기화 시킨다.

 

 

다음으로 가운데의 파란색 부분은 현재 듣고 있는 파장을 보여준다.

현재 어절 단위로 구간을 나누어 두었고 이를 노란색으로 표시해 두었다.

또한 0.25초 단위로 눈금을 설정해 두어 용이하게 해두었다.

 

 

마지막으로 초록색 부분은 어절단위의 구간 반복과, 이동, 재생 속도를 구현했다.

어절단위 반복의 경우 해당 구간을 다른 색으로 칠해 구간을 알아볼 수 있도록 설정해두었다.

또한 재생속도 같은 경우 새로운 View를 띄워 설정할 수 있도록 구현했다.

 

 

왼쪽부터 순서대로 AB구간, 어절단위 반복, 재생 속도를 설정할 때의 모습이다.

 

 

 

 

< 기능 구현 및 막혔던 점 >

 

이전 포스팅에서 아래와 같이 말을 했었다.

 

""" 분석한 결과를 바로 이미지화 시키지 않고 분석한 값들을 저장한 이유는 이미지를 생성하고 저장하는 데 너무 오랜 시간이 걸리기 때문이다. 필자는 30분짜리 음성파일을 가지고 이미지를 생성했는 데 4분 정도가 걸렸다. 내가 사용자라면 해당 시간을 기다리진 않을 것 같다ㅎㅎㅎ 따라서 분석한 결과를 세분화 해 필요한 부분들을 이미지화 시키려고 한다. UITableView의 prefetch 처럼 scrollView와 currentTime를 통해 필요한 부분들을 이미지화하고 deque로 관리할 생각이다. """

 

그래서 scrollView에 stackView에 append, appendLeft, pop, popLeft 함수들을 만들어 deque를 구현했다. 파장 데이터로 고정된 크기의 이미지를 만들어 시간의 흐름에 따라 stackView 내의 이미지들을 관리해 주었다. 또한 눈금을 비롯한 AB반복의 표시 등 또한 해당 이미지를 생성할 때 같이 생성하도록 구현했다. 이 과정에서 오픈소스들을 읽어보면서 많이 배웠다!

 

 

 

 

 

또한 배속 설정을 할때 처음에는 modal 방식을 이용하려고 했다. 하지만 해당 방식을 사용하면 view가 띄워져 있는 동안 다른 동작(재생, 시점 이동, 구간 반복 설정) 등을 사용하지 못하지 때문에 모달보다는 view를 새롭게 바꾸어 주는 방식으로 구현하고자 했다. 따라서 배속 설정을 누르면 UIView에 가 ishidden false되고 animation을 통해 화면에 보여지도록 구현했다.

 

 

 

 

 

 AVAudioPlayer의 currentTime을 특정 시점으로 이동시키면 해당 시점부터 재생되는 게 아니라 해당 시점에서 0.04초 정도 앞에서 시작하는 문제가 있었다. 평소에는 큰 문제가 되지 않았지만 구간 반복을 할 때에 문제가 발생했다. 현재 시점이 시작점과 끝지점 사이가 아니라면 시작점으로 돌아가도록 설정을 하였는데, 시작점보다 전에서 시작하니 문제가 발생했다. 코드에 문제가 있다고 생각해 로그도 찍어보고 했지만 이유를 찾지 못했다... 결론은 시작점 판단할 때 0.05초 정도는 여유를 두고 판단하도록 설정해 해결했다. 일단 임시로 돌아가게 설정해둔 것이어서 추후에 해결해야할 점이다!

   

 

 

 

 

다음에는 오늘 player UI중에 색상을 비롯해 몇까지를 수정하고, 설정을 만들 예정이다!