자바스크립트로 음악 재생기를 만들어보자
오늘 그래서 뭘 해볼거냐... 두가지를 해볼건데
1. 당신 컴퓨터에 있는 음악 파일(예: *.mp3)을 열어서
2. 재생할거다.
끝이다. 나한테 많은 걸 기대하지 말라.
파일 첨부를 할 수 있게끔 만들자
컴퓨터에 있는 파일을 불러오려면 input type="file"을 써야 한다. 그리고 이 인풋을 통해 사용자가 음악 파일만 입력하도록 해야 하는데
<input type="file" id="uploader" accept=".mp3, .wav, .wma, .flac">내가 아는 음악파일이 이거밖에 없으니 걍 이것만 함.
그리고 저 파일 첨부하는 거 그대로 올라와있는 거 뵈기 싫어서 라벨 연결하고 숨겼다.
본격적으로 자바스크립트에 들어가자
올 것이 왔다. 아주 크나큰 난관이 예상되지만 아무튼...
const musicUpload = document.querySelector('#uploader');
var audio = new Audio(musicUpload.file);
audio.load();
audio.volume = 1;
audio.play();원래 이런건 한번에 되는 게 이상한거긴 한데... 왜 안되는지 모르겠음. audio.play()에서 Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first. 라는 오류가 나고 있다.
const musicUpload = document.querySelector('#uploader');
const playMusic = document.querySelector('#playmusic');
playMusic.addEventListener('click', ()=>{
var audio = new Audio(musicUpload.file);
audio.load();
audio.volume = 1;
audio.play();
})저게 브라우저에서 자동 재생을 막아서 그렇다는겨. 그래서 버튼을 만들어주고, 파일을 올린 다음 재생하게끔 했는데 저것도 재생이 안되는거다. 그래서 지피티한테 물어봤지.
- .file이 아니라 **.files[0]**을 사용해야 합니다.
- input[type="file"] 요소에서 사용자가 업로드한 파일을 가져오려면 .files[0]으로 첫 번째 파일을 접근해야 합니다.
- 또한 Audio() 생성자에 Blob URL을 전달해야 브라우저가 로컬 파일을 재생할 수 있어요.
예? 뭘 하라고요?
왜 files[0]일까?
Input[type="file"] 파일 정보 갖고 오기
파일의 정보를 잘 확인할 수 있음을 알수있다.
velog.io
우연히 찾았던 이 사이트에서 그 답을 찾았다. result 코드에 FileList라고 나오길래 아 얘도 쿼리셀렉터올처럼 인덱싱이 필요하구나… 하고 이해했음. 블롭 URL은 내가 올린 음악 파일을 처리하기 위해 임시 URL을 만들어주는 거라고 생각하면 된다.
참고로 파일을 불러온 상태에서 console.log로 files를 가져오면 이렇게 뜬다.
playMusic.addEventListener('click', () => {
const file = uploader.files[0];
if (!file) {
alert("오디오 파일을 업로드해주세요.");
return;
}
const audio = new Audio(URL.createObjectURL(file));
audio.volume = 1;
audio.play();
});아무튼 그래서 이렇게만 하면 일단 재생은 된다. 재생은.
오디오 컨트롤러 넣기
일단 저 상태에서 열고 재생해도 되는데, 문제가 뭐냐면 이건 걍 bgm이다. 그래서 재생버튼을 누르면 오디오 콘트롤러가 뿅 하고 튀어나오게 만들건데... 이것도 지피티가 짜줌. 헤헤.
const playerContainer = document.querySelector('#playercontainer');일단 기존 HTML의 버튼 밑에 새로운 div를 만든다. 여기다가 audio 태그를 붙일거다.
playMusic.addEventListener('click', () => {
const file = uploader.files[0];
if (!file) {
alert("오디오 파일을 업로드해주세요.");
return;
}
playerContainer.innerHTML = '';
const audioElement = document.createElement('audio');
audioElement.controls = true;
audioElement.src = URL.createObjectURL(file);
playerContainer.appendChild(audioElement);
});그리고 이렇게만 하면 된다. 이렇게 하고 음악 파일을 열고 버튼을 누르면 audio태그가 뿅 하고 나온다. 이제 버튼 위치 잡아야지… ㅡㅡ
아, 참고로 오디오 태그가 추가된 버전은 자동재생이 안되기때문에 재생버튼을 눌러야된다.
오디오태그는 커마가 안되나요?
결론부터 말하자면 길이 외에는 커마가 안 된다. 저게 길이 늘린 버전이고, 직접 본인이 만들거나 라이브러리를 받아와야 한다…
지피티의 힘으로 커마 완료함. 반복재생이요?
그것도 커마 했다.
여기까지 지피티의 힘을 빌려서 커마 끝… OTL 이게 하나 하면 또 추가하고싶고 이거 추가하면 또 추가하고싶고 해서 해달라는게 점점 늘어요… 얘는 과정은 따로 서술 안 하고 깃헙에 올리기만 하겠습니다. 참고로 글꼴은 변경했고 생각보다 한글 글꼴중에 한자 지원 안 하는 글꼴이 많아서 구글 웹폰트에서 일본어 폰트 따로 추가했습니다.
현재 지원되는 기능은
1. 플레이리스트(파일 여러개 여는거)
2. 반복재생(전체반복, 한곡반복, 반복없음)
3. 셔플(사진에는 ON되어있음)
4. 앨범 아트, 아티스트, 제목 불러와서 표시하기
5. 이전곡 일시정지(재생) 다음곡
이정도…
오늘의 결론: 지피티와 함께라면 뭐든지 만들 수 있다. 남자친구 빼고