ziggy321/touchsound

Web Audio Editor Project

touchsound's Issues

[완료] 몇 가지 개선해야 할 사항들

1. 줌인/줌아웃을 파형 캔버스의 세로축에 대해서도 적용할 수 있도록 하자. (완료)

2. 붙여넣기를 수정하자. (완료)

• 붙여넣을 트랙에 드래그한 영역이 없을 때 -> 재생바 위치를 기준으로 붙여넣되, 기존의 파형을 뒤로 밀어내준다.
• 붙여넣을 트랙에 드래그한 영역이 있을 때 -> 드래그한 영역의 파형을 지우고 붙여넣는다.

3. 드래그하는 도중에도 드래그 영역이 보이도록 수정하자. (완료)

녹음

현재 라이브러리를 가져와서 녹음을 구현하였으나
이를 라이브러리 없이 구현해보기로 하였음.

그리고 녹음한 오디오 데이터를 바로 파일로 저장하는 것이 아니라
바로 파형을 그릴 수 있도록 오디오 노드에 저장하도록 수정해야 함.

[완료] 효과와 파형

볼륨 조절이나 속도 조절 같은 효과의 경우, 변화를 파형에까지 반영하지는 못하고 있다.

볼륨과 속도 조절을 파형에 반영하기 위해 오디오 버퍼에 반영하는 방법은 알았다.
OfflineAudioContext는 오디오를 재생하는 것이 아니라 렌더링을 해준다.
렌더링하면 볼륨 조절과 배속/감속이 반영된 오디오 버퍼를 얻을 수 있다.
그러니까 효과를 파형에 반영하려면 효과를 변경할 때마다 렌더링을 해주어야 한다.

처음에 audioSource -> offlineAudioContext.destination 렌더링
렌더링 결과 => audioCurrent -> audioContext.destination 재생

이런 구조로 코드 수정 작업에 들어갔다.
그런데 예를 들어 배속/감속을 적용한 뒤에 파형을 편집하면
파형의 기준은 audioCurrent인데, 편집의 기준은 audioSource여야 한다.
배속/감속이 얼마나 됐는지를 감안하여(파형의 길이가 달라지므로) audioCurrent의 파형을 기반으로 audioSource를 수정해야 한다.

코드가 다소 번잡할 듯하여 다른 사항을 먼저 구현하기 위해 일단 보류해두었다.

위의 구현을 포기할 경우 그 대신
전체 재생뿐만 아니라 각 트랙마다 단독 재생 기능을 부여하고
각 트랙마다 배속이 다를 수 있으므로 재생바가 독립적으로 움직이도록 할 것 같다.
(배속을 파형에 반영하면 재생바의 속도는 줌 상태에만 의존하며 모든 트랙에 대해 일괄적으로 움직인다.)

현재에는 배속에 따라 재생바 속도가 달라지도록 해놓았다.

---

볼륨과 배속 조절은 렌더링을 하지 않아도 파형이 변화하도록 구현하였다.
볼륨과 배속 조절 외의 새 효과를 적용할 때마다 렌더링 발생하도록 구현할 것이나,
현재 프로젝트 남은 기간을 생각할 때 새 효과를 추가하는 것은 후순위로 미뤄두기로 한다.

결과적으로 자르고 붙이기, 볼륨 조절, 배속 조절이 발생했을 때에는
렌더링을 바로바로 해주지는 않는다.
파일을 저장할 때 해당 효과들을 렌더링해주도록 구현하였다.

[완료] 편집 기능 보완할 사항

복사/잘라내기는 기본적으로 마우스 이벤트 위치에 해당하는 트랙만 복사/잘라내기한다.
그러나 붙여넣기할 트랙을 고르는 매커니즘은 존재하지 않는다. 이를 해결한다.

채널 단위의 편집 기능을 지원하고, 채널 선택 기능을 추가.
복사/잘라내기/붙여넣기할 트랙이나 채널 선택 기능.

