js音乐播放、歌词、动效、图片旋转（手机模板放弃之作，仅供参考）

最新推荐文章于 2023-01-29 23:42:57 发布
童心（成都）
最新推荐文章于 2023-01-29 23:42:57 发布
阅读量690
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/qq_40237472/article/details/112529386
版权
前端专栏收录该内容
24 篇文章 0 订阅
订阅专栏
百度云盘：
链接：https://pan.baidu.com/s/1Da0uEpDbOBrhe6FH7IYzdg
提取码：4w32
复制这段内容后打开百度网盘手机App，操作更方便哦
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>匹音app</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script>
    	<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.min.js"></script>
    	<script src="js/jquery.js"></script>
		<script src="js/js.js"></script>
		<script language="JavaScript" type="text/javascript">
		$(document).ready(function() { 
		    //任何需要执行的js特效
		    bf();
		    cvsgetready(document.getElementById('cvs'), 800, document.getElementById('audio'), 'rgba(66,66,66,0.6)');
		});
	    var lrcJSON = {};
	    var lrcJSON1 = {};
	    var arrLine = [];
	    var lrcj = "";
	    var current = 0;
	    let audio_status = false;
	    var audio = document.getElementById("audio");
		function getLRC() {
			    var ajax = new XMLHttpRequest();
			    ajax.open("GET", "https://piyinc.oss-cn-qingdao.aliyuncs.com/font/dg512.lrc");
			    ajax.onreadystatechange = function () {
			        if (ajax.readyState == 4 && ajax.status == 200) {
			            lrcj = ajax.responseText;	
			            arrLine=lrcj.split("\n");
			            for(var i = 4;i<arrLine.length;i++){
			            	lrcJSON[arrLine[i].substr(0,10)] = arrLine[i].substr(10,arrLine[i].length);
			            }
			            console.log(lrcJSON1);
			            TimeSpan();
			        }
			    };
			    ajax.send(null);

			}
		    function TimeSpan() {//在音频播放时调用这个函数
		        realTimeClData = setInterval("onaction()", 100);
		    }  
		        //将单位为秒的的时间转换成mm:ss的形式
	    function timeFormat(number) {
	        var minute = parseInt(number / 60);
	        var second = parseInt(number % 60);
	        minute = minute >= 10 ? minute : "0" + minute;
	        second = second >= 10 ? second : "0" + second;
	        return minute + ":" + second;
	    } 
		function onaction(){
			var currentLine = 0;//当前播放到哪一句了
			var currentTime;//当前播放的时间
			currentTime = timeFormat(audio.currentTime);
			for(var key in lrcJSON){
				var keytime = key.substr(1,5);
				if(currentTime == keytime){
					var html2 = lrcJSON[key];
					$("#lrclist2").html(html2);	
				}
			}
			current = (current+3)%360;
            document.getElementById('showImg').style.transform = 'rotate('+current+'deg)';    //定时改变图片角度达到旋转效果    
			/*$.each(lrcJSON, function(key, value) {//遍历lrc
					var keytime = key.substr(1,5);
					if(currentTime == keytime){
						var html1 = lrcJSON[key];
						$("#lrclist1").html(html1);
					}

			});*/
		}
    	function bf(){
			audio = document.getElementById('audio');  //必须用原生js获取id，jquery无效
			var bfalltime = audio.duration;//播放时bai间
			var bftime = audio.currentTime;//播放进du度
			if(audio!==null){             
			    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
			  	if(audio.paused)  {
			       audio.play();//audio.play();// 这个就是播放  
//			       document.getElementById("start").style.display = 'none';
			       getLRC();
			  	}else{
			  	   clearInterval(realTimeClData);
			  	   audio_status = false;
			   	   audio.pause();// 这个就是暂停
//			   	   document.getElementById("start").style.display='block';
			  	}
			 } 
		}
    	function cvsgetready(cvs_dom, cvs_dom_wh, audio_dom, bgcolor) {
//		    let audio = audio_dom;
			let canvas = cvs_dom;
		    canvas.height = cvs_dom_wh;
		    canvas.width = cvs_dom_wh;
		    // 缩放
		    canvas.style.transform = 'scale(' + cvs_dom.parentNode.offsetWidth / cvs_dom.offsetWidth + ')'
		    let context = canvas.getContext("2d");
		    audio.crossOrigin = "anonymous";
		    //创建境况
		    var AudioContext = window.AudioContext || window.webkitAudioContext;
		    var audioContext = new AudioContext();
		    //创建输入源
		    var source = audioContext.createMediaElementSource(audio);
		    //用createAnalyser方法,获取音频时间和频率数据,实现数据可视化。
		    var analyser = audioContext.createAnalyser();
		    //连接：source → analyser → destination
		    source.connect(analyser);
		    //声音连接到扬声器
		    analyser.connect(audioContext.destination);
		    /*存储频谱数据，Uint8Array数组创建的时候必须制定长度，
		    长度就从analyser.frequencyBinCount里面获取，长度是1024*/
		    var arrData = new Uint8Array(analyser.frequencyBinCount),
		        count = Math.min(100, arrData.length), //能量柱个数,不能大于数组长度1024,没意义
		        /*计算步长，每隔多少取一个数据用于绘画，意抽取片段数据来反映整体频谱规律，
		               乘以0.6是因为，我测试发现数组长度600以后的数据基本都是0了，
		               画出来能量柱高度就是0了，为了效果好一点，所以只取前60%，
		               如果为了真实可以不乘以0.6
		            */
		        step = Math.round(arrData.length * 0.8 / count),
		        // step = Math.round(arrData.length / count),
		        value = 0, //每个能量柱的值
		        drawY = 0, //能量柱Y轴坐标
		        //能量柱宽度，设置线条宽度
		        lineWidth = 10;
		    //设置线条宽度
		    context.lineWidth = lineWidth;
		    //渲染函数
		    function render() {
		        // 每次要清除画布
		        context.clearRect(0, 0, cvs_dom_wh, cvs_dom_wh);
//		        context.arc(cvs_dom_wh / 2, cvs_dom_wh / 2, 200, 0, 2 * Math.PI);
		        context.fillStyle = bgcolor || 'rgba(255,255,255,0)';
		        // context.fillStyle = bgcolor || 'rgba(0,0,0,1)';
		        context.fill();
		        //获取频谱值
		        analyser.getByteFrequencyData(arrData);
		        // console.log(arrData);
		        for (var i = 0; i < count; i++) {
		            //前面已经计算好步长了
		            value = arrData[i * step + step];
		            /*能量柱的高度，从canvas的底部往上画，那么Y轴坐标就是画布的高度减去能量柱的高度，
		                       而且经测试发现value正常一般都比较小，要画的能量柱高一点，所以就乘以2，
		                       又防止太高，取了一下最大值，并且canvas里面尽量避免小数值，取整一下
		                     */
		            // drawY = parseInt(Math.max((height - value * 2), 10));
		            drawY = value;
		            //开始一条路径
		            context.beginPath();
		            /*设置画笔颜色，hsl通过这个公式出来的是很漂亮的彩虹色
		               H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，
		                       也可取其他数值来指定颜色。取值为：0 - 360
		               S：Saturation(饱和度)。取值为：0.0% - 100.0%
		               L：Lightness(亮度)。取值为：0.0% - 100.0%
		             */
		//            context.strokeStyle = "hsl( " + Math.round((i * 200) / count) + ", 100%, 50%)";
					context.strokeStyle = "hsl( " +i+3+ ", 100%, 50%)";
		            //从X轴drawX，Y轴就是canvas的高度，也就是canvas的底部
		            // context.moveTo(drawX, height);
		            context.save();
		            context.translate(cvs_dom_wh / 2, cvs_dom_wh / 2.2);
		            //旋转
		            context.rotate(i * Math.PI / 50);
		            context.moveTo(0, 150);
		            context.lineTo(0, 150 + drawY);
		            //stroke方法才是真正的绘制方法,顺便也相当于结束了这次的绘画路径,就不用调用closePath方法了
		            //之前的是水平排布显示条块，不需要 但此处是做了圆圈布局显示需要闭合一下如果不闭合。会出现收尾相连进行描绘的操作。既会出现白色的条块显示bug
		            context.closePath();
		            context.stroke();
		            context.restore();
		        }
		        //用requestAnimationFrame做动画
		        requestAnimationFrame(render);
		    }
		    render()
		}
    </script>
      <style>
		body {
		    padding: 0;
		    margin: 0;
		    min-height: 100vh;
		    height: 100vh;
		}
		.avatar{
			width:45px;
			height:45px;
			border-radius:9vh;
		}
		#cvsbox {
            /* width: 210px; */
            /* height: 210px; */
            width: 100vw;
            height: 100vw;
            max-width: 750px;
            max-height: 750px;
            margin: 0 auto;
            position: relative;
            /* background-color: royalblue; */
            background-size: cover;
        }
        
        #cvs {
            display: block;
            /* width: 800px; */
            /* height: 800px; */
            /* animation: rotate 6s linear infinite; */
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: 0 0;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }
  </style>
	</head>
	<body>
      	<!--<div style="position:absolute;left:42.2%;top:27vh;width: 30vw;height: 20vh;" onclick="bf()">
	    	<img id="start" width="75vw" height="95vh" src="img/zanting.png" />
	  	</div>-->
	  	<img width="100%" height="100%" src="img/tihuan.png" style="position: absolute;left: auto;top: auto;" />
	  	<div style="position: absolute;margin-top: auto;margin-left: opx;">
	  		<img style="width: 2.23rem;height: 0.69rem;" src="img/logo.gif" />
	  	</div>
	  	<audio id='audio' src="https://piyinc.oss-cn-qingdao.aliyuncs.com/mp3/dg51.mp3" >你的浏览器不支持喔！</audio>	
	  	<div id="cvsbox">
	        <canvas id="cvs"></canvas>
	    </div>
	  	<div style="position:absolute;top:95px;text-align: center;margin-left: 28vw;">
	  		<img id ="showImg" src="img/zanweitouxiang.png" onclick="bf()">
	  	</div>
		<div style="position:absolute;top:55vh;width: 100%;text-align: center;color: white;">
			<div  id="lrclist2"></div>
		</div>
	<div style="width: 100vw;position: absolute;bottom: 0px;">
	  	<div style="height: 8vh;margin-left: 2vw;"><!--头像-->
	  		<div style="float: left;">
	  			<img  class="avatar"  src="https://weimikeji.oss-cn-qingdao.aliyuncs.com/person/personimage/1568065953099465f24-29b5-44dc-bbaf-e1a6e1e40eda.jpg" />
	  		</div>
	  		<div style="float: left;">
				<div style= "color: white;margin-left: 1.5vw;font-size: 4.5vw;float: left;">
				     <text >野原新之助</text>			      				
				</div>
				<div style= "color: white;margin-top: 0.5vh;margin-left: 1.5vw;font-size: 3.5vw;">
				    <img width="15vw" height="13vh"  src="img/quanbu_bofangliang.png" />
					<text >100w</text>
				 </div>
			</div>
	  	</div>	  	
	  	<div style="color: white;font-size: 4.2vw;padding:0 1.5vw 0 2vw;">
					不知咋的今天就想说说话,我不是针对谁,我是针对在坐的各位都是哈哈哈。#流行音乐
			</div>
			<div style="color: white;font-size: 4.5vw;margin-top: 3vh;margin-left: 2vw;">
				<div style="float: left;">
					<div style="float: left;" ><img width="25vw" height="20vh" src="img/dianzan.png"></div>
					<div style="float: left;margin-left:1vw;display: inline-block;vertical-align: middle;" >30w</div>
				</div>
				<div style="float: left;margin-left: 14vw;">
					<div style="float: left;"><img width="30vw" height="22vh" src="img/liaotian.png"></div>
					<div style="float: left;margin-left:1vw;display: inline-block;vertical-align: middle;">30w</div>
				</div>
			</div>
			<div style="width: 100vw;text-align: center;">
				<div style="padding: 9vh 0 1vh 0;">
					<button style="color: white;width: 71vw;height: 6.6vh;background-color: #55BECF;border-radius:10vw;border:none;font-size: 5vw;">下载</button>
				</div>
			</div>
	</div>
	</body>
</html>
童心（成都）
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js音乐播放、歌词、动效、图片旋转（手机模板放弃之作，仅供参考）

百度云盘：链接：https://pan.baidu.com/s/1ibSIpOCpaHODxf5aqe4TxA提取码：12hv复制这段内容后打开百度网盘手机App，操作更方便哦<!DOCTYPE html><html> <head> <meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1....
复制链接

扫一扫