유투브 재생목록 제목 가져오기

J. Fla의 커버 노래 제목을 가져오고 싶은데, 어떻게 할까?

우연히 듣게 된 J. Fla의 커버 노래 제목을 가져오고 싶은데? 어라 이 노래 좋다. 원곡자 노래 들어봐야지
이런 생각을 하다가, 음 쉽게 할 수 있는 방법은 뭐가 있을까 하다가 JavaScript로 빠르게 제목만 가져와야지 하면서
간단하게 코드를 짜보았다.

일단 유투버의 재생목록을 클릭하여 들어갔다.

J.fla의 커버 재생 목록으로 들어간다.

우측에 재생 목록이 뜨는데, 89개의 동영상 있다.

우선은 리스트의 상위 부모 노드를 찾아야 한다. 이때 크롬의 개발자 도구를 열어 HTML의 영억을 찍어 해당 li의 부모를 찾는다. 찾았더니 <ol>가 재생 목록 리스트의 상위 부모 노드더라.

그래서 우리는 상위 부모노드의 id 값이 있는지 확인 할 필요가 있다. 수 많은 마크업에서 해당 <ol>을 찾으려면 id가 지정 되어 있어야 갈 길이 편하다. (id가 없다고 해서 못찾을리는 없다. 다만, 귀찮을뿐..)

그렇게 찾고 보니 id가 있었다. id = "playlist-autoscroll-list"가 보였고, 이 정보를 가지고 재생 목록의 제목을 가져올 수 있다.

간단 코드

var playlist = document.getElementById('playlist-autoscroll-list'); // 리스트 부모 노드를 변수로 저장해둔다. 
//그리고 이제 우리는 li를 순회하면서 해당 제목을 가져와야 하는데 제목은 `data- 속성`으로 저장 되어 있었다. 
 var items = playlist.getElementsByTagName('li'); //li 전체를 변수에 저장해둔다. 
    for (var i = 0; i < items.length; i++) {
        var titleOfMusic = items[i].getAttribute('data-video-title');//data-video-title 속성에 저장된 값을 가져온다.
        console.log(titleOfMusic); //해당 제목을 개발자도구 console에 출력한다.
    }

위 코드 하나로 다음과 같은 결과를 얻을 수 있었다. 총 89개의 제목 리스트를 가져 올 수 있었다.

단, 여기서 문제점은 노래 제목 + ( cover by J.Fla )라는 문자열이 추가로 붙는다는 점인데, 이는 또 처리 하는 방법이 다양하다. 그렇지만, 일요일이므로 여기서 그만 두도록 하겠다.

당연히 위 코드를 리팩토링 하면, 재생 목록만 주면, 해당 목록의 제목 리스트를 추출하는 function으로 만들 수도 있다.

추가 코드

var musicListScrap = {} || musicListScrap;

(musicListScrap.extractFromYutube = function () {
    var playlist = document.getElementById('playlist-autoscroll-list');
    var items = playlist.getElementsByTagName('li');
    var titleList = [];
    for (var i = 0; i < items.length; i++) {
        var titleOfMusic = items[i].getAttribute('data-video-title');
        console.log(titleOfMusic);
        titleList.push(titleOfMusic);
    }
})();

나는 위 코드에 배열에 제목을 추가하는 작업을 해서 아래와 같은 배열을 얻었다.
그치만 보기가 힘드니…해당 데이터를 출력해서 사용 하면 된다.