복사/잘라내기한 트랙/채널과 붙여넣기할 트랙/채널 사이의 호환성 체크.
(같은 채널 수를 가진 트랙 단위의 작업인지, 채널 단위의 작업인지, 혹은 트랙->채널이나 채널->트랙의 경우 트랙의 채널 수가 1개인지)
호환이 안 되면 예외 처리.

---

작업한 사항)

드래그한 부분 delete하는 버튼 추가하였음.

편집 모드 선택 기능 추가 (트랙/채널)
트랙 캔버스의 가장자리 2px을 빨간색으로 바꿔서 select한 트랙을 표시한다.
채널 캔버스의 가장자리 2px을 파란색으로 바꿔서 select한 채널을 표시한다.
채널 단위로 자르고 붙일 수 있다.

재생 바 구현이 완료되면, 재생 바 위치를 기준으로 붙여넣기를 하도록 수정할 계획이다. (이는 재생 바 관련 이슈에 이미 언급되어 있다.)

효과 추가 및 조절 기능

음소거, 구간 반복
볼륨 조절, 핏치 조절, 속도 조절, 리버브

---

각 트랙별 음소거, 볼륨 조절, 속도 조절을 구현하였음. (채널 단위로는 미구현으로 현재 경고 메세지를 띄움)
볼륨 조절과 속도 조절의 경우, 변화를 파형에까지 반영하지는 못하고 있음.
이들 프로퍼티 값의 변화가 AudioBufferSourceNode의 buffer 속 오디오 데이터에는 반영이 되지 않는다는 문제점이 있음.

---

파일을 저장할 때에 대해서 당장 재생할 때 적용되는 것과 같은 효과들을 그대로 렌더링할 수 있게 수정해야 함.

---

볼륨 조절과 배속이 파형에 바로 반영되도록 구현하였다.
파일을 저장할 때 볼륨 조절과 배속이 렌더링되도록 구현하였다.

구간 반복 기능 구현 보류

재생 도중에 배속/감속 시 재생바 위치가 실제 재생과 맞지 않는 문제 2

재생 도중에 배속/감속 시 재생바 위치가 실제 재생과 맞지 않는 문제를
테스트 중에 발견하였었고,
이를 다음의 방법으로 해결하였었다.

"재생 도중 배속/감속 시, 현재 재생바 위치에 따른 배속/감속된 트랙의 재생 시점을 알맞게 갱신한 뒤,
한 순간 pause했다가 다시 재생할 때
해당 트랙이 배속으로 재생 시점이 재생바보다 느려졌으면 나머지 트랙의 재생 시점을 해당 재생 시점으로 모두 갱신하고
해당 트랙이 감속으로 재생 시점이 재생바보다 빨라졌으면 해당 트랙의 재생 시점을 다른 트랙의 재생 시점으로 갱신함으로써
해당 문제를 해결하였다."

그러나, 이럴 경우 배속/감속이 적용된 트랙이 있을때 재생바를 옮긴 뒤 재생하면 의도한 위치와는 다른 위치로 바뀌며 재생이 시작되는 문제가 발생했다.

그래서 재생 바를 옮기면 잠시 일시정지했다가 다시 재생할 때,
재생 바를 옮기지 않고 재생 바의 위치에 맞춰 재생 시점을 변경한 뒤
다시 재생하는 것으로 변경하였다.

[완료] 파일 불러오고 재생

파일 불러오고
재생하여 이를 검증하였음.

<10월 계획 > 기능 검증 대상

~ 10월 말 : 기능 검증 // 최대한 여력 닿는 데까지
파일 불러오기
마이크 녹음
파일 저장 - 파일명, 형식, 경로 지정
오디오 파형 그리기
볼륨 조절
핏치 조절
감속 배속
자르기 붙이기
템포 조절

시나리오 구상 전에 - 오디오 편집기 직접 좀 써보기

녹음 수정 사항

