본문 바로가기
Development/Javascript

MP3 player with javascript ( SWFObject ....)

by wansdream 2012. 5. 2.

프로젝트 진행 중 Mp3 플레이어가 필요하게 되어 조사후 적용한 예입니다.


MP3 플레이어는 http://flash-mp3-player.net/ 를 이용하였으며, 

조금더 간편히 사용하기 위해 SWFObject 라이브러리를 사용하였습니다.


우선 Mp3 플레이어가 필요한 페이지에 아래 코드를 추가한다.

<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/js/swfobject.js" type="text/javascript"></script>
<script src="/js/mp3_player.js" type="text/javascript"></script>

<body>
<div id="mp3_player"><span id="mp3_url">http://wansdream.net/test.mp3</span></div>
</body>


첫 번째 라인은 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://flash-mp3-player.net/


아래와 같은 결과물들을 얻을 수 있다.




참조>

http://www.herongyang.com/Flash/SWFObject-Generating-HTML-Code.html



댓글