(reactjs)음악 플레이어 만들기(3-1) - 재생목록 제작

안녕하세요.

이번 시간에는 리액트로 음악을 추가하고 재섕할 수 있는 재생목록을 만들어보도록 하겠습니다.

먼저 아래 코드는 음원 파일을 사이트에 등록하는 코드입니다.

코드는 다음과 같습니다.

import React from 'react';
import jsmediatags from 'jsmediatags/dist/jsmediatags.min';
import { useMusicDispatch, useMusicNextId } from '../MusicContext';

function b64toBlob(dataURI) {
    
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

function CircleButton() {
    const dispatch = useMusicDispatch();
    const nextId = useMusicNextId();
    const handleAudio = (e)=>{
        let files = e.target.files
        for (let i = 0; i < files.length; i += 1) {
        let file = e.target.files[i]
       const urlObj = URL.createObjectURL(file);
        let src = urlObj
        
        jsmediatags.read(file, {
  onSuccess: function(tag) {
    let title = tag.tags.title;
    let artist = tag.tags.artist;
    let tagCover = tag.tags.picture;
    
    if (tagCover) {
            let base64String = '';
            tagCover.data.forEach((data) => { base64String += String.fromCharCode(data); });
            // base64 dataImage
            tagCover = `data:${tagCover.format};base64,${window.btoa(base64String)}`;
            tagCover = b64toBlob(tagCover);
            tagCover = URL.createObjectURL(tagCover)
          }
          
    dispatch({
      type: 'CREATE',
      music: {
        id: nextId.current,
        src: src,
        title: title,
        artist:artist,
        tagCover:tagCover
      }
    });
    nextId.current += 1;
    
  },
  onError: function(error) {
    alert(JSON.stringify(error));
  }
});
    }
    }
          
  return (
      <>
<input id="audio-upload" type="file" onChange={handleAudio} multiple="multiple" style={{"display":"none"}}/>

        </>
        
      );
}

export default CircleButton;

코드를 분석해보면 먼저 저는 파일에서 앨범아트와, 음원제목, 아티스트명 등을 추출 하기위해 "jsmediatag"라는 모듈을 사용하였습니다.

그리고 Context api를 사용하였는데 Context api는 음원파일의 정보와 앨범아트를 온라인에 객체 형식으로 저장해줍니다. 브라우저에서 사용할수 있는 local storage와 비슷하다고 생각하시면 되는데 이걸 다루는 방법은 다음강의에서 자세히 설명해드리도록 하겠습니다.

 

위쪽에는 b64toBlob() 라는 함수를 만들어 주었는데 이 함수는 base64를 blob으로 바꾸어 주는 역할을 합니다. 이렇게 해준 이유는 base64로 저장을 하게되면 용량이 커지기 때문입니다.

 

또한 urlobj를 사용하면 blob://~형식의 url을 반환해 주는데 클라이언트에서 받은 음원을 blob으로 변환하여 따로 백엔드에 저장하지않아도 클라이언트만으로도 재생할 수 있게됩니다.

 

다음강의는 context api를 이용하여 음원 파일을 클라이언트 상에서 저장하는 방법을 알려드리겠습니다.