녹음 시, 빈 트랙이거나 채널 수가 1인 트랙에만 녹음을 허용한다.
재생 바 위치를 기준으로 녹음한다.
붙여넣기/녹음 위치가 트랙의 길이보다 클 때 트랙을 연장한다.
녹음 위치에 이미 녹음된 내용이 있을때 덮어쓴다.

~10/12 음성파일 저장

미팅(13일) 전날까지 audio editor를 통해 작업된 결과물을 음성 파일로 저장하는 기능을 구현해본다 -현의
중간중간 피드백 할 예정이며 이후의 일정은 기능 구현 후 논의.

웹 오디오 API 활용 실습 및 다른 기술이나 오픈소스 조사

웹 오디오 API 소개 : https://developer.mozilla.org/ko/docs/Web/API/Web_Audio_API

웹 오디오 API를 실습해볼 수 있도록 간단한 웹 페이지를 하나 구현한 뒤,
요구사항에서 요구하는 기능들을 실습해보며 API에 대한 이해를 깊이 하며 숙련도를 높인다.

또한 다른 기술이나 오픈소스에 대해서도 조사해본다.

10/10 회의록

10/12 까지

• 각자 맡은 API 구현(음성파일 저장, 마이크 녹음)

• 활동 방향 및 계획 구상

~10/12 마이크 녹음 기능

미팅(13일) 전날까지 마이크로 녹음하는 기능을 구현해본다- 하성
중간중간 피드백 할 예정이며 이후의 일정은 기능 구현 후 논의.

최소 요구사항 정리

녹음 or 음성파일 -> 음악 편집(자르기, 효과 적용, 음성파형 노출) -> 음악 파일 생성 <UI 개선>

여기까지가 기본적으로 구현해야 할 최소 요구사항이며,
UI를 어떻게 구현할 것인지에 대한 고민이 가장 중요해보인다.

참고할 사이트 : https://audiomass.co/

최소 요구사항을 모두 구현한 뒤 시간적 여유가 된다면,
추가적인 구현 사항에 대해서도 생각해보도록 한다.

[완료] 파형 그리기 개선

최댓값을 1로 기준 삼아 상대적인 값으로 파형을 그렸다.
이는 복사 및 붙여넣기 시 최댓값이 바뀌면 파형에 변화를 크게 일으키는 문제가 있었다.
그래서 1로 기준 삼을 최댓값을 모든 트랙에 대해 일괄적으로 정해서 그리는 것으로 변경.

wave의 높이를 나타내는 값 중에 padding 이하의 값은 0이 되어버리는 문제가 있었고, 그래서 파형이 다소 부자연스러웠는데, 이를 해결하였다.

파형 색상이 랜덤으로 결정되도록 수정하였다.

재생 도중 재생바 위치 변경 기능

재생 도중 재생바 위치 변경할 수 있도록 기능 추가

줌, 재생 시간 표시 구현

타임라인 바 구현
음원길이/캔버스길이 비율 조절 기능 추가 (1픽셀당 몇 초로 할 것인지를 직접 조절할 수 있게)

비율이 조금이라도 변경될 때마다 캔버스를 다시 그리는 방법은
컴퓨터의 작업량이 많아진다는 결점이 있다.
canvas context의 scale을 활용하면 해결될 것 같다.

---

줌 기능을 구현하였고,
canvas context의 scale을 활용해도 어차피 다시 그려야 하는 문제가 있었기에
그냥 다시 그리는 방법을 택했다.

현재 재생 시간이 표시되도록 구현되었다.

타임라인 바 구현 보류

파일 저장

여러 트랙을 한 파일로 합쳐서 저장할 것.
duration은 가장 긴 트랙의 duration을 갖도록 한다.

[완료] 다중 트랙 지원

트랙들을 여러 개 추가하여 작업할 수 있도록 인터페이스와 기능을 구현하였음.

CSS프레임워크 수정해야 할 사항들

