JC story

이전에 만들었던 Music App을 Loopstation으로 응용해보았습니다! Music App을 만들면서 이것저것 시도하다 보니 Loopstation에 대한 아이디어가 번뜩 떠올라 시도하게 됐습니다. ㅎㅎ 앱의 순서를 우선 보시면 Record 버튼을 눌러 녹음 시작 음이 담긴 A, S, D, F, G 키를 눌러 연주 Stop 버튼을 눌러 녹음 정지 및 다운로드, 그리고 녹음된 음원 중복 재생 reset 버튼을 통해 중복 재생 정지 입니다. HTML&CSS HTML과 CSS는 Music App에 기반됐습니다. Music App에서 추가적으로 녹음 시작 버튼, 중지 버튼, 리셋 버튼 그리고 녹음 경과 시간을 표시해주는 부분에 대한 p태그 이렇게 새로 추가되었습니다. 음원 장착 부분은 위에 링크된 Music..

이번에는 'Dev Ed' 유튜브에 있는 내용 중 Javascirpt Tutorial 중 하나인 Build A Mysic App With Javascript 를 진행하였습니다. 각 버튼을 누르면 사전에 저장해 놓은 소리가 나면서 간단한 jump animation 이 실행되는 예제입니다. 음이 들어간 예제를 해보니 더 재미있고 어떤 방향의 애플리케이션을 만들어 봐야겠다는 생각까지 들게 되네요! HTML HTML 구성은 매우 간단합니다. header에 h1 tag와 p tag 만 사용하여 간단하게 구성하였습니다. 그리고 각 버튼은 div를 이용하여 구성하고 div 안에 재생할 음악을 audio에 담습니다. CSS 공이 튀어 오르는 animation CSS는 @keyframes jump {}를 이용합니다. an..