["Ed Sheeran - Shape Of You ( cover by J.Fla )", "Rockabye - Clean Bandit ( cover by J.Fla )", "Titanium + Alone ( cover by J.Fla )", "Bad Things & I Don't Wanna Live Forever ( MASHUP cover by J.Fla )", "Alan Walker - Alone & Sing Me To Sleep ( MASHUP cover by J.Fla )", "The Weeknd - I Feel It Coming ( cover by J.Fla )", "Ariana Grande - Side To Side ( cover by J.Fla )", "We Don't Talk Anymore & I Hate U I Love U ( MASHUP cover by J.Fla )", "Martin Garrix - In The Name Of Love ( cover by J.Fla )", "Mike Perry - The Ocean ( cover by J.Fla )", "Let Me Love You & Faded ( MASHUP cover by J.Fla )", "Twenty One Pilots - Heathens ( cover by J.Fla )", "All We Know & Don't Wanna Know - The Chainsmokers & Maroon 5 ( MASHUP cover by J.Fla )", "Hailee Steinfeld - Starving ( cover by J.Fla )", "This Town & Say You Won't Let Go ( MASHUP cover by J.Fla )", "Shawn Mendes - Treat You Better & Mercy ( MASHUP cover by J.Fla )", "The Chainsmokers - Closer ( cover by J.Fla )", "Sia - The Greatest ( cover by J.Fla )", "Major Lazer ft Justin Bieber & MØ - Cold Water ( cover by J.Fla )", "The Chainsmokers - Don't Let Me Down ( cover by J.Fla )", "Taylor Swift - Style ( cover by J.Fla )", "Joel Adams - Please Don't Go ( cover by J.Fla )", "DJ Snake ft. Bipolar Sunshine - Middle ( cover by J.Fla )", "Meghan Trainor - No ( cover by J.Fla )", "Justin Bieber - Love Yourself ( cover by J.Fla )", "Adele - Million Years Ago ( Harp & Vocal Collab cover )", "Adele - When We Were Young ( cover by J.Fla )", "Ariana Grande - Focus ( acoustic cover by J.Fla )", "Sia - Chandelier ( cover by J.Fla )", "Adele - Hello ( cover by J.Fla )", "Ellie Goulding - Something In the Way You Move & Love Me Like You Do ( MASH UP cover )", "Sam Smith - Writing's On The Wall ( cover by J.Fla )", "Naughty Boy - Running (Lose It All) ft. Beyonce,Arrow Benjamin ( cover by J.Fla )", "Mercy - Duffy ( cover by J.Fla )", "Drag Me Down - One Direction ( soul version cover by J.Fla )", "R.City - Locked Away ft. Adam Levine ( cover by J.Fla )", "J.Fla - Hallelujah (Leonard Cohen)", "Green Day - American Idiot ( Komerican version cover by J.Fla )", "Major Lazer - Powerful (feat  Ellie Goulding & Tarrus Riley)( cover by J.Fla )", "Meghan Trainor - Like I'm Gonna Lose You ft. John Legend ( cover by J.Fla )", "Ed Sheeran - Photograph ( lonely version cover by J.Fla )", "Maroon 5 - Sugar ( bittersweet version cover by J.Fla )", "BIGBANG - IF YOU ( lonely version cover by J.Fla )", "Jason Derulo -  Want to want me  ( cover by J.Fla )", "David Guetta - Hey Mama feat.  Nicki Minaj & Afrojack ( cover by J.Fla )", "J.Fla - Fine On The Outside ( Priscilla Ahn )(추억의 마니 - When Marnie Was There)", "GD X TAEYANG - GOOD BOY ( GOOD GIRL cover by J.Fla )", "OneRepublic - Counting Stars ( cover by J.Fla )", "Maroon 5 - Animals ( cover by J.Fla )", "Taylor Swift - Shake It off ( cover by J.Fla )", "Rihanna - Take A Bow ( cover by J.Fla )", "John Legend - All Of Me ( cover by J.Fla )", "Maroon 5 - Maps ( cover by J.Fla )", "Bruno Mars - When I Was Your Man ( cover by J.Fla )", "Katy Perry - Roar ( cover by J.Fla )", "Taylor Swift - Red ( cover by J.Fla )", "Carly Rae Jepsen - Call Me Maybe ( cover by J.Fla )", "J.Fla - Amazing Grace", "The Beatles - Ob-La-Di, Ob-La-Da ( cover by J.Fla )", "Maroon 5 - One More Night ( cover by J.Fla )", "2NE1 - Ugly ( cover by J.Fla )", "Beyonce - Halo ( the first anniversary cover by J.Fla )", "Rihanna - Where Have You Been ( cover by J.Fla )", "Maroon 5 - Sunday Morning ( cover by J.Fla )", "Bruno Mars - Marry You ( cover by J.Fla )", "Maroon 5 - Payphone Feat. Wiz Khalifa ( cover by J.Fla )", "Bigbang - BAD BOY ( Bad Girl version cover by J.Fla )", "Selena Gomez - Love You Like A Love Song ( cover by J.Fla )", "Adele - Rolling In The Deep ( cover by J.Fla )", "Far East Movement - Live My Life (Feat. Justin Bieber) cover by J.Fla", "Kelly Clarkson - Stronger ( What Doesn't Kill You ) cover by J.Fla", "Adele - Set Fire To The Rain ( cover by J.Fla )", "Gym Class Heroes - Stereo Hearts Feat. Adam Levin of Maroon 5 ( cover by J.Fla )", "Katy Perry - The One That Got Away ( cover by J.Fla )", "Ra.D - I'm in Love ( cover by J.Fla )", "Wonder Girls - Be My Baby ( cover by J.Fla )", "One Republic - Good Life ( cover by J.Fla & Pierre & Mitch )", "Nicki Minaj - Super Bass ( cover by J.Fla )", "Justin Bieber - Mistletoe ( cover by J.Fla )", "The Ting Tings - Be The One ( cover by J.Fla ) & Travelling in Tokyo", "David Guetta - Without You ( feat. Usher ) ( cover by J.Fla )", "Bruno Mars - It Will Rain ( cover by J.Fla )", "Rihanna - Love The Way You Lie (Part 2)( cover by J.Fla )", "Rihanna Ft. Calvin Harris - We Found Love ( cover by J.Fla)", "Maroon 5 - Moves Like Jagger ( cover by J.Fla & Lonnie )", "Adele - Someone Like You ( cover by J.Fla )", "Bruno Mars - The Lazy Song ( cover by J.Fla )", "Jessie J - Price Tag ( cover by J.Fla )", "Beyonce - Halo ( cover )"]

