html write music player

来源：互联网发布：label mx标签打印软件编辑：程序博客网时间：2024/05/16 08:45
<!DOCTYPE html><html><head><meta charset="utf-8"><title>music player</title></head><style>@font-face{font-family:Cookie;src:url(font/aplayer-fontello.eot);  src:url(font/aplayer-fontello.eot)   format("embedded-opentype"),  url(font/aplayer-fontello.woff)   format("woff"),url(font/Cookie.ttf)   format("truetype"),url(font/aplayer-fontello.svg)   format("svg");  }@font-face {  font-family: 'FontAwesome';  src: url('font/fontawesome-webfont.eot?v=4.2.0');  src: url('font/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');  font-weight: normal;  font-style: normal;}#playspace{position: absolute;background-color: #272822;border-radius: 15px;width: 350px;height: 100px;left:80px;}#progress-bar{position: absolute;width:140px;height: 5px;right: 97px;bottom: 17px;}#progressWrap{position: absolute;width:140px;height: 100%;background-color: #5f7158;cursor: pointer;border-radius: 20px;    border: 1px solid rgba(116, 98, 150, 0.45);}#playprogress{    width: 0px;height: 100%;background-color: #522252;border-radius: 20px;}#audiobtn{position: absolute;left: 42px;bottom:36px;    font-size: 25px;cursor: pointer;}#playSlider{position: absolute;left: -2px;bottom: -3px;height: 10px;width:10px;border-radius: 20px;    background-color:#d4a3cc;border: 1px solid rgb(32, 66, 82);}#timeprogress{position: absolute;right: 15px;bottom:12px;font-family: sans-serif;font-size: 10px;color: rgba(165, 162, 181, 0.64);}#songpic img{position: absolute;width:100px;height: 100px;border-radius: 15px;left: 0px;}#songline{position: absolute;left: 116px;font-size: 8px;top:32px;font-family:Cookie;color: #7e8298;font-style: italic;   }   .fa {  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-play:before{content: "\f04b";}.icon-pause:before{content: "\f04c";}</style><body><video id="video" preload="" ><source src="澤野弘之 - βίος ＜MK+nZk Version＞.mp3" type="audio/mp3"  preload=""></video><div id="playspace"><div id="songmessage"><div id="songline"><span>And the tears will go above the sky</span></div>          <div id="songpic">                    <img src="img/xenoblade.png" alt="">  </div></div>       <div id="progress-bar">           <div id="progressWrap">                 <div id="playprogress"> <div id="playSlider"></div> </div>   </div>   </div><div id="audiobtn" class="icon-play icon-pause fa"></div><div id="timeprogress"><span id="nowtime">0:00</span> / <span id="duration"></span></div></div><script>       var video=document.getElementById("video");           var progressWrap=document.getElementById("progressWrap");   var playprogress=document.getElementById("playprogress");   var playSlider=document.getElementById("playSlider");   function getprogress() {   var percent=video.currentTime/video.duration;               playprogress.style.width=percent*(progressWrap.offsetWidth)+"px";   playSlider.style.left=percent*(progressWrap.offsetWidth)+"px";   }   audiobtn.addEventListener("click", function () {if (video.paused) {video.play();$("#audiobtn").removeClass('icon-play fa').addClass('icon-pause fa');}else {video.pause();$('#audiobtn').removeClass('icon-pause fa').addClass('icon-play fa');}})            function videoSeek(e) {if (video.paused||video.ended) {video.play();}enhanceVideoSeek(e);}function enhanceVideoSeek(e) {var length = e.offsetX - progressWrap.offsetLeft;var percent = length / progressWrap.offsetWidth;playprogress.style.width = percent * (progressWrap.offsetWidth) + "px";video.currentTime = percent * video.duration;}progressWrap.addEventListener('click', function (e) {videoSeek(e);})function timedisplay(time) {var min, sec;min = Math.floor((time / 60) % 60);//100second 1 min 40secsec = Math.floor(time % 60);min = min > 10 ? min : "0" + min;sec = sec > 10 ? sec : "0" + sec;return min + ":" + sec;//return 01:40}video.addEventListener("timeupdate", function () {document.getElementById("nowtime").innerHTML = timedisplay(video.currentTime);getprogress();})video.addEventListener('loadedmetadata', function () {document.getElementById("duration").innerHTML = timedisplay(video.duration);})</script></html>
阅读全文
0 0