ABOUT ME

-

Total
-
  • HTML 자바스크립트 오디오 소스 조작
    컴퓨터/HTML & JS & TS 2017. 6. 28. 14:45
    728x90
    반응형

     

    사이트 접속하자마자 자동 재생됨 (순서 랜덤), 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 끝
    

     

     

    728x90

    댓글