위 데이터를 잘 정제하면 다음과 같은 노래 제목만을 얻을 수 있다.

데이터 정제

Ed Sheeran - Shape Of You ( cover by J.Fla )
Rockabye - Clean Bandit ( cover by J.Fla )
Titanium + Alone ( cover by J.Fla )
Bad Things & I Don't Wanna Live Forever ( MASHUP cover by J.Fla )
Alan Walker - Alone & Sing Me To Sleep ( MASHUP cover by J.Fla )
The Weeknd - I Feel It Coming ( cover by J.Fla )
Ariana Grande - Side To Side ( cover by J.Fla )
We Don't Talk Anymore & I Hate U I Love U ( MASHUP cover by J.Fla )
Martin Garrix - In The Name Of Love ( cover by J.Fla )
Mike Perry - The Ocean ( cover by J.Fla )
Let Me Love You & Faded ( MASHUP cover by J.Fla )
Twenty One Pilots - Heathens ( cover by J.Fla )
All We Know & Don't Wanna Know - The Chainsmokers & Maroon 5 ( MASHUP cover by J.Fla )
Hailee Steinfeld - Starving ( cover by J.Fla )
This Town & Say You Won't Let Go ( MASHUP cover by J.Fla )
Shawn Mendes - Treat You Better & Mercy ( MASHUP cover by J.Fla )
The Chainsmokers - Closer ( cover by J.Fla )
Sia - The Greatest ( cover by J.Fla )
Major Lazer ft Justin Bieber & MØ - Cold Water ( cover by J.Fla )
The Chainsmokers - Don't Let Me Down ( cover by J.Fla )
Taylor Swift - Style ( cover by J.Fla )
Joel Adams - Please Don't Go ( cover by J.Fla )
DJ Snake ft. Bipolar Sunshine - Middle ( cover by J.Fla )
Meghan Trainor - No ( cover by J.Fla )
Justin Bieber - Love Yourself ( cover by J.Fla )
Adele - Million Years Ago ( Harp & Vocal Collab cover )
Adele - When We Were Young ( cover by J.Fla )
Ariana Grande - Focus ( acoustic cover by J.Fla )
Sia - Chandelier ( cover by J.Fla )
Adele - Hello ( cover by J.Fla )
Ellie Goulding - Something In the Way You Move & Love Me Like You Do ( MASH UP cover )
Sam Smith - Writing's On The Wall ( cover by J.Fla )
Naughty Boy - Running (Lose It All) ft. Beyonce,Arrow Benjamin ( cover by J.Fla )
Mercy - Duffy ( cover by J.Fla )
Drag Me Down - One Direction ( soul version cover by J.Fla )
R.City - Locked Away ft. Adam Levine ( cover by J.Fla )
J.Fla - Hallelujah (Leonard Cohen)
Green Day - American Idiot ( Komerican version cover by J.Fla )
Major Lazer - Powerful (feat  Ellie Goulding & Tarrus Riley)( cover by J.Fla )
Meghan Trainor - Like I'm Gonna Lose You ft. John Legend ( cover by J.Fla )
Ed Sheeran - Photograph ( lonely version cover by J.Fla )
Maroon 5 - Sugar ( bittersweet version cover by J.Fla )
BIGBANG - IF YOU ( lonely version cover by J.Fla )
Jason Derulo -  Want to want me  ( cover by J.Fla )
David Guetta - Hey Mama feat.  Nicki Minaj & Afrojack ( cover by J.Fla )
J.Fla - Fine On The Outside ( Priscilla Ahn )(추억의 마니 - When Marnie Was There)
GD X TAEYANG - GOOD BOY ( GOOD GIRL cover by J.Fla )
OneRepublic - Counting Stars ( cover by J.Fla )
Maroon 5 - Animals ( cover by J.Fla )
Taylor Swift - Shake It off ( cover by J.Fla )
Rihanna - Take A Bow ( cover by J.Fla )
John Legend - All Of Me ( cover by J.Fla )
Maroon 5 - Maps ( cover by J.Fla )
Bruno Mars - When I Was Your Man ( cover by J.Fla )
Katy Perry - Roar ( cover by J.Fla )
Taylor Swift - Red ( cover by J.Fla )
Carly Rae Jepsen - Call Me Maybe ( cover by J.Fla )
J.Fla - Amazing Grace
The Beatles - Ob-La-Di, Ob-La-Da ( cover by J.Fla )
Maroon 5 - One More Night ( cover by J.Fla )
2NE1 - Ugly ( cover by J.Fla )
Beyonce - Halo ( the first anniversary cover by J.Fla )
Rihanna - Where Have You Been ( cover by J.Fla )
Maroon 5 - Sunday Morning ( cover by J.Fla )
Bruno Mars - Marry You ( cover by J.Fla )
Maroon 5 - Payphone Feat. Wiz Khalifa ( cover by J.Fla )
Bigbang - BAD BOY ( Bad Girl version cover by J.Fla )
Selena Gomez - Love You Like A Love Song ( cover by J.Fla )
Adele - Rolling In The Deep ( cover by J.Fla )
Far East Movement - Live My Life (Feat. Justin Bieber) cover by J.Fla
Kelly Clarkson - Stronger ( What Doesn't Kill You ) cover by J.Fla
Adele - Set Fire To The Rain ( cover by J.Fla )
Gym Class Heroes - Stereo Hearts Feat. Adam Levin of Maroon 5 ( cover by J.Fla )
Katy Perry - The One That Got Away ( cover by J.Fla )
Ra.D - I'm in Love ( cover by J.Fla )
Wonder Girls - Be My Baby ( cover by J.Fla )
One Republic - Good Life ( cover by J.Fla & Pierre & Mitch )
Nicki Minaj - Super Bass ( cover by J.Fla )
Justin Bieber - Mistletoe ( cover by J.Fla )
The Ting Tings - Be The One ( cover by J.Fla ) & Travelling in Tokyo
David Guetta - Without You ( feat. Usher ) ( cover by J.Fla )
Bruno Mars - It Will Rain ( cover by J.Fla )
Rihanna - Love The Way You Lie (Part 2)( cover by J.Fla )
Rihanna Ft. Calvin Harris - We Found Love ( cover by J.Fla)
Maroon 5 - Moves Like Jagger ( cover by J.Fla & Lonnie )
Adele - Someone Like You ( cover by J.Fla )
Bruno Mars - The Lazy Song ( cover by J.Fla )
Jessie J - Price Tag ( cover by J.Fla )
Beyonce - Halo ( cover )
Ed Sheeran - Shape Of You ( cover by J.Fla )
Rockabye - Clean Bandit ( cover by J.Fla )
Titanium + Alone ( cover by J.Fla )
Bad Things & I Don't Wanna Live Forever ( MASHUP cover by J.Fla )
Alan Walker - Alone & Sing Me To Sleep ( MASHUP cover by J.Fla )
The Weeknd - I Feel It Coming ( cover by J.Fla )
Ariana Grande - Side To Side ( cover by J.Fla )
We Don't Talk Anymore & I Hate U I Love U ( MASHUP cover by J.Fla )
Martin Garrix - In The Name Of Love ( cover by J.Fla )
Mike Perry - The Ocean ( cover by J.Fla )
Let Me Love You & Faded ( MASHUP cover by J.Fla )
Twenty One Pilots - Heathens ( cover by J.Fla )
All We Know & Don't Wanna Know - The Chainsmokers & Maroon 5 ( MASHUP cover by J.Fla )
Hailee Steinfeld - Starving ( cover by J.Fla )
This Town & Say You Won't Let Go ( MASHUP cover by J.Fla )
Shawn Mendes - Treat You Better & Mercy ( MASHUP cover by J.Fla )
The Chainsmokers - Closer ( cover by J.Fla )
Sia - The Greatest ( cover by J.Fla )
Major Lazer ft Justin Bieber & MØ - Cold Water ( cover by J.Fla )
The Chainsmokers - Don't Let Me Down ( cover by J.Fla )
Taylor Swift - Style ( cover by J.Fla )
Joel Adams - Please Don't Go ( cover by J.Fla )
DJ Snake ft. Bipolar Sunshine - Middle ( cover by J.Fla )
Meghan Trainor - No ( cover by J.Fla )
Justin Bieber - Love Yourself ( cover by J.Fla )
Adele - Million Years Ago ( Harp & Vocal Collab cover )
Adele - When We Were Young ( cover by J.Fla )
Ariana Grande - Focus ( acoustic cover by J.Fla )
Sia - Chandelier ( cover by J.Fla )
Adele - Hello ( cover by J.Fla )
Ellie Goulding - Something In the Way You Move & Love Me Like You Do ( MASH UP cover )
Sam Smith - Writing's On The Wall ( cover by J.Fla )
Naughty Boy - Running (Lose It All) ft. Beyonce,Arrow Benjamin ( cover by J.Fla )
Mercy - Duffy ( cover by J.Fla )
Drag Me Down - One Direction ( soul version cover by J.Fla )
R.City - Locked Away ft. Adam Levine ( cover by J.Fla )
J.Fla - Hallelujah (Leonard Cohen)
Green Day - American Idiot ( Komerican version cover by J.Fla )
Major Lazer - Powerful (feat  Ellie Goulding & Tarrus Riley)( cover by J.Fla )
Meghan Trainor - Like I'm Gonna Lose You ft. John Legend ( cover by J.Fla )
Ed Sheeran - Photograph ( lonely version cover by J.Fla )
Maroon 5 - Sugar ( bittersweet version cover by J.Fla )
BIGBANG - IF YOU ( lonely version cover by J.Fla )
Jason Derulo -  Want to want me  ( cover by J.Fla )
David Guetta - Hey Mama feat.  Nicki Minaj & Afrojack ( cover by J.Fla )
J.Fla - Fine On The Outside ( Priscilla Ahn )(추억의 마니 - When Marnie Was There)
GD X TAEYANG - GOOD BOY ( GOOD GIRL cover by J.Fla )
OneRepublic - Counting Stars ( cover by J.Fla )
Maroon 5 - Animals ( cover by J.Fla )
Taylor Swift - Shake It off ( cover by J.Fla )
Rihanna - Take A Bow ( cover by J.Fla )
John Legend - All Of Me ( cover by J.Fla )
Maroon 5 - Maps ( cover by J.Fla )
Bruno Mars - When I Was Your Man ( cover by J.Fla )
Katy Perry - Roar ( cover by J.Fla )
Taylor Swift - Red ( cover by J.Fla )
Carly Rae Jepsen - Call Me Maybe ( cover by J.Fla )
J.Fla - Amazing Grace
The Beatles - Ob-La-Di, Ob-La-Da ( cover by J.Fla )
Maroon 5 - One More Night ( cover by J.Fla )
2NE1 - Ugly ( cover by J.Fla )
Beyonce - Halo ( the first anniversary cover by J.Fla )
Rihanna - Where Have You Been ( cover by J.Fla )
Maroon 5 - Sunday Morning ( cover by J.Fla )
Bruno Mars - Marry You ( cover by J.Fla )
Maroon 5 - Payphone Feat. Wiz Khalifa ( cover by J.Fla )
Bigbang - BAD BOY ( Bad Girl version cover by J.Fla )
Selena Gomez - Love You Like A Love Song ( cover by J.Fla )
Adele - Rolling In The Deep ( cover by J.Fla )
Far East Movement - Live My Life (Feat. Justin Bieber) cover by J.Fla
Kelly Clarkson - Stronger ( What Doesn't Kill You ) cover by J.Fla
Adele - Set Fire To The Rain ( cover by J.Fla )
Gym Class Heroes - Stereo Hearts Feat. Adam Levin of Maroon 5 ( cover by J.Fla )
Katy Perry - The One That Got Away ( cover by J.Fla )
Ra.D - I'm in Love ( cover by J.Fla )
Wonder Girls - Be My Baby ( cover by J.Fla )
One Republic - Good Life ( cover by J.Fla & Pierre & Mitch )
Nicki Minaj - Super Bass ( cover by J.Fla )
Justin Bieber - Mistletoe ( cover by J.Fla )
The Ting Tings - Be The One ( cover by J.Fla ) & Travelling in Tokyo
David Guetta - Without You ( feat. Usher ) ( cover by J.Fla )
Bruno Mars - It Will Rain ( cover by J.Fla )
Rihanna - Love The Way You Lie (Part 2)( cover by J.Fla )
Rihanna Ft. Calvin Harris - We Found Love ( cover by J.Fla)
Maroon 5 - Moves Like Jagger ( cover by J.Fla & Lonnie )
Adele - Someone Like You ( cover by J.Fla )
Bruno Mars - The Lazy Song ( cover by J.Fla )
Jessie J - Price Tag ( cover by J.Fla )
Beyonce - Halo ( cover )

그럼 즐코딩!!

​