<style type="text/css">
.end {
background: url(' http://danhbaipro.wap.sh/images/cen-footer2.png&#039;) 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&#039;);
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&#039;);
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&#039;);
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&#039;);
background-repeat::no-repeat;
background-position:left top;
width:25px;height:26px;
}
audio {
width:100%;
}
</style>

<script type="text/javascript" src=" http://chiaseit.mobie.in/html5-css3/share-code-trinh-phat-nhac-html5-don-gian-cho-wap-va-web/html5-player.0.1.js&quot;&gt;&lt;/script&gt;
<div class="player" data="bon">
<div class="hide-html5">
<audio id="audio" controls="controls">
<source src=" http://nhaccho.net/ringtone/86143.mp3&quot; 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>