HTML 자바스크립트 오디오 소스 조작

 

사이트 접속하자마자 자동 재생됨 (순서 랜덤), HTML5 audio(id=player) 위젯 삽입 필요

HTML5 기본 위젯뿐만 아니라 커스텀 플레이 버튼이 있을 경우를 위함 (오디오 소스 플레이하고 재생 중인 곡 정보 얻기)

※ 크롬 오디오 정책이 변경되어 음소거된 음악/영상만 자동 재생됩니다.

 

예) toast + FAB

 

※ playinginfo 가 현재 재생하는 곡 정보

 

LIVE

See the Pen #jsmusic by 최석원 (@alfex4936) on CodePen.

 

// ESLint 부분 적용
let player;

// 오디오 파일 리스트
const audioFiles = [
  'music/1.mp3',
  'music/2.mp3'
];

// 현재 재생 곡 정보 manually 불러오기
let playinginfo;
const lists = [
  '제목 - 아티스트',
  '제목 - 아티스트'
];

// 방문할 때마다 순서 다르게
function shuffle(a) {
  let j;
  let x;
  let i;
  for (i = a.length; i; i -= 1) {
    j = Math.floor(Math.random() * i);
    x = a[i - 1];
    a[i - 1] = a[j];
    a[j] = x;
  }
}

function preloadAudio(url) {
  const audio = new Audio();
  audio.addEventListener('canplaythrough', loadedAudio, false);
  audio.src = url;
}

let loaded = 0;
function loadedAudio() {
  loaded += 1;
  if (loaded === audioFiles.length) {
    // 전부 로드됐으면 플레이
    init();
  }
}

function play(index) {
  player.src = audioFiles[index];
  getSRC();
  player.play();
}

let i = 0;
function init() {
  play(i);

  player.onpause = function () {
    // 커스텀 플레이 버튼 조작 (toPlay Icon)
  };
  player.onended = function () {
    next();
  };
  
  player.onplay = function () {
    if (!player.seeking) {
    // 커스텀 플레이 버튼 조작 (toPause Icon)
    }
  };
}

function next() {
  i += 1;
  if (i >= audioFiles.length) {
    i = 0;
  }
  play(i);
}

function getSRC() {
  switch (player.src) {
    case 'music/1.mp3': //ex) ttt.com/music/1.mp3
      playinginfo = lists[0]; // 제목1 - 아티스트1'
      document.getElementById('current').innerHTML = playinginfo;
      break;
    case 'music/2.mp3':
      playinginfo = lists[1];
      document.getElementById('current').innerHTML = playinginfo;
      break;
    default:
      playinginfo = '알 수 없음';
      document.getElementById('current').innerHTML = playinginfo;
      break;
  }
}

// 아래 부분은 onload 부분에 추가
// 오디오 목록 셔플
shuffle(audioFiles);

// player 오디오
player = document.getElementById("player");
for (let i in audioFiles) {
  if (Object.prototype.hasOwnProperty.call(audioFiles, i)) {
    preloadAudio(audioFiles[i]);
  }
} // onload 끝