GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

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

RoSino18k

13-04-2016

Để 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.

[Tải ảnh]

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

<style type="text/css">

.end {

    background: url('http://danhbaipro.wap.sh/images/cen-footer2.png') center top no-repeat;

    height: 18px;

    background-size: 100% 100%;

}

.player {

padding:14px 10px 5px 10px;

background-image:url('http://tainhaccho.hexat.com/images/bgplayer-song.png');

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:url('http://tainhaccho.hexat.com/ico-pause.gif');

background-repeat:no-repeat;

background-position:left top;

cursor:pointer;

margin-top:2px;

}

#play.play {

background-image:url('http://tainhaccho.hexat.com/icon-play_1.png');

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:url('http://tainhaccho.hexat.com/ico-pro.png');

background-repeat::no-repeat;

background-position:left top;

width:25px;height:26px;

}

audio {

width:100%;

}

  </style>

Và đây là code:

<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>