Music Visualization Project
en
I set the goal of finishing one project every year. This year, 2016, I completed a project of visualizing sound. It hasn’t been long since I changed to front-end developer in order to use javascript, html and css more competently, so I lacked that experience during my venture, but I studied harder and was able to finish. It is not a fancy project with up to date technology and it was created in code style, which was often used in the past. Because I really appreciate the combination of art and technology, I began the project to make progress in this field as creative coder.
I drew with Canvas api and had some tips from an experienced designer colleague. Even though the test code is incomplete and needs more supplementary work, I hope that many people can enjoy music visually with my project. As there is still room for improvement, I welcome any feedback.
Supported browsers are Chrome, Firefox, Opera, Safari (excluding Safari mobile) and IE Edge. I tried testing with several browsers and I hope that the project works properly in these supported browsers.
Github: https://github.com/mojosoeun/SoundVisualizer
Toy Project URL :https://music.sonalee.me
ko
1년에 하나씩 toy 프로젝트하는 것을 목표로 두고 있는데 이번 2016년에는 sound를 시각화하는 프로젝트를 만들었습니다. 프론트엔드 직군으로 전향한지 얼마되지 않아서 프로젝트 진행 중간중간에 부족한 javascript,html,css를 좀 더 잘짜기 위해 틈틈히 공부하면서 만든 프로젝트인데요. 최신 기술이 깃들여진 fancy한 프로젝트는 아니고 이전에 많이 쓰던 코드스타일이지만 평소 art와 technology의 조합을 무척 좋아해서 Creative Coder로써 이 분야에 한발짝 다가가기 위해 시작하였습니다. Web Audio API를 이용해 음악의 frequency값에 따라 sound를 시각화 해주었고, 시각화하는데는 Canvas api을 사용하였습니다. 음악은 제가 좋아하는 서비스인 SoundCloud API를 이용하였고 디자인은 제가 다니는 회사의 멋진 디자이너 분께 팁을 얻어 디자인 했습니다.
아직 테스트코드도 미비하고 고치고 손봐야 할 부분이 많은 프로젝트 이지만 이 프로젝트를 통해 많이 분들이 음악을 눈으로 즐기셨으면 좋겠습니다. 어떠한 피드백이라도 환영합니다. 내년엔 이 프로젝트 연장선상으로 최신기술을 사용해서 개선해 나갈 거구요. 앤디워홀의 campbell soup 작품을 기반으로 새롭게 시각화하려고 합니다.
현재 지원브라우저는 Chrome,Firefox,Opera(Opera mini 제외),Safari(Safari mobile 제외),IE Edge 입니다. IE 11과 Safari mobile을 지원하고 싶었는데 IE11은 web audio api를 지원하지 않아서 아쉽게 이번 프로젝트에서는 지원하지 못하게 되었습니다. (browser stack으로 여러 브라우저에서 테스트 해본다고 했는데 제가 지원된다고 쓴 브라우저에서도 잘 되었으면 좋겠네요;;)
부족한 프로젝트이지만 개선점을 이야기 해주시면 저에게 큰 도움이 될 것입니다. 감사합니다.
Github: https://github.com/mojosoeun/SoundVisualizer
프로젝트 url : https://music.sonalee.me/
