[HTML]音乐播放器（带滚动歌词）

最新推荐文章于 2024-03-05 15:32:42 发布

乌鸡哥！

最新推荐文章于 2024-03-05 15:32:42 发布

阅读量1.1k

点赞数 2

分类专栏： Web 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_62916524/article/details/131500635

版权

Web 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

课程老师要求使用html+css+js制作一个简单的网页音乐播放器，要求附带滚动歌词

具体实现效果如下：

完整源代码与demo文件可私信

前期准备

获取音频，并且提取音频歌词（可以使用网上的歌词提取工具，这里为了方便我直接上网找现成的）

歌词部分样式如下：

代码部分

html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="bb" />
		<meta name="Keywords" content="Music,音乐,音乐播放器"/>
		<meta name="Description" content="拒绝VIP，白嫖从我们做起"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<link rel="stylesheet" type="text/css" href="./css/common.css"/>
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<script type="text/javascript" src="./js/selector.js"></script>
		<script type="text/javascript" src="./js/script.js"></script>
		
		<title>Music</title>
	</head>
	<body oncontextmenu="return false;" onselectstart="return false">
		<!--[if lte IE 8]>
		<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，请 <a href="https://support.dmeng.net/upgrade-your-browser.html" target="_blank">升级浏览器</a> 以获得更好的体验！</p>
		<![endif]-->
		
		<textarea name="" id="txt0" cols="30" rows="10" style="display: none;">
			/* 音乐的完整歌词部分 */
		</textarea>
		
		<textarea name="" id="txt1" cols="30" rows="10" style="display: none;">
			/* 音乐的完整歌词部分 */
		</textarea>
		
		<div class="page Opage" >
			<div class="main">
				
				<div class="Lbox l">
					<img src="./img/0.jpg" ><br>
			
				</div>
				
				<div class="Rbox r">
					<h2 class="songName"></h2>
					<span class="singer"></span>
					<div class="Lyric"></div>
				</div>
			
			</div>
			<div class="footer">
				<div class="main">
					
					<div class="l left">
						<span class="last iconfont icon-kuaitui" title="上一首"></span>&nbsp;&nbsp;
						<span class="play iconfont Iconfont icon-zanting" title="播放"></span>&nbsp;&nbsp;
						<span class="next iconfont icon-kuaijin" title="下一首"></span>
					</div>
					
					<div class="content clearfix">
						<a class="l" ><img src="./img/0.jpg" title="点击全屏"></a>&nbsp;
						<div class="Box">
							<span class="songName l"></span><span class="l">&nbsp;-&nbsp;</span><span class="singer l"></span>
							<span class="r">
								<span class="realTime">00:00</span>&nbsp;/&nbsp;<span class="totalTime"></span>
							</span><br>
							<div class="strip">
								<div class="progress"></div>
								<span class="spot"></span>
							</div>
						</div>
						<div class="volumeBox" style="display: none;">
							<div class="groove">
								<div class="volume"></div>
								<span class="volumeSpot"></span>
							</div>
							<div class="triangle"></div>
						</div>&nbsp;
						<span class="iconfont icon-shengyin"></span>
					</div>
					
					<div class="r right">
						<div class="list" style="display: none;">
							<div class="Song"></div>
						</div>
						<div class="listTriangle" style="display: none;"></div>
						<div class="gengduoBox" style="display: none;">
							<span class="project iconfont icon-fenxiang" title="分享"></span>
							<div class="boxTriangle" style="display: none;"></div>
						</div>
						<span class="iconfont loop icon-liebiaoxunhuan" title="循环方式"></span>&nbsp;&nbsp;&nbsp;
						<span class="iconfont love icon-xihuan1" title="喜欢"></span>&nbsp;&nbsp;&nbsp;
						<span class="iconfont icon-liebiao liebiao" title="播放列表" style="font-size: 26px;"></span>&nbsp;&nbsp;&nbsp;
						<span class="iconfont icon-shezhi gengduo" title="更多" style="font-size: 26px;"></span>
					</div>
					
				</div>
			</div>
		</div>
		<audio id="myMusic" src="./music/ogg/0.ogg">
			您的浏览器不支持 audio 元素。
		</audio>
	</body>
</html>

js——音频时间

var real;
	var myMusic = $("#myMusic");
	var totalTime;
	var totalMinute;
	var totalSecond;
	var oTotalTime;

确保获取成功

setTimeout( function(){
		if(myMusic.readyState == 4){
			totalTime = parseInt(myMusic.duration);
		}else{
			location.reload();
		}
		totalMinute = doubleNum(parseInt(totalTime/60));
		totalSecond = doubleNum(totalTime%60);
		oTotalTime = $(".totalTime")[0];
		oTotalTime.innerHTML = totalMinute + ":" + totalSecond;
	},200);

当前时长

var realTime = parseInt(myMusic.currentTime);
	var realMinute = doubleNum(parseInt(realTime/60));
	var realSecond = doubleNum(realTime%60);
	var oRealTime = $(".realTime")[0];

js——音量

