유튜브 API를 사용해서 음악 재생목록 만들기

   개요

유튜브에서 내가 원하는 음악 동영상을 리스트에 넣으면 자동으로 재생되게하는 Playlist를 

구현한다. 구글 엔지니어에서 지원하는 유튜브 API를 이용할 것이며 , 웹언어로 만든다.

이미 유튜브에서 재생목록 기능을 지원하지만 

유튜브에 로그인해서 재생목록을 직접 들어가야하는 번거로움을 감소시키고(얼마나걸린다고)

직접 구현하면 조금 더 유연하게 바꿀 수 있을거란 생각에 시도해봤다.

   프로그램 설명

음악 리스트는 Html에 Table로 간단하게 만들었으며 다음과 같이 구성해 볼 것이다.

순서	유튜브 주소	음악제목
1	https://www.youtube.com/watch?v=nZ0frZ9kcso	팝송 모음
2	https://www.youtube.com/watch?v=rD8iXrvL2EY	용준형 - 소나기

player는 위 표에 있는 유튜브 영상을 차례대로 실행한다. 

노래를 듣는게 목적이기 때문에 영상 배치는 좌측 상단에 조그맣게 해놓을 것이다.

그런데 사용자가 유튜브 주소만 가지고는 무슨 음악인지 모르기 때문에 

음악 제목을 적을 수 있게 만들어준다.

물론 해당 유튜브 영상의 제목을 자동으로 불러오게 할 수도 있지만 

또 다른 api 사용이 필요하므로 패스하겠다.

그리고 음악 삭제기능도 넣고

음악 순서도 사용자가 마음대로 바꿀 수 있게 Table_DnD 기능도 삽입한다.

다음은 프로그램에 추가적으로 넣을 기능이다.

음악 추가 , 음악 목록 초기화

다음 음악 , 이전 음악

순차 재생 , 무작위 재생

볼륨 업 다운

시간 조정( 현재 영상이 끝나고 다음 영상을 몇 초뒤 재생하게 할 것인지 )

기능 구현을 어떻게 했는지 대략적으로 설명 하겠다.

(이걸 읽는 사람은 html과 javascript , 기초적인 jquery 문법을 알고 있다고 가정한다)

음악 추가 같은 경우 jquery에서 append 기능을 활용하여 테이블의 맨 마지막 행에 

빈 목록을 추가 시키면 되고 , 목록 초기화는 jquery에 empty를 사용하여 비워낸다. 

그리고 음악 재생을 하려면 유튜브 영상 주소중에서 videoID만 얻어내면 되기 때문에

순차 재생은 

목록에 있는 url들의 비디오 id만 추출하여 차례대로 저장한다.

무작위 재생은 만들어진 videoID 목록에서 랜덤함수를 이용하여 아무거나 불러온다.

시간 조정은 해당 영상이 바로 실행되지 않고 n초 뒤에 실행하기 위해 setTimeout 함수를 쓴다.

다음,이전 음악 재생 기능은 현재 실행되는 음악 위치를 기억한다.

다음 음악은 음악 시간이 3분10초라면 현재 재생시간을 3분10초로 맞춰서 끝내게 만들고 

자연스럽게 다음 영상을 실행토록 한다.  

이전 음악은 현재 실행되고 있는 음악의 순서 -1을 하면 된다.

위 기능 중 유튭 API를 사용해야하는 부분이 있는데 다음 파트에서 살펴본다.

   유튜브 API 함수 샘플

참고 - https://developers.google.com/youtube/iframe_api_reference?hl=ko

   유튜브 비디오 ID 추출

사용자가 입력한 URL이 유튜브 영상 주소인지 체크하여

맞다면 해당 유튜브 영상의 videoID를 , 아니면 false를 반환한다.

function youtube_parser(url){

    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;

    var match = url.match(regExp);

    return (match&&match[7].length==11)? match[7] : false;

}

   API 호출

function loadYouTubeApi() {



  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag = document.getElementsByTagName('script')[0];

  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);



  videoID = videoIds[Math.floor(Math.random() * videoIds.length)];

  

}

videoIds에는 유튜브 영상들의 videoID가 들어있는데 랜덤하게 아무거나 가져온다.

   동영상 플레이어 생성

