프로젝트 진행 중 Mp3 플레이어가 필요하게 되어 조사후 적용한 예입니다.
MP3 플레이어는 http://flash-mp3-player.net/ 를 이용하였으며,
조금더 간편히 사용하기 위해 SWFObject 라이브러리를 사용하였습니다.
우선 Mp3 플레이어가 필요한 페이지에 아래 코드를 추가한다.
첫 번째 라인은 JQuery라이브러리 로드 부분이고,
두 번째 라인은 플래시 관련해서 쉽게 사용할 수 있도록 작성된 자바스크립트 라이브러리다.
http://code.google.com/p/swfobject/ 에서 최신 버전을 다운로드 받을 수 있다.
세번째 라인은 직접 작성한 자바스크립트 파일이다. 내용은 아래와 같다.
$(document).ready(function() {
var flashvars = {};
flashvars.mp3 = $("#mp3_url").text();
flashvars.showstop = 1;
flashvars.showvolume = 1;
flashvars.bgcolor1 = "FF9517"; //"7c7c7c";
flashvars.bgcolor2 = "FF9517"; //"333333";
flashvars.slidercolor1 = "ffff38";
flashvars.slidercolor2 = "ffff38";
flashvars.buttoncolor = "000024";
flashvars.buttonovercolor = "fa0061";
flashvars.textcolor = "4700e0";
var params = {};
params.wmode = "transparent";
var attributes = {};
//attributes.id = "myFlash";
swfobject.embedSWF("/swf/player_mp3_maxi.swf", "mp3_player", "200", "25", "9.0.0", "/swf/expressInstall.swf", flashvars, params, attributes);
});
소스를 보면 이해할 수 있겠지만,
간단히 설명하면 mp3_url의 id를 가진 부분에서 mp3파일의 주소를 가져와서 플레이 시켜준다.
플레이어 디자인은 player_mp3_maxi.swf 파일에 각종 옵션을 주어 색상, 크기 등을 변경할 수 있다.
각 종 옵션등은 아래 사이트에서 확인할 수 있다.
아래와 같은 결과물들을 얻을 수 있다.
참조>
http://www.herongyang.com/Flash/SWFObject-Generating-HTML-Code.html
'Development > Javascript' 카테고리의 다른 글
| 자바스크립트파일(*.js)파일에서 다른 js파일 불러오기 (0) | 2012.05.07 |
|---|---|
| 재미있는 JavaScript 코드 (0) | 2010.01.03 |
| document.location.replace()와 document.location.href의 차이 (0) | 2009.07.25 |
| javascript:void(0) 란? (1) | 2009.07.25 |
| 그림 움직이게하는 코드 (0) | 2008.01.20 |
| 미디어파일 재생시 재생퍼센트와 남은시간 표시하기 (0) | 2006.07.18 |
| 아이프레임 자동으로 늘어나는 자바 스크립트. (0) | 2006.06.26 |
| 접속할 때 마다 다른 음악 재생하기 (0) | 2005.07.17 |
댓글