사운드클라우드 썸네일 추출

사운드클라우드의 오픈 API를 활용하여 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다.

사운드클라우드 API Key 발급

사운드클라우드 썸네일을 추출하기 위해서는 API Key 발급이 필요하다. 사운드클라우드 API에 접속하여 사용할 애플리케이션에 맞는 키 발급을 받으면 된다. 이 글에서는 자바스크립트를 이용하니 Client-side JavaScript Applications 을 선택하도록 한다. 물론 사전에 사운드클라우드에 가입해두도록 하자.

그 동안 다른 멀티미디어 서비스들에서는 Key 발급 없이 대체 방안을 강구했지만 사운드클라우드에서는 방법을 찾지 못했다.

Try out the Client-side auth flow 버튼을 클릭하여 계정과 연결하고 적당한 이름으로 애플리케이션을 생성하고 저장하도록 하자. 이때 Client ID를 기억해 두도록 하자. 이후 자신의 애플리케이션은 Your Applications에서 확인할 수 있다.

사운드클라우드 VID 추출

아래와 같이 어딘가에 사운드클라우드 플레이어가 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하지만, 사운드클라우드는 VID 이전의 값들도 재사용 가능하기에 이를 모두 추출하는 방향으로 진행된다.

<iframe width="100%" height="450" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/41340102&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" frameborder="no" scrolling="no"></iframe>

사운드클라우드 플레이어에 접근

삽입된 멀티미디어 소스코드들(iframe) 중에서 사운드클라우드 플레이어들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다.

var vurl = $('iframe').attr('src').match(/api.soundcloud.com\/tracks\/?([0-9]+)/i);

Ajax를 통해 json 데이터를 요청

추출한 vurl 값과 발급받은 Client ID를 이용하여 사운드클라우드에서 제공하는 API인 json 데이터에 Ajax를 통해 접근한다.

var ajaxUrl = 'http://'+vurl+'.json?client_id=발급받은 Client ID;
$.ajax({
    url: ajaxUrl,
    dataType: "json"
})    

json 데이터 확인

사운드클라우드에서 제공하는 json 데이터를 살펴보게 되면 썸네일과 관련된 artwork_url:썸네일주소 를 확인할 수 있다.

[{
...
"artwork_url":"https://i1.sndcdn.com/artworks-000020735170-gj7x4i-large.jpg"
...
}]

사운드클라우드 썸네일 크기

위에서 확인한 json 데이터에서 썸네일 url을 살펴보면 large 를 확인할 수 있는데 이 키워드를 기준으로 썸네일의 크기가 변경된다. 변경가능한 썸네일의 크기는 아래와 같다.

original : 썸네일의 원본크기

mini : 16x16 크기의 썸네일

tiny : 20x20 크기의 썸네일

small : 32x32 크기의 썸네일

badge : 47x47 크기의 썸네일

t67x67 : 67x67 크기의 썸네일

large : 100x100 크기의 썸네일(기본값)

t300x300 : 300x300 크기의 썸네일

crop : 400x400 크기의 썸네일

t500x500 : 500x500 크기의 썸네일

원하는 크기의 썸네일을 요청 및 생성

$.ajax({
    url: ajaxUrl,
    dataType: "json"

}).done(function (data) {
    var thumb = "원하는 썸네일크기 지정";
    var vsrc = data.artwork_url.replace('large', thumb);
    $('.thumbnail').append('<img src="'+vsrc+'">');

}).fail(function (data) {
    alert('사운드클라우드썸네일추출실패!');
});    

사운드클라우드 API

사운드클라우드는 애플리케이션 제작에 필요한 여러가지 정보를 제공하는 API를 제공한다. SoundCloud for Developers 를 이용하려면 사운드클라우드 계정과 애플리케이션을 등록해야 하고 Key 발급이 필요하다.

기타 멀티미디어 서비스 썸네일

• 유튜브 동영상 썸네일 추출
• 비메오 동영상 썸네일 추출
• 다음 tv팟 동영상 썸네일 추출
• 데일리모션 동영상 썸네일 추출