复制这段内容后打开百度网盘手机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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
