[ 자기 계발 ] 음악 작곡법 수업에서의 작곡에 대한 음악 플레이어, 시각적 뷰어 개발 구현 기록

이 소프트웨어는 개인적인 목적으로, 공부 용도로 개발되었습니다. 따라서 내부망에서 개발되었을 뿐, 외부 서비스, 제공 목적으로 서비스하지 않습니다. 따라서 라이선스 등 내부적인 사항들은 조사되지 않았습니다. 이 게시물은 단순히 Whitmem의 개발 기록을 남긴 게시물이며 업으로서 제공하지 않습니다.

요약

학교 작곡 수업에서 의도에 맞는 음악 멜로디를 만들고, 그 멜로디를 연주하는 소프트웨어 및 웹 사이트를 만들어보았습니다. 웹 사이트는 HTML CSS JS 를 기반으로 제작되었으며, 의존성은 Three.js 을 사용합니다.

사이트

개발 언어

주요 언어 : HTML JS CSS

개발 환경 : Linux

의존성 : three.js

개발 기간 : (2022년 6월경) 5일

작곡 도구 : Musescore4 및 스튜디오 원 소프트웨어

과제 기간 : (2022년 5월) 1달

개발 배경

2022년, 학교서 음악 수업을 들은 적이 있었습니다, 음악 작곡과에 대해 궁금증이 있었고, 한번 쯤 음악 전문쪽 학우들과 함께 공부 해 보고 싶다라는 생각에, 덜컥 전공 수업을 참여하게 되었습니다. 다행히 선택한 수업이 비전공자도 원활하게 들을 수 있었던 과정인지라, 저 또한 알고 있는 내용들과 배운 내용들을 융합하여 음악을 작곡할 수 있었고, 그 즐거운 과정들을 컴퓨터 소프트웨어로 표현하고 싶었습니다. 그 결과, 작곡 결과물인 wav에 MIDI 신호들을 섞어 음악과 함께 3D 차원에서 표현하는 사이트를 만들어보았습니다.

곡 이야기

5.887: 조용한 이슬비

15.253: 조용한 이슬비 비가 서서히 내리기 시작한다.

23.953: 서서히 소나기 비가 조금씩 거세지기 시작한다.

39.246: 소나기 소나기가 심해진다.

41.433: 폭우 비가 거세게 내린다.

59.161: 폭우 (x2) 비가 계속 거세게 내린다.

67.738: 폭우 (x2) 비가 계속 내린다.

76.585: 어두운 구름 잠시, 일시적으로 비가 그친다.

84.709: 빗방울 빗방울이 조금씩 떨어진다.

91.709: 폭우 준비 비가 굵어지기 시작한다.

93.758: 폭우 폭우가 내린다.

111.385: 소나기 (번외 이야기) 폭우가 진정되고, 비가 내린다.

128.86: 소나기 (번외 이야기) 소나기의 끝 점이 보인다.

137.363: 소나기 (번외 이야기) 비가 그치려고 하는 낌새가 보인다.

144.363: 어두운 구름 비가 일시적으로 멈춘다.

147.799: 번개/폭우(1 Key Up) 갑자기 천둥과 번개가 친다.

165.88: 번개/폭우(1 Key Up) 거센 비가 내린다.

183.363: 조용한 이슬비 비가 서서히 그쳐간다.

191.95: 조용한 이슬비 서서히 조용해진다.

기능 스냅샷

메인 화면

음악 재생에 따른 재생 상황 1

음악 재생에 따른 재생 상황 2

음악 재생에 따른 재생 상황 3

구현 과정

이 프로젝트의 대부분 기능은 자바스크립트로 구성되었으며, 화면 디자인은 HTML으로 구성하였습니다.

JS 파일 목록

간단하게 개발하였기에 클래스 등으로 구현하지는 않았으며 메인에서 바로 구현합니다.

박스 생성

음악 시간대에 맞춰서 일정한 박스를 생성합니다. 이 박스는 로컬 좌표계 기준 0,0,0 이므로, 피아노 간격에 따라 width height를 적절하게 맞추고 depth를 시간 길이에 따라 늘려 음악 시간대에 맞게 피아노가 눌리는 것 처럼 표현합니다.

업데이트 및 박스 제거

한편, 생성된 박스들은 시간이 지남에 따라 음악 재생 속도와 맞춰서 앞으로 이동합니다. deltaTime을 구해서 음악 시간에 맞춰 일정한 배율로 막대를 재생합니다. 한편, 화면상에 사라지는 박스는 더 이상 렌더링 할 필요가 없으므로, 성능 낭비를 막기 위해 오브젝트를 제거합니다.

파일 로드

한편 파일은 웹에 접속하면 동적으로 로드하며, 서버에서 데이터를 가져옵니다. 한편, 과제 제출을 위하여 서버 의존이 아닌 오프라인에서 재생 가능하도록 단순 html 으로 분리하기 위하여 로컬 js로 변환하였으며, 로컬 데이터베이스에서 파일을 읽고 파싱합니다.

로컬 데이터베이스 일부

고찰 사항

자바 스크립트에서 모듈 관리가 제법 힘들었습니다. 2022년 당시 모듈을 처음 접했기에, 앞으로 모듈의 중요성을 알게되었고 앞으로 개발하는 웹 소프트웨어들의 모듈 관리에 신경쓰기로 결정하였습니다.