TIL 25 Audio, 팝업, 볼륨조절, Object 객체

오늘은 해당 음원 audio 를 가져와서 재생, 정지, 볼륨조절 을 할수있게하고 이것을 팝업창에서도 실행되도록 props 로 그대로 그 값을 넘겨줘도 실행되는지를 체크하고 구현했다.

 

먼저 위 사진과 같이 useState을 사용하여 빈 오디오객체를 song1~3 까지 담아주었다. 담아준 이유는 만약 song1 이라는 기존 변수에 new Audio() 를 담아준다면 해당 {} 에서는 play()와, pause() , 볼륨 등등을 작동이 되지만 그 블록{}을 벗어나게 되면 밖에서는 해당음원 변수에 어떤 이벤트를 발생시켜 정지시키거나 볼륨을 줄이거나 할려고해도 먹히지않는다 이때 실행시키려는 audio와의 접점이 없다고 하여 전역 변수를 useState을 사용하여 어디서든 해당 state을 바꿔주거나 실행할수있게 해주었다.

해당 오디오가 담긴 object를 210번줄에서 props로 play라는 이름으로 song1 state을 넘겨주었다.

이때 이러한 에러 메세지가 뜨게 되는데 나는 오디오 object를 props로 넘겨주기때문에 해당 js에서 받아주지못하니 array를 사용하라는 에러인줄 알았다. 하지만 여러가지 수정을 해도 변함이 없길래 구글링하여 여러 블로그글을 확인해보니 보내주는게 아닌 받고나서 쓸때 잘못된 형식으로 랜더링되는 return 부분에서 쓰고 있었다.

이렇게 그냥 play 부분을 쓰게되면 Object 객체이므로 string 값이나 그 해당하는 값을 보여줄수없기 때문이다.

play안에있는 src 를 보여주고싶다면 play.src 를 하면된다. 하지만 딱히 필요없는 부분이라 지웠다.

그렇게 기존 플레하는 오디오객체를 불러와서 볼륨조절을 가능하게 되어서 페이지와 볼륨 아이콘을 추가해서 쓰기로 했다.

input 타입을 range로 주면 오른쪽과같이 바 형식으로 움직이면서 조절할수있게 된다. 이때 value 값을 우리가 쓰고있는 Volume State로 지정하여 실시간으로 바뀔수있도록해주었다.

 

이렇게 해서 볼륨조절이 잘되지만 중요한건

위와같이 해당 음원들을 import 하지않으면 변수를 쓰지않더래도 있어야지 음원을 읽어올수있게 된다. 나중에 서버에서 주는 URL로 쓰기때문에 상관없을거 같은데 현재 진행중인건 3개 정도의 오디오 mp3파일을 받아와서 쓰는데

import를 하지않으면 위에처럼 경로에 있는 음원을 play() 하라고해도 재생되지않는다.

 

 

궁금한건 보통 볼륨값으로 쓰는 useState값을 Set해서 쓸텐데 오디오는 객체형태라 그런지 위 코드처럼 Set하지않고 직접 접근하여 바꿀수있다는게 신기하다. song1.volume으로 접근해서 바꾼다는게 랜더링하면서도 바로바로 된다? 라는게 이해가 안되면서도 왜그런지 알고싶은 부분이기도 하다. 어차피 Set으로 음원의 volume값만 바꾸는건 안되는 부분이라고 생각하기도한다.

 

 

그렇게해서 완성한 화면이다. 내가고른 음원갯수만큼 볼륨조절할수있는 팝업이 뜨고 그 볼륨들을 바로바로 줄일수있게 해주었다.

해당 음원 객체를 props로 넘겨줘서 그대로 그 속성을 이용할수있다는게 신기하면서도 나중에 props로 쓸때 참고해야겠다고 생각했다.