1. 트랙의 길이가 길거나, 줌인으로 스크롤이 발생하면 스크롤을 할 때 상단의 메뉴바가 따라올 필요가 있어보임.
2. 트랙의 길이가 트랙을 감싼 박스를 뚫고 나오는 현상이 있음. 박스가 함께 커지도록 할 필요가 있어보임.
3. 상단 메뉴의 버튼들의 배치가 다소 이상함. 재생 시간의 경우 줄바꿈이 생김. 이를 위해 크기 조절이 필요해보임.

재생 도중에 배속/감속 시 재생바 위치가 실제 재생과 맞지 않는 문제.

재생 도중에 배속/감속 시 재생바 위치가 실제 재생과 맞지 않는 문제를
테스트 중에 발견하였다.

---

재생 도중 배속/감속 시, 현재 재생바 위치에 따른 배속/감속된 트랙의 재생 시점을 알맞게 갱신한 뒤,
한 순간 pause했다가 다시 재생할 때
해당 트랙이 배속으로 재생 시점이 재생바보다 느려졌으면 나머지 트랙의 재생 시점을 해당 재생 시점으로 모두 갱신하고
해당 트랙이 감속으로 재생 시점이 재생바보다 빨라졌으면 해당 트랙의 재생 시점을 다른 트랙의 재생 시점으로 갱신함으로써
해당 문제를 해결하였다.

기본적인 웹 페이지를 구현할 도구 조사

1. node.js, React.js, next.js 등의 프레임워크들의 특성을 조사한 뒤, 무엇을 활용할지 정하고
   html, css, javascript 등 기본적인 언어들까지 포함하여
   요구사항에 맞춰 필요한 공부 내용들을 정리

2. vs code, intelliJ 등 개발 툴의 특징이나 차이점에 대해 조사한 뒤,
   어떤 툴을 활용하여 개발할지 정하기

10/1 회의록

강의 영상 실습 10/3까지 완료할 것.
다음은 10/3에 회의할 내용.

다음 단계 : 웹 페이지 간단하게 하나 만들고 웹 오디오 api 실습 시작

1. 음성 파일이나 녹음을 통해 오디오 데이터 불러오기 + 오디오 데이터로 음성 파일 새로 생성
2. 편집 과정 구현

10/3 회의록

10/6까지 다음을 실습

• 음성 파일이나 녹음을 통해 오디오 데이터 불러오기
• 오디오 데이터를 저장한 새 음성 파일 생성하기

[완료] 재생 바 구현

1.재생/일시정지/멈춤/다시 재생 , (AudioBufferSourceNode)당 start 호출이 한번만 가능한 문제를 해결
2.재생 바 움직임/정지/클릭 , 캔버스 위를 클릭하면 해당 위치로 이동
3.드래그 파형 편집(자르고 붙이기) , 재생바를 기준으로 붙이기가 가능하며 트랙 배경 캔버스 필요한 만큼 확장
4.파일 불러오기 or 녹음 , 재생바를 기준으로 로드
5.줌인(용량이 큰 파일에 대한 작업 개선)

인터페이스 개선

CSS 프레임워크를 활용해 인터페이스를 보기 좋게 개선하자.

---

css 프레임워크 부트스트랩을 알아봐서 적용을 시도했지만
도중에 멀쩡했던 기능들에 문제가 생기기도 했고
사용법도 좀 미숙해서 숙지한 뒤에
다른 기능들을 마저 점검하고 그 다음에 적용보려고 함

복사 붙여넣기 오류

파형을 복사 후 붙여넣기 시
선택 영역 표시에 오류가 발생한다.

[완료] 오디오 파형 그리기/편집

다음 기능들을 검증/구현하였음.

다중 채널 파형 그리기
파형 선택 영역 표시 (살짝 어둡게 만듦)
파형 선택 영역 자르고 붙이기

검증 과정에서 붙이는 것은 현재 잘라낸 위치에 다시 붙이는 방식으로 임시로 구현되어 있음.