html write music player

最新推荐文章于 2023-05-01 22:26:41 发布

原创最新推荐文章于 2023-05-01 22:26:41 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

html5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于HTML5的音乐播放器网页设计实现方案。该方案利用HTML5的video标签来播放音频文件，并通过CSS样式定义了播放器的外观。此外，还使用JavaScript实现了播放进度显示、播放暂停控制及拖动进度条等功能。

<!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 40sec
					sec = 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>