[JavaScript] 음악 스펙트럼 플레이어 만들기

요즘 도리 노래에 빠졌는데 유튜브 플레이리스트에 도리 신곡이 없어서 내가 플레이리스트를 만들어 보았다. 처음에는 플레이리스트를 유튜브에 올려보려고 영상편집을 배워봤는데 툴을 뭐 쓸지 고민하다 결국 js로 만들게 되었다 ㅋㅋ 

 

미리보기

플레이리스트

 

먼저 앨범 이미지는 iTunes에서 가져올 수 있다고 해서 이미지를 다운 받았고, mp3파일은 지니에서 구매했다. 지니가 3개월동안 할인을 많이 해줘서 싸게 음악을 다운받을 수 있었다.

 

iTunes

https://decoupled.app/itunes-artwork-finder/?term=&country=us&entity=album

iTunes Artwork Finder

 

genie

https://pay.genie.co.kr/buy/discount

음악, 그리고 설레임 - 지니

 

코드는 그냥 인덱스 하나 만들어서 이전 다음 버튼을 누르면 인덱스 값이 변경된다. 인덱스에 따라 앨범 이미지, 노래가 바뀐다. 딱히 어려울게 없어서 스펙트럼을 추가 해 볼까 한다. webAPI 중에 AudioContext 라는 걸 찾아보니 오디오의 파형을 리턴해준다고 한다. 

 

이거 이용하면 스펙트럼을 만들 수 있을 것 같아서 준비중이다. 완성되면 추가 할 예정이다. 현재까지의 코드는 다음과 같다.

const MUSIC_ARR = ["dori", "pateco", "QWER"];
let isPlay = false;

// 오디오 선언
const audio = document.querySelector(".audio");
let index = 0;

// 현재 인덱스 실행
function musicStart(idx) {
  audio.src = `./assets/music/${MUSIC_ARR[idx]}.mp3`;
  audio.load();
}

// 플레이 버튼 선언
const mainBtn = document.querySelector(".mainBtn");

// 이전, 다음 버튼 선언
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");

// 일시정지

function pauseMusic() {
  mainBtn.classList.remove("play");
  audio.pause();
  console.log("pause");
  isPlay = false;
  mainBtn.style.backgroundImage = "url(./assets/images/svg/play.svg)";
}

// 노래 시작

function playMusic() {
  mainBtn.classList.add("play");
  audio.play();
  mainBtn.style.backgroundImage = "url(./assets/images/svg/pause.svg)";
  mainBtn.style.backgroundRepeat = "no-repeat";
  mainBtn.style.backgroundSize = "contain";
  mainBtn.style.backgroundPosition = "center center";
  console.log("play");
  isPlay = true;
}

// 재생 & 일시정지 이벤트리스너

mainBtn.addEventListener("click", () => {
  console.log(isPlay);

  //pause
  if (isPlay) {
    pauseMusic();
  }

  //play
  else {
    playMusic();
  }
});

// 음악이 끝났다면 자동 다음 곡

audio.addEventListener("ended", () => {
  index += 1;
  if (index >= MUSIC_ARR.length) {
    index = 0;
  }
  musicStart(index);
  albumImg(index);
  playMusic();
});

// 이전 다음 인덱스 설정
nextBtn.addEventListener("click", () => {
  index += 1;
  if (index >= MUSIC_ARR.length) {
    index = 0;
  }
  musicStart(index);
  albumImg(index);
  if (isPlay) {
    playMusic();
  }
});

prevBtn.addEventListener("click", () => {
  index -= 1;
  if (index < 0) {
    index = MUSIC_ARR.length - 1;
  }
  musicStart(index);
  albumImg(index);
  if (isPlay) {
    playMusic();
  }
});

// 앫범 이미지 변경
const album = document.querySelector(".album");

function albumImg(idx) {
  console.log(index);

  const style = document.createElement("style");
  style.textContent = `
    body::before {
      transition: .3s;
      background-image: url('./assets/images/${MUSIC_ARR[idx]}.jpg');
    }
  `;
  document.head.appendChild(style);
  album.style.transition = ".3s";
  album.style.backgroundImage = `url('./assets/images/${MUSIC_ARR[idx]}.jpg')`;
}

window.addEventListener("load", () => {
  albumImg(index);

  musicStart(index);
});

 

음악 재생

function playMusic() {
  mainBtn.classList.add("play");
  audio.play();
  mainBtn.style.backgroundImage = "url(./assets/images/svg/pause.svg)";
  mainBtn.style.backgroundRepeat = "no-repeat";
  mainBtn.style.backgroundSize = "contain";
  mainBtn.style.backgroundPosition = "center center";
  console.log("play");
  isPlay = true;
}

음악을 재생하는 부분이다. 스타일만 주었고 실제로 음악을 플레이하는 기능은 audio.play() 한 줄이다. isPlay 라는 변수를 두어 일시정지, 플레이를 토글할 수 있도록 구현했다.

 

이전 곡 / 다음 곡

nextBtn.addEventListener("click", () => {
  index += 1;
  if (index >= MUSIC_ARR.length) {
    index = 0;
  }
  musicStart(index);
  albumImg(index);
  if (isPlay) {
    playMusic();
  }
});

인덱스를 1씩 증가 및 감소한다. 인덱스에 따라 앨범 커버와 노래를 변경한다. 만약 플레이 중 다음 버튼을 눌렀다면 다음 노래가 바로 나올 수 있도록 조건문 처리 했다.

 

프로그래스바랑 음원의 스펙트럼은 아직 못만들어서 만들어지면 포스팅 할 예정이다.