블로그에 음악 플레이어를 달아보자

위와 같이 좀 허접하긴 하지만 왼쪽 메뉴 상단에 배경음악 플레이어를 달아보자.

싸이처럼 이쁘게 만들고 싶었지만 아직 내공이 안되는 관계로다가.. 기본 플레이어만 해보도록 하죠.

1. 글쓰기를 하여 첨부파일로 mp3 나 wma 나 음악 파일을 업로드한다.

2. 업로드한 글을 찾아간다.

3. 아래와 같이 재생기가 나타났으면 마우스 오른쪽 버튼을 클릭해서 속성을 누른다.




4. 그럼 아래와 같이 속성창이 나타난다.




5. 속성창의 위치의 URL을 복사해 놓는다.

6. 블로그 관리자 > 스킨 > HTML/CSS 편집 메뉴로 가서 필요한 위치에 아래의 소스를 삽입한다.

<!-- 배경음악 -->
<div class="marquee">
  <table>
   <tr>
    <td>
     <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="170" height="45"><param name="Filename" value="http://ramses8.tistory.com/attachment/gk080000000001.mp3"/><param name="AutoStart" value="true"/><!--[if !IE]> <--><object type="audio/x-ms-wma" data="http://ramses8.tistory.com/attachment/gk080000000001.mp3" width="170" height="45"><param name="AutoStart" value="1"/><embed pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="http://ramses8.tistory.com/attachment/gk080000000001.mp3" width="170" height="45" type="application/x-mplayer2" autostart="1"></embed></object><!--> <![endif]--></object>
    </td>
   </tr>
   <tr>
    <td>
     <marquee scrollamount="3">너는 내 운명 - 하하</marquee>
    </td>
   </tr>
  </table>
</div>

위와 같이 하면 제 홈피처럼 허접한 플레이어라도 달수가 있습니다.

위의 태그에서 value="true", value="1", autostart="1" 값이 있는데 자동플레이를 말하는것이며 false, 0, 0 을 넣으시면 플레이(▶)를 눌러야 재생이 됩니다.

또 사용하시는 메뉴쪽이나 위치에 따라 width(가로길이) 와 height(세로길이) 값을 바꿔주셔야 합니다. 전 메뉴쪽 사이즈가 '170'이라 '170'으로했습니다. 세로는 플레이어 저 바 길이가 45로 하니 딱 보기 좋더군요.

음악 제목과 가수를 흐르게 하는게 좁은 공간에 이쁘게 보일것같아서 marquee 태그를 사용했으며 scrollamount 값을 전 '3'으로 줬지만 빠르게 흐르게 하려면 값을 높게 주면 됩니다. 더 느리게 하려면 낮우면 되구요.

여러분도 블로그에 음악 플레이어를 달아보세요 ^^

2008/01/17 - [Tip/일상] - 음악, 동영상 파일 재생하기