丰收年年 (Dj沈念对唱版) - 门丽/赵峰
<style>#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 20px #000; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a2ad18e66d9339feb3882503b3221087_preview.jpg') no-repeat center/cover; position: relative; z-index: 1; }
#mypic { position: absolute; top: 125px; right: 100px; width: 260px; transform: rotate(30deg); cursor: pointer; transition: all 2s; }
#mypic:hover { box-shadow: -10px -10px 40px 10px rgba(255,255,255,.45); transform: scale(1.5); }
#player { margin: auto; display: block; position: absolute; }
</style>
<div id="papa">
<canvas id="player"></canvas>
<img id="mypic" src="https://pic.imgdb.cn/item/6308dbb416f2c2beb112bf3c.jpg" alt="" />
</div>
<script>
let ctx = player.getContext('2d'), w = player.width = 350, h = player.height = 100, btnFlag, lineFlag, aud = new Audio();
let mplayer = {
startX: 30, startY: 70, radius: 16, lineLen: 200, c_lrc: 'teal', c_time: 'teal', c_track: 'lightblue', c_prg: 'red', c_circle: 'lightblue', c_btn: 'snow', c_btnhover: 'pink',
drawLrc: function(text) {
ctx.clearRect(0, 0, w, 50);
ctx.fillStyle = this.c_lrc;
ctx.textAlign = 'center';
ctx.beginPath();
ctx.font = '1.2em sans-serif';
ctx.fillText(text, w/2, 30);
ctx.fill();
},
drawProgress: function(prog, text) {
ctx.clearRect(this.startX + this.radius, this.startY - 10, w - this.startX + this.radius, 40);
ctx.beginPath();
ctx.font = '14px sans-serif';
ctx.textBaseline = 'middle';
ctx.strokeStyle = this.c_track;
ctx.moveTo(this.startX + this.radius + 4, this.startY);
ctx.lineTo(this.startX + this.radius + 4 + this.lineLen, this.startY);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = this.c_prg;
ctx.moveTo(this.startX + this.radius + 4, this.startY);
ctx.lineTo(this.startX + this.radius + 4 + prog, this.startY);
ctx.stroke();
ctx.fillStyle = this.c_time;
ctx.textAlign = 'left';
ctx.fillText(text, this.startX + this.radius + 8 + this.lineLen, this.startY);
ctx.fill();
},
drawBtn: function(id) {
ctx.clearRect(this.startX - this.radius, this.startY - this.radius, this.radius * 2, this.radius * 2);
ctx.fillStyle = this.c_circle;
ctx.beginPath();
ctx.arc(this.startX, this.startY, this.radius, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = btnFlag ? this.c_btnhover : this.c_btn;
ctx.beginPath();
if (id) {
ctx.moveTo(this.startX - this.radius / 2 + 1, this.startY - this.radius / 2);
ctx.lineTo(this.startX - this.radius / 2 + 1, this.startY + this.radius / 2);
ctx.lineTo(this.startX + this.radius / 2 + 1, this.startY);
ctx.fill();
} else {
ctx.fillRect(this.startX - this.radius / 2 + 5, this.startY - this.radius / 2, 2, this.radius);
ctx.fillRect(this.startX - this.radius / 2 + 10, this.startY - this.radius / 2, 2, this.radius);
}
},
setProgress: function() {
},
isBtnHover: function (x, y) {
return Math.pow(x - this.startX, 2) + Math.pow(y - this.startY, 2) <= Math.pow(this.radius, 2);
},
isLineHover: function(x, y) {
let xx = this.startX + this.radius + 4, yy = this.startY - 5;
return x >= xx && x <= xx + this.lineLen && y >= yy && y <= yy + 10;
},
};
let lrcAr =[
['0.00','丰收年年 (Dj沈念对唱版) - 门丽/赵峰'],
['3.01','词：周洪/赵峰'],
['5.03','曲：赵峰'],
['7.04','编曲：可心文化娱乐工作室'],
['9.07','原唱：门丽/赵峰'],
['11.10','混音：可心文化娱乐工作室'],
['13.03','制作人：赵润泽'],
['15.05','监制：赵峰'],
['16.07','出品人：赵峰'],
['18.08','出品公司：广州可心文化传播有限公司'],
['19.04','LRC编辑：醉美水芙蓉'],
['21.09','女：'],
['22.08','南方的稻谷低垂妩媚'],
['25.02','北方麦子金黄满穗'],
['27.08','红彤彤的苹果甜甜脆'],
['30.02','收获的果实心儿醉'],
['32.04','男：'],
['32.09','天上月圆水里鱼儿肥'],
['35.03','满山的牛羊鸡鸭飞'],
['37.08','姑娘和小伙成双成对'],
['40.03','收获的喜悦爬上眉'],
['42.05','合：'],
['42.09','依哟喂依呀依哟喂'],
['45.04','丰收的汗水呈祥瑞'],
['47.10','依哟喂依呀依哟喂'],
['50.03','丰收的锣鼓响如雷'],
['54.01','女：'],
['55.05','丰收年年歌声惹人醉'],
['58.00','梦里笑醒好几回嘞'],
['60.02','男：'],
['60.06','又是一年丰收年岁'],
['63.01','来年收获千百倍'],
['65.02','合：'],
['65.05','丰收年年我们举起杯'],
['68.01','家家户户喜洋洋嘞'],
['70.07','风调雨顺永相陪耶'],
['73.02','吉祥安康天下美'],
['98.02','女：'],
['98.04','天上月圆水里鱼儿肥'],
['100.10','满山的牛羊鸡鸭飞'],
['103.01','男：'],
['105.09','收获的喜悦爬上眉'],
['111.00','丰收的汗水呈祥瑞'],
['113.06','依哟喂依呀依哟喂'],
['116.00','丰收的锣鼓响如雷'],
['119.07','女：'],
['121.02','丰收年年歌声惹人醉'],
['123.07','梦里笑醒好几回嘞'],
['125.09','男：'],
['126.02','又是一年丰收年岁'],
['128.06','来年收获千百倍'],
['130.09','合：'],
['131.03','丰收年年我们举起杯'],
['133.07','家家户户喜洋洋嘞'],
['136.04','风调雨顺永相陪耶'],
['138.07','吉祥安康天下美'],
['140.09','女：'],
['144.00','丰收年年歌声惹人醉'],
['146.04','梦里笑醒好几回嘞'],
['148.07','男：'],
['149.01','又是一年丰收年岁'],
['151.04','来年收获千百倍'],
['153.06','合：'],
['154.00','丰收年年我们举起杯'],
['156.05','家家户户喜洋洋嘞'],
['159.00','风调雨顺永相陪耶'],
['161.06','吉祥安康天下美'],
['170.04','谢谢欣赏！'],
['348.00','合：'],
['473.00','姑娘和小伙成双成对'],
['728.00','依哟喂依呀依哟喂']
];
aud.src = 'https://www.qqmc.com/up/kwlink.php?id=235591739&.mp3 ';
aud.autoplay = true;
aud.loop = true;
mplayer.drawBtn(aud.paused);
mplayer.drawProgress(1, '00:00 | 00:00');
mplayer.drawLrc('等待播放 ...');
player.addEventListener('mousemove', (e) => {
btnFlag = mplayer.isBtnHover(e.offsetX, e.offsetY), lineFlag = mplayer.isLineHover(e.offsetX, e.offsetY);
player.style.cursor = btnFlag || lineFlag ? 'pointer' : 'default';
mplayer.drawBtn(aud.paused);
});
player.addEventListener('click', (e) => {
if(btnFlag) aud.paused ? aud.play() : aud.pause();
if(lineFlag) aud.currentTime = aud.duration * (e.offsetX - mplayer.startX - mplayer.radius - 4) / mplayer.lineLen;
});
aud.addEventListener('playing', ()=> mplayer.drawBtn(false));
aud.addEventListener('pause', ()=> mplayer.drawBtn(true));
aud.addEventListener('timeupdate', () => {
let prg = mplayer.lineLen * aud.currentTime / aud.duration, tMsg = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
mplayer.drawProgress(prg, tMsg);
for(j = 0; j < lrcAr.length;j ++) {
if(aud.currentTime >= lrcAr) mplayer.drawLrc(lrcAr);
}
});
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
闻到了稻谷香 喜洋洋的帖子，制作很美丽 这是水稻，还是谷子？ 马黑黑 发表于 2022-8-26 22:56
闻到了稻谷香
黑黑老师早上好！ 青青子衿 发表于 2022-8-27 00:12
喜洋洋的帖子，制作很美丽
谢谢朋友支持！ 醉美水芙蓉 发表于 2022-8-27 06:35
黑黑老师早上好！
早 很漂亮，这个还是画布的歌词同步呢。欣赏水芙蓉好帖{:4_187:} 红影 发表于 2022-8-27 10:54
很漂亮，这个还是画布的歌词同步呢。欣赏水芙蓉好帖
谢谢红影美女欣赏点评！ 水芙蓉制作得真漂亮。大丰收的日子，很喜庆。{:4_199:} 加林森 发表于 2022-8-27 12:35
水芙蓉制作得真漂亮。大丰收的日子，很喜庆。
谢谢队长精彩点评！ 醉美水芙蓉 发表于 2022-8-27 17:02
谢谢队长精彩点评！
不客气的。 醉美水芙蓉 发表于 2022-8-27 11:37
谢谢红影美女欣赏点评！
这个制作很有特色，欣赏水芙蓉好帖{:4_187:}
页:
[1]