Javascript 즉석 밴드 만들기

이전에 학원에서 프론트엔드과정 수업으로 만들었던 것이다.

구글에서 크리스마스에 나온 '산타추적기' 앱에 있었던 '엘프 즉석 밴드'를 보고 아이디어를 떠올렸는데,

다 만들고 나니까 몇가지 문제가 있었다.

 

처음에 만들었던 방식은

1. mousedown하면 각 악기들이 볼륨이 0으로 동시에 재생이 됨

2. 원하는 악기를 무대박스에 올려놓으면 해당 악기의 볼륨이 1이 됨.

3. 악기가 무대박스를 벗어나면 처음 위치로 돌아가서 다시 볼륨이 0으로 됨

 

여기서 나타나는 문제점은...

1. 왜인지 악기들의 싱크가 맞질 않는다.

2. 각 악기들의 처음위치인 offset().left 혹은 offset().top이 계속 오류가 난다. 제자리로 돌아오는 값을 찾지 못함

 

이것들을 해결하지 못해서 선생님께 여쭤 본 결과 직접적인 해답은 얻지 못하였고, 방식을 다르게 하라는 말을 듣고

이번에는 Drag&Drop 방식으로 만들었다. 전체적인 동작 방식은 비슷한데, 문제를 해결하기 위해서

    document.querySelector('body').addEventListener('mousedown', ()=>{
      let time = psound.currentTime;
      psound.currentTime = time;
      dsound.currentTime = time;
      bsound.currentTime = time;
      pcsound.currentTime = time;
      pdsound.currentTime = time;
      console.log(psound.currentTime, dsound.currentTime, bsound.currentTime, pdsound.currentTime, pcsound.currentTime)
    })

피아노의 재생시간을 변수에 저장하고, mousedown할때마다 그 시간을 다른 악기에 동시에 뿌려서 시간을 맞추었다.

 

이렇게 하니까 클릭할때마다 잠깐 멈칫멈칫 하는것은 있지만, 그래도 싱크가 안 맞는 일은 없게 되었다.

그리고 드래그앤드롭 방식이다 보니까 각자의 위치를 잘 찾아가기도 하였다.

https://skroy0513.github.io/band-sound/

Document

(웹페이지에서 ctrl + U 를 누르면 코드를 보실 수 있습니다. 혹시 이 문제에 대해 해결방법을 알고계신 분이나, 비슷한 사이트를 알고계신 분이 계신다면 말씀해주시면 감사하겠습니다.)

 

그래도 원하기는 첫번째 방식을 완벽하게 만들어보고 싶어서, 이 부분을 해결하기 위해 좀 더 알아보고 찾아봐야겠다.

참고로 노래의 코드는 '보니엠 - Sunny' 이다.(사운드 직접 다 만들어봤고, 멜로디는 코드만 따온거여서 굳이 만들지 않았다.)