음악 MP3 파일을 SWF로 바꿔서 티스토리 블로그에 넣는 법

흔남. 블로그 관리법 2014. 11. 27.

티스토리에 음악을 넣는 방법은 여러 가지가 있지만... 전부 일장일단이 있습니다.

MP3를 바로 올리는 것은 (필터링 때문에) 일단 힘들고, PC의 웹브라우저에 연동되는 재생프로그램(윈도우 미디어플레이어 등)이 없으면 정상재생이 어렵습니다.

유튜브 업로드 후 태그를 걸면... 화면공간 낭비도 있을 뿐더러 구글 심사에 의해 소스가 삭제당할 수도 있고...

사운드클라우드 등의 스트리밍 공유서비스에 업로드 후 태그를 걸면, 기본적으로 화면 폭 전부를 차지하게끔 되어 있는 설정이 당황스럽기도 하고,

서비스 개편에 따른 레이아웃/태그 변경(embed → iframe)으로 인해 혼란스럽기도 합니다. 서비스 주체에 따라 iframe 태그를 못 쓰게 막아놓은 경우도 있고...(네이버!!)

▲ 사실, 사운드클라우드도 소스를 조금 손보면 폭 조정이 가능하긴 합니다.

이렇게 여러 가지 이유들때문에 제3의 서비스사에 음원을 올리고 태그로 끌어오는 것은 장기적으로 좋지 않다고 생각합니다. 사이트가 없어지거나 URL을 바꿔버리면 포스팅 전체가 흔들려버리더군요.

그래서 2~3년 전에 티스토리 내에 플래시 파일로 음악을 업로드하고 태그를 걸었던 방법을 (이제 와서) 정리해볼까 합니다. 한 번 쓰고 돌아서니 자꾸 잊혀지더라고요.

목표는 MP3 파일을 플래시파일(SWF)에 넣으면서 재생기까지 탑재하는 것입니다. 컴퓨팅 환경에 상관없이 재생되도록.

▲ 이런 식으로요.

-------------------------------------

우선 MP3 to SWF Converter 라는 프로그램을 받습니다.

▲ 제작사 홈페이지

▲ 그리고 Add Files 를 눌러 음악을 추가하고,

Options 에서 재생기 스킨이나 음원 비트레이트 등의 옵션을 적절히 만져준 뒤

Convert All 을 눌러 변환해 줍니다.

▲ 이렇게 플래시파일을 만드는 데 성공했다면,

티스토리에서 글쓰기를 누른 후 파일을 첨부합니다.

정상적으로 파일이 첨부되었다면 에디터에서 아래처럼 나타날 겁니다.

여기서 '저장' 을 눌러서 그냥 빠져나오면 안 됩니다. 왜냐하면...

▲ 위에 붉게 네모 친 경우처럼, 플레이어는 작은데 지나치게 많은 영역을 차지하는 경우가 있기 때문입니다.

(마우스로 드래그해보면 알 수 있습니다.)

그래서 저장 전에 html 소스 확인 및 수정을 꼭 해주셔야 합니다.

붉은네모 아래의 재생기처럼 크고 범위도 작게 차지하도록 설정해줄 겁니다.

▲ 에디터에서 HTML 코드 보는 버튼을 누르면 코드들이 보일 겁니다.

삽입하셨던 파일의 코드는 붉게 밑줄 친 것처럼 나타날텐데, 푸르게 밑줄 친 것처럼 수정할 겁니다.

일단 붉은 밑줄의 소스 텍스트를 보면...

이렇게 되어 있습니다. 이걸 아래 태그로 바꿀텐데, 연두색/핑크색 표시 코드를 서로 일치시키고, 노란색 표시 코드(폭/높이 지정명령)을 추가해 준다고 보시면 되겠습니다.

2017. 6. 16. 수정.

이렇게 바꿔준 다음 div나 p 태그로 정렬지정을 해주고 저장하면~

적당히 예쁜 이런 재생기를 보실 수 있습니다.

개

꼼꼼한 블로그