클로바 더빙 MVP 클론

기능 구현 순서

1. 타임라인 이동 및 재생
   • 고정폭 (20초)
   • 클릭해서 이동
2. 음원박스 추가
   • 현재 위치에 음원 추가
   • 클릭해서 활성화 후 키보드로 이동
3. 음원박스 재생
   • 타임라인이 해당 위치로 가면 음원이 재생됨

추가 기능?

• 타임라인
  • 마우스 호버 위치 표시 (HoverPositionIndicator)
  • 현재 위치 드래그해서 이동
  • 단축키 - (좌우) 10초 이동, (cmd+좌우) 맨끝 이동
  • 재생 버튼
  • 확대/축소
  • 음원 박스 클릭시 해당 음원 시작 시간으로 이동
• 음원
  • 음원 로딩 최적화? - 클릭 전까지 최초 로딩 지연, 로딩 중 인디케이터 등
  • 에러 처리 - 시간끝에 닿거나 음원이 겹치면 경고
  • 애니메이션 regulation - 음원 앞뒤로 시간 여분 50ms 정도 추가
• 드래그 이동
  • 음원박스 드래그해서 이동
  • 현재 위치 드래그해서 이동

타임라인 이동 및 재생

UI 구성 요소

• 전체 컨테이너 (ProgressBar): 뷰포트이자 스크롤 영역. 너비 고정.
  • 전체 너비를 감싸는 Wrapper: 전체 길이에 따라 너비 늘어남.
• 현재 위치 표시 (CurrentPositionIndicator)
• 구간 표시바 (TimeStep)

구현 순서

• 단위간 고정폭으로 20초 분할 표시
• 뷰표트를 브라우저 폭에 맞춤, 스크롤로 이동
• 현재 위치 표시
• 클릭시 현재 위치 이동
• 위치로부터 시간 계산
• 스페이스바로 재생/일시정지
• 재생시 최대 길이 이후로는 자동 일시정지
• 클릭시 최대 길이까지만 이동

음원박스 추가 및 이동

구현 순서

• 음원 재생하는 버튼 구현 (Auido API 학습)
• 마크업 구조 변경 - 스크롤 영역을 상위 컨테이너(ProgressBar)로 옮겨야함. 아래 구성 요소 참고.
• 현재 위치에 음원 추가
• 추가 후 현재 위치를 음원길이만큼 뒤로 이동
• 스페이스바 이벤트 범위 늘리기
• 클릭해서 활성화 후 키보드로 이동

UI 구성 요소

• 음원 추가 버튼 리스트 (AudioAddForm)
  • 음원 추가 버튼 (AudioAddButton)
    • 음원 이름 디스플레이
    • 재생 버튼 (PlayButton)
    • 추가 버튼 (AddButton)
• 음원박스 타임라인 (AudioBoxTimeline)
  • 음원 박스 (AudioBox)

음원 재생

• 스페이스바로 0초부터 단순 재생
• 일시정지/재생
• 마우스로 클릭한 임의 위치부터 단순 재생
  • 빈 공간(음원이 없는 시간)에서 시작
  • 음원 중간에서 시작
• 재생 중에 마우스로 이동하여 재생
  • 음원 1 -> 빈 공간
  • 빈 공간 -> 음원 1
  • 음원 1 -> 음원 2
  • 음원 1 -> 음원 1