HTML5可视频谱音画《我要一生陪你走(DJ沈念版）》
本帖最后由 亚伦影音工作室 于 2022-12-9 14:21 编辑 <br /><br /><style>#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/87cfe1698d23595c1521ae91e270a5ca.jpg') no-repeat center/cover; box-shadow: 2px 3px 2px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1;overflow:hidden; }
#mplayer { position: absolute; width: 100%; height: 120px; bottom: 0; display: flex;justify-content: center; align-items: flex-end;z-index: 12; }
.mLine { position: relative; margin: 0 2px 0 0; width: 6px; height: 20px;background: linear-gradient(0deg, #FA0000 0%,#46F803 66%,rgba(155, 89, 182, 0) 95%);transition: height .45s; }
.mLine::after { position: absolute; content: ''; width: 100%; height: 3px;border-radius:50%; background: #fff000; top: -8px; filter:blur(0px)brightness(120%) drop-shadow(#fff000 0 0 2px)drop-shadow(#FFf000 0 0 2px);}
.tit { position: absolute; top: 30px; font: bold 2.2em sans-serif; color: #ff5c00; text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>
<div id="papa">
<divclass="items "style="text-align: center;position: absolute;top:-120px; left:250px;z-index: 11;"><divid="lrcArea"></div></div>
<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 20px,#red 0);-webkit-mask: radial-gradient(transparent 20px,red 0);background: url(https://pic.imgdb.cn/item/6392d1d2b1fccdcd36701312.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%; "></div>
<div class="tit">我要一生陪你走(DJ沈念版）</div>
<div id="mplayer"></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=199811889&.mp3" loop autoplay></audio>
</div>
<script>
(function() {
let ypData = ;
let total = Math.ceil(mplayer.offsetWidth / 6);
let cNum = 0;
for(j=0; j<total; j++) {
let el = document.createElement('span');
el.className = 'mLine';
el.style.height = Math.floor(Math.random()* 100) + 'px';
mplayer.appendChild(el);
}
let lines = document.querySelectorAll('.mLine');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
cNum ++;
if(cNum >= ypData.length) cNum = 0;
setPinpu(cNum);
});
function setPinpu(num) {
let data = ypData;
for(j=0; j<total; j++) {
lines.style.height = Math.floor(Math.random() * data / 1.5) + Math.floor(Math.random() *50) + 'px';
}
}
})();
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}
#lrcArea{width: 980px;
height: 200%;
overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
display: block;margin: 0px -100px;}
#lrcArea ul{width: 100%;150px;
text-align: center;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 480px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:悟空大字库;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 35px;
font-family:悟空大字库;text-align: center;
color: #FF0000;
font-weight: bold; margin: 0px auto;}
/*mv动画*/
.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:50px;z-index: 4;}
.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 10s linear infinite;
}@keyframes rotating{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
<style type="text/css">.items{animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script id="lrc" type="text">
我要一生陪你走(DJ沈念版） - 德惠他宝哥/杨茗越
词：张天赋
曲：张天赋
男：
我要一生陪你走
女：
我要一生伴你左右
男：
守着你护着你
女：
从今天到永久
男：
走过春走过秋
妹妹呀你要走
哥哥我心里的情话
还没跟你说够
女：
哥哥啊情哥哥
我等你把爱说出口
妹妹我就是你的人
只等你来挽留
男：
我要一生陪你走
女：
我要一生牵你的手
男：
疼着你爱着你
女：
从青丝到白头
男：
我要一生陪你走
女：
我要一生伴你左右
男：
守着你护着你
女：
从今天到永久
男：
走过春走过秋
妹妹呀你要走
哥哥我心里的情话
还没跟你说够
女：
哥哥啊情哥哥
我等你把爱说出口
妹妹我就是你的人
只等你来挽留
男：
我要一生陪你走
女：
我要一生牵你的手
男：
疼着你 爱着你
女：
从青丝到白头
男：
我要一生陪你走
女：
我要一生伴你左右
男：
守着你护着你
女：
从今天到永久
男：
我要一生陪你走
女：
我要一生牵你的手
男：
疼着你爱着你
女：
从青丝到白头
男：
我要一生陪你走
女：
我要一生伴你左右
男：
守着你护着你
女：
从今天到永久
男：
守着你护着你
合：
从今天到永久
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {
if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {
that.play();
}, false);
this.player.addEventListener('pause',function() {
that.pause();
}, false);
//歌词索引
this.idx = 0;
},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? ' ' : c) + '\n';
});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);
}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {
li.className = 'cur';
}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {
return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);
}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');
},
//播放
play:function() {
this.stop = false;
var that = this,
player = this.player,
i,len;
this.t = setInterval(function() {
if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;
}
}
},300);
},
//暂停
pause:function() {
this.stop = true;
clearInterval(this.t);
},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);
});
return seconds;
},
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,
i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';
}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;
}
};
function g(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
function cEl(el) {
return document.createElement(el);
}
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function isEmptyObj(o) {
for(var p in o) return false;
return true;
}
function getOffset(el) {
var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: left,
top: top
};
}
var p = new musicPlayer({
player: g('aud'),
lrc: g('lrc').innerHTML,
lrcArea: g('lrcArea')
});
</script>
<script type="text/javascript">
var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);
</script>
经过测试马老师的《无需跨域获取音频波形数据》工具成功显示频谱。 我这里受单位网络限制，暂时无法听到音乐和看到频谱效果。先来点赞送花。{:4_204:} 亚伦影音工作室 发表于 2022-12-9 14:27
经过测试马老师的《无需跨域获取音频波形数据》工具成功显示频谱。
感谢黑总分享，可惜俺不会{:4_203:} 代黑总批改作业{:4_170:}
100√
继续加油！
真好看的帖，欣赏问好！{:4_185:} 这个频谱加了帽子{:4_199:} 做得真是精彩！歌也很有意思。 谢谢分享精彩制作！{:4_191:}
页:
[1]