var oShengyin = $(".icon-shengyin")[0];
	var oVolumeBox = $(".volumeBox")[0];
	var display = false;
	oShengyin.onclick = function(){
		if(display){
			oVolumeBox.style.display = "none";
			display = false;
		}else{
			oVolumeBox.style.display = "";
			display = true;
		}
	}

音量进度条

var oVolume = $(".volume")[0];
	var ovolumeSpot = $(".volumeSpot")[0];
	ovolumeSpot.onmousedown = function(event){
		event = event || window.event;
		var offsetY = event.clientY - ovolumeSpot.offsetTop + ovolumeSpot.offsetHeight/2;
		document.onmousemove = function(event){
			var bottom = (80- (event.clientY - offsetY));
			if(bottom < 0){
				bottom = 0;
			}else if(bottom > 80){
				bottom =80;
			}
			ovolumeSpot.style.bottom = (bottom + 5) + "px";
			oVolume.style.height = bottom + "px";
			myMusic.volume = bottom/80;
		}
	}
	document.onmouseup  = function(){
		myMusic.muted = false;
		document.onmousemove = null;
		oVolumeBox.style.display = "none";
		display = false;
	}

js——设置播放器图标

/* 单曲/列表/随机循环图标 */
	var oLoop = $(".loop")[0];
	var Num = 1;
	var Company = 1;
	oLoop.onclick = function(){
		switch(Num){
			case 1:
				oLoop.className = "iconfont loop icon-suiji";
				Num = 2;
				myMusic.loop = false;
				break;
			case 2:
				oLoop.className = "iconfont loop icon-danquxunhuan";
				Num = 3;
				myMusic.loop = true;
				break;
			case 3:
				oLoop.className = "iconfont loop icon-liebiaoxunhuan";
				Num = 1;
				myMusic.loop = false;
				break;
		}
	}
	if( Num ==1 ){
		/* 循环播放 */
		myMusic.onended = function(){
			oNext.click();
		}
	}else if( Num ==3 ){
		/*随机播放*/
		myMusic.onended = function(){
			I = Math.floor(Math.random() * 2);
			(I > 1) ? I = 0 : I = I;
			loadCssCode(`.Opage::before{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: -30px; z-index: -1; content: ''; background: url(./img/${I}.jpg) no-repeat; background-size:100% 100%; filter: blur(20px); }`);
			$("img")[0].src = `./img/${I}.jpg`;
			$("img")[1].src = `./img/${I}.jpg`;
			myMusic.pause();
			myMusic.src = `./music/ogg/${I}.ogg`;
			Play = true;
			oPaly.className = "play iconfont Iconfont icon-bofang";
			oPaly.title = "暂停";
			/* 延时获取totalTime */
			setTimeout( function(){
				if(myMusic.readyState == 4){
					totalTime = parseInt(myMusic.duration);
				}else{
					location.reload();
					alert("信息获取错误，自动刷新页面")
				}
				realTime = parseInt(myMusic.currentTime);
				totalMinute = doubleNum(parseInt(totalTime/60));
				totalSecond = doubleNum(totalTime%60);
				oTotalTime.innerHTML = totalMinute + ":" + totalSecond;
				left = 0;
				myMusic.play();
				oLyric.scrollTop = 0;
				clearInterval(real);
				oTimer();
				progress();
			},200);
			/* 更新信息 */
			update();
		}
	}

js——播放列表

var oLiebiao = $(".liebiao")[0];
	var oList = $(".list")[0];
	var oListTriangle = $(".listTriangle")[0];
	var Open1 = false;
	oLiebiao.onclick = function(){
		if(Open1){
			oList.style.display = "none";
			oListTriangle.style.display = "none";
			Open1 = false;
		}else{
			oList.style.display = "";
			oListTriangle.style.display = "";
			Open1 = true;
		}
	}

*js——歌词滚动

myMusic.addEventListener("timeupdate",function(){
	    if($("#"+realTime)){
			/*清除样式*/
	        for(let i=0; i < oP.length ; i++){
	            oP[i].style.cssText = "font-size: 16px;";
	        }
			/* 歌词滚动 */
	        $("#"+realTime).style.cssText = "background: linear-gradient(-3deg,rgba(255,255,255,0.8) 0%,rgba(128,128,128,0.8) 60%);-webkit-background-clip: text;color: transparent;font-size: 20px;";
			//获得滚动窗口距离浏览器的距离
			var Distance1 = oLyric.offsetTop;
			//获得当前歌词距离浏览器顶部的距离
			var Distance2 = $("#"+realTime).offsetTop;
			//获得当前歌词距离滚动窗口的距离
			var Distance3 = Distance2-Distance1;
			//获得滚动窗口的滚动距离
			var Rolling = Distance2-Distance1-153;
			//比较当前歌词距离滚动窗口的距离，大于153，就让窗口滚动
			if(Distance3>153){
				oLyric.scrollTop = Rolling;
			}
	    }
		/* 播放完毕归位 */
		if(realTime >= (totalTime-1)){
			oLyric.scrollTop = 0;
		}
	})