오디오 대신 사운드클라우드

아래 오디오는 티스토리에서 삽입한 것입니다. 아마 이 글을 PC에서 본다면 아래 오디오가 보이지만 스마트폰이나 태블릿PC에서 본다면 안 보입니다. 왜냐하면 제가 모바일웹 스킨을 사용하지 않기 때문입니다. 모바일 웹스킨을 사용하면 모바일에서 모바일 페이지로 이동하지만 이 블로그는 PC 페이지로 이동합니다. 이렇게 되는 것은 블로그마다 다릅니다. 자세한 내용을 아래에서 합니다.

1. Train_Room_-_Horizons.mp3

티스토리에서 오디오로 음악을 삽입하면 위와 같은 플레이어가 PC에서는 제대로 나타나지만 스마트폰이나 태블릿PC에서 블로그의 모바일 페이지가 아닌 PC 페이지를 보면 나타나지 않습니다. 위 플레이어는 스마트폰 등 모바일에서는 모바일 페이지에서만 보입니다. 그러면 일반적으로 반응형 스킨을 사용하면서 모바일웹 스킨을 사용하지 않는 블로그는 안 보입니다. 그렇다고 모든 반응형 스킨이 모바일웹 스킨을 사용하지 않는 것은 아닙니다. 일반적으로 반응형 스킨에서는 반응형을 제대로 맛보기 위해서 모바일웹 스킨을 사용하지 않는 경향이 있습니다.

더 자세히 적겠습니다. 오디오에 마우스 커서를 갖다대면 아래 그림과 같이 Adobe Flash Player라고 나와 플래시라는 것을 알 수 있습니다. PC와 달리 스마트폰 등 모바일 브라우저는 플래시를 지원하지 않습니다. 모바일 브라우저에서 플래시를 지원하지 않으니 많은 사람이 고생할 것입니다. 참고로 크롬은 플래시를 NAAPI 지원을 중단했으므로 아래와 같이 플래시에는 재생 버튼이 생깁니다. 그것을 눌러야 플래시가 제대로 보입니다. 플래시는 동영상입니다. 여담으로 최근에 다음 홈페이지 광고에 아래와 같은 재생 버튼이 나오더군요. 이것에 대해서는 2015/09/25 - 플래시 사용 현황,티스토리,네이버 블로그,구글 블로그에서 적었으니 길게 적지 않겠습니다.

그러면 PC와 모바일 페이지를 모두 만족할 만한 음악 플레이어를 생각해봐야 할 것입니다. 이를 해결해 줄 것이 사운드 클라우드라는 것이 있습니다. 아래 보이는 것이 사운드 클라우드에 음악을 올려서 티스토리 페이지에 삽입한 것입니다.

- 사운드 클라우드에 대해서 -

그러면 사운드 클라우드를 페이지에 삽입하기 위해서 거기에 음악을 올리고 Share 버튼을 누르면 아래 그림처럼 Embeded에 삽입할 수 있는 소스를 제공합니다. 그것을 페이지에 삽입하면 됩니다. 그림을 보니 워드프레스 코드는 따로 제공하네요. 반응형이라 반응형 페이지에서도 잘 작동합니다. 그리고 사운드 클라우드는 외국에서 운영되므로 외국 블로그인 구글 블로그에서 특별히 이미지를 올리지 않아도 사운드 클라우드를 인식하여 나타내줍니다. 아쉬운 것이 있다면 영어로 서비스하니 영어를 모른다면 어려울 것 같습니다. 그렇지만 간단한 영어만 안다면 그렇게 어려울 것 같지 않습니다. 참고로 Share로 트위터,페이스북,텀블러,메일 등으로 공유 가능합니다.

사운드 클라우드는 Play 스토어에서 앱으로도 볼 수 있는데 사이트나 앱은 영어입니다. 앱에서는 음악을 업로드 할 수 없는 것 같고 녹음과 인터넷에서 올린 음악을 듣을 수 있는 것 같습니다. 그리고 앱이 영어라 어려울 수 있으나 거기에서 복잡한 작업을 할 예정이 아니라면 그렇게 어렵지 않을 것 같습니다. 

아래에서 간단히 텀블로,구글블로그,네이버 블로그에서 사운드 클라우드 사용 여부에 대해서 다루었으니 관심있으면 보세요.

텀블러사운드 클라우드를 사용하는 블로그는 텀블러가 있습니다. 아래는 텀블러에서 오디어를 클릭하면 나오는 화면입니다. 노래 검색이나 URL 붙여넣기로 사운드 클라우드를 삽입할 수 있습니다. 사운드 클라우드에 오디오를 올리면 URL이 생기는데 그것은 위 그림에서 Share가 나옵니다. 단 그곳에 올린 것이 private가 아닌 public으로 설정돼야 합니다.  하드디스크에 있는 오디오를 바로 올릴 수는 없습니다.

구글과 네이버 블로그블로그를 보면 네이버 블로그의 스마트 에디터 3.0에서 오디오에 관한 것은 없고 HTML이 안되므로 사운드 클라우드를 사용할 수 없습니다. 구글 블로그의 경우는 에디터에 오디오는 없으나 HTML을 사용할 수 있으니 사운드 클라우드를 사용할 수 있습니다. 제가 구글 블로그에서 사용해봤거든요. HTML을 사용할 수 있다는 것이 장점이 이런 것이고 제한이 없다는 것이 이런 장점입니다. 

HTML이 가능하다고 되는 것도 아닙니다. 네이버 블로그는 iframe(아이프레임) 태그를 막기 때문에 스마트에디터 2.0에서도 안됩니다. 그러니 개고생하지 마세요. HTML 제한이 없는 티스토리,구글 블로그 등에서 가능합니다

사운드 클라우드를 알아두세요. 소스로 음악을 삽입할 수 있고 페이스북,트위터,텀블러 등으로 음악을 공유할 수 있으니까요. 가끔 포털 뉴스를 읽다보면 사운드 클라우드로 삽입할 라디오 뉴스를 볼 수 있었습니다. 그리고 http://www.bloter.net/archives/178995를 보면 저작권 걱정 없는 무료 음원을 찾는 방법을 적은 글을 볼 수 있습니다. 폰트와 더불어 음악은 저작권에 민감합니다.