[jQuery] MP3 Player

MP3 Player jQuery 화면 만들기 예제를 적어둔다.

실제 사용은 안하고 있으나, 화면 생성에 대한 사항을 사용할 일이 있을때 참고하려고 적어둔다.

좋은 MP3 플레이어 jQuery 는 http://www.wimpyplayer.com/ 다.

<div id="mp3playerdiv"></div>
<!--플레이어-->
<div class="player">
<div class="player_bg"><!--tmp--></div>
<div class="player_area" id="tubeplayer"></div>
</div>
<!--플레이어-->

<script type="text/javascript">
//<![CDATA[
   //플레이어
   $('.simbol a').click(function(e) {
   e.preventDefault();
   $(".player").fadeIn();
  
     $("#tubeplayer").append('<iframe width="400" height="80" src="<?php echo $g['dir_module_skin']?>movie/demo/movie.php?file='+this.id+'" frameborder="0" scrolling="no" allowfullscreen></iframe>');
  
      var temp = $('.player_area');
   
       if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
       else temp.css('top', '0px');
       if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
       else temp.css('left', '0px');

      $(".player .player_bg").on("click", function() {
      $(".player").fadeOut();
      $("#tubeplayer iframe").remove();
    });
           
      //키보드 esc
      $(document).bind('keydown', function(e) {
        if (e.which == 27) {
        $(".player").fadeOut();
        $("#tubeplayer iframe").remove();
        }
      });

    });
    //플레이어

//]]>
</script>