function onYouTubeIframeAPIReady() {

    yPlayer = new YT.Player('player', {
    
    height: '390',
    width: '640',
    videoId: videoID,
    
    playerVars : { 'disablekb' : 1, 'controls' : 0 , 'rel' : 0 }, 
                  // 키보드 입력 신호 차단 - 유튜브 제어 불가 - 관련 영상 삭제
    
     events: {   // 이벤트 발생 시 함수가 실행된다.
      'onReady': onPlayerReady, // 동영상 준비완료
      'onStateChange': onPlayerStateChange , // 동영상 종료
      'onError': onPlayerError // 동영상 에러 발생
    }
 });
} 

   유튜브 영상 제어

   IFrame Event

1. 동영상 재생 에러 발생

function onPlayerError(event) {

  // 유튜브 동영상 퍼가기 금지 해놨을 경우 반환되는 에러

  if ( event.data == 150 )

  { }

}

2. 동영상 플레이어 로드 완료

function onPlayerReady(event) {

  event.target.setVolume(70); // 볼륨 설정

  yPlayer.playVideo();  // 비디오 재생

} 

3. 동영상 플레이어 상태 변경

function onPlayerStateChange(event) {

// 현재 동영상 재생 종료됬을 경우

        if (event.data == YT.PlayerState.ENDED) {

// 5초뒤에 다음 영상 실행

          setTimeout(onPlayerStateChange_excute, 5000); 

         }

} function onPlayerStateChange_excute() { ...실행코드... }

   동영상 플레이어 제거

function yPlayerDestory()

{

if ( isEmpty(yPlayer) == false )

      {

     yPlayer.stopVideo();

     yPlayer.destroy();

     yPlayer = null;     

     return true;

} else return false;

}

  

   유튜브 영상 시간 구하기

1. 현재 재생 시간

yPlayer.getCurrentTime();

2. 총 재생 시간

yPlayer.getDuration();

※ 시간은 초(Second)로 반환된다.

   유튜브 영상 제목 따기

yPlayer.getVideoData().title;

헌데 영상 제목 얻는 코드가 현재 막힌 상태다.

그런데 개발자도구에서 콘솔로 직접 하면 먹히긴함;;

   결과물

유튜브 API를 적절히 활용하여 만들어보았다.

위 사진은 음악1이 재생되는 중이고 끝나면 음악2가 자동으로 재생된다. 

근데 큰 문제가 있다!!

유튜브 사용자가 영상에 퍼가기 금지를 설정해놓으면 재생이 안된다!! 

물론 금지 여부도 확인할 수는 있지만 음악 영상 중에 대다수가 퍼가기 금지 설정이 

되있는 것 같다. 실제 사용하려고 만들다가 이 사실을 알고 저장기능 구현 할 맘이 사라졌다..

결론 유튜브에 재생목록 기능을 이용하자..

굳이 쓰고 싶다면 호스팅하는 사이트에 코드를 등록시키고 사용하면 신기하게

퍼가기금지된것도 실행된다. 아니면 jsfiddle같은 코드 실행하는 사이트에서도 재생된다!

youtube playlist.zip

위 결과물에 대한 첨부파일이다. 

파일을 열어보면 코드에 불필요한 엔터와 공백이 많은데

에디터를 이것 저것 써서 작성하여 그런것 같다.

   유튜브 재생목록 사용

① 재생목록 생성

재생목록에 넣으려는 영상에 들어가서 

1. 저장을 누른다.

2. 새 재생목록 만들기를 클릭한다.

3. 재생 목록 이름을 입력하고 만들기를 누른다.

② 재생목록 추가

1. 재생목록에 추가할 영상에 들어간다.

2. 저장버튼을 누른다.

아까전 재생목록에는 나중에 볼 동영상밖에 없었는데 

본인이 새로 만든 이름으로 목록이 추가되어 있다.

해당 목록에 체크를하게 되면 추가된다.

③ 재생목록 수정

생성된 재생목록으로 이동하기 위해 

내 채널에 들어간다.

채널 맞춤설정을 누른다.

동영상 관리자를 누른다.

음악을 누른다.