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

 

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

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

 

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

 

 

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

 

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

 

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

 

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

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

 

▲ 이런 식으로요.

 

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

 

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

 

http://www.hootech.com

▲ 제작사 홈페이지

 

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

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

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

 

 

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

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

 

 

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

 

 

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

 

 

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

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

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

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

 

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

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

 

 

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

 

 

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

 

<embed src="http://cfile23.uf.tistory.com/media/2730AE505476A935040E6Xwidth="400" height="30">

 

2017. 6. 16. 수정.

<embed type="application/x-shockwave-flash" src="http://cfile23.uf.tistory.com/media/2730AE505476A935040E6Xwidth="400" height="30" allowscriptaccess="always" wmode="transparent">

 

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

 

 

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

반응형