<img src="//nojsim.images.xtstatic.com/tp.gif" alt="" />

Insane

Hai.Name.Vn - WapUpload Số 1 Xtgem

Share code trình phát nhạc HTML 5 cho wap và web

Share code trình phát nhạc HTML 5 cho wap và web

02/09/2015 - 11:53

Minh Hải

Share code trình phát nhạc HTML 5 cho wap và web

Để thay đổi chút phong cách cho trình phát nhạc trên wap bạn thêm đẹp thì hôm nay admin xin chia sẻ cho các bạn code phát nhạc HTML5 hỗ trợ điện thoại
Code này mình leech của nhaccuatui và mod lại.

Share code trình phát nhạc HTML 5 cho wap và web

Trước tiên chèn CSS vào wap

Sao chép/Sửa:

<style type="text/css">
.end {
    background: url0 center top no-repeat;
    height: 18px;
    background-size: 100% 100%;
}
.player{padding:14px 10px 5px 10px;background-image:url0;background-repeat:repeat-x;background-position:left bottom;height:47px;border-top:2px solid #5cafd5;}
.hide-html5{width:0px;overflow:hidden;display:none;}
#play{width:26px;height:31px;float:left;}
#play.pause{background-image:url0;background-repeat:no-repeat;background-position:left top;cursor:pointer;margin-top:2px;}
#play.play{background-image:url0;background-repeat:no-repeat;background-position:left top;cursor:pointer;margin-top:2px;}
#play_time{width:45px;padding-top:0px;float:right;text-align:center;color:#575757;font-size:14px;font-weight:bold;text-shadow:#ffffff 0px 1px 1px;margin-top:-14px;}
#progress{margin:0 55px 0 40px;padding-top:12px;}
#progress #progress_box{background-color:#858585;height:11px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:inset 0 0 10px #3e3e3e;-webkit-box-shadow:inset 0 0 10px #3e3e3e;box-shadow:inset 0 0 3px #363636;}
#progress #load_progress{background-color:#626262;height:11px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;position:relative;-moz-box-shadow:inset 0 0 10px #3e3e3e;-webkit-box-shadow:inset 0 0 10px #3e3e3e;box-shadow:inset 0 0 3px #363636;}
#progress #play_progress{background-color:#197cbc;height:11px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;-moz-box-shadow:inset 0 0 10px #3e3e3e;-webkit-box-shadow:inset 0 0 10px #3e3e3e;box-shadow:inset 0 0 3px #363636;}
#progress .hand-control{position:absolute;top:-7px;background-image:url0;background-repeat::no-repeat;background-position:left top;width:25px;height:26px;}
audio{width:100%}
  </style>

Và đây là code:

Sao chép/Sửa:

<script type="text/javascript" src="http://tainhaccho.hexat.com/html5-player.0.1.js"></script>
 <div class="player" data="bon">
        <div class="hide-html5">
      <audio id="audio" controls="controls">
              <source src="http://nhaccho.net/ringtone/86143.mp3" type="audio/mpeg">
            </audio>
        </div> 
        <div id="play" class="play control">
        </div> 
        <div id="progress">
            <div id="progress_box">
                <div id="load_progress" style="width:0px;">
                    <div class="hand-control" id="hand_progress" style="left:-7px;">
                    </div>
                    <div id="play_progress" style="width:0px;">
                    </div>
                </div>
            </div>
        </div>
        <div id="play_time"> 
            <span id="current_time_display">00:00</span>
        </div>
    </div>
 <script type="text/javascript">
        bodyLoaded();
        document.getElementById("audio").addEventListener("ended",
                function() {
                    playAudio();
                }, true);
    </script>
   <div class="end"></div>

Google