《茶女》-茶少 （学习老黑“入画江南”制作）
本帖最后由 加林森 于 2022-8-24 12:06 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 576px; display: grid; place-items: center; background: #ccc url('https://pic.imgdb.cn/item/63057a1616f2c2beb134486f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#player { position: absolute; right: 880px; top: 20px; cursor: pointer; }
#lrcbox { position: absolute; top: 20px; font: normal 1.8em sans-serif; color: #50616d; text-shadow: 1px 1px 2px #000, -5px -5px 10px rgba(0,0,0,.65); }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div id="papa">
<div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" /></div>
<canvas id="player"></canvas>
<span id="lrcbox"></span>
</div>
<script>
let ctx = player.getContext('2d'),
w = h = player.width = player.height = 120,
prog = '点这播放',
angle = 0,
aud = new Audio();
let lrcAr = [
['2.16','茶女-茶少'],
['58.45','晨光拨碎梦乡'],
['60.47','谷雨前最后一场霜'],
['63.57','推开了窗 烟雨依旧氤氲了茶乡'],
['72.74','银针静悬水中央'],
['76.36','青瓷碧螺壶底藏'],
['80.03','心事嫩芽两叶静静舒长'],
['89.01','飞絮绕过柳塘'],
['91.77','樱桃熟了点点红妆'],
['95.55','堂前檐下衔泥的燕又飞过几双'],
['102.87','春露已采满一觞'],
['106.78','不经意滴入了泪光'],
['110.69','她将一碗春愁付了韶光'],
['117.60','饮一杯就忘了春夏'],
['121.16','又一杯就惊起了牵挂'],
['124.84','再一杯就潇潇暮雨空山和泪下'],
['132.65','那异乡不眠的人啊'],
['136.49','HU~他遥望着远方'],
['141.35','心若飘倦了'],
['143.31','魂牵梦萦是茶香'],
['180.42','飞絮绕过柳塘'],
['183.50','樱桃熟了点点红妆'],
['186.95','堂前檐下衔泥的燕又飞过几双'],
['194.40','春露已采满一觞'],
['198.17','不经意滴入了泪光'],
['202.26','她将一碗春愁付了韶光'],
['208.92','饮一杯就忘了春夏'],
['212.38','又一杯就惊起了牵挂'],
['216.23','再一杯就潇潇暮雨空山和泪下'],
['224.04','那异乡不眠的人啊'],
['227.68','HU~他遥望着远方'],
['232.45','心若飘倦了'],
['235.46','魂牵梦萦是茶香'],
['239.41','饮一杯就忘了春夏'],
['242.92','又一杯就惊起了牵挂'],
['246.61','再一杯就潇潇暮雨空山和泪下'],
['254.74','那异乡不眠的人啊'],
['258.14','HU~他遥望着远方'],
['262.88','你若飞倦了'],
['265.49','魂牵梦萦是茶香']
];
aud.src = 'https://music.163.com/song/media/outer/url?id=366007.mp3';
aud.loop = true;
aud.autoplay = true;
drawCircle();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
angle = 360 * aud.currentTime / aud.duration;
prog = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
drawCircle();
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function drawCircle() {
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
ctx.strokeStyle = '#f0fcff';
ctx.lineWidth = 8;
ctx.arc(w/2, h/2, w/2 - 6, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = ctx.fillStyle = '#50616d';
ctx.arc(w/2, h/2, w/2 - 6, -90 * Math.PI / 180, (angle - 90) * Math.PI / 180);
ctx.stroke();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(prog, w/2, h/2);
}
function toMin(val) {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
@马黑黑 欣赏队长好作品 马黑黑 发表于 2022-8-24 09:57
欣赏队长好作品
我改变了播放器的位置。可以的吧。这样就可以看见时间的变化了。 老林早晨好！看来你对制作蝴蝶很有心得啊。 梦油 发表于 2022-8-24 10:51
老林早晨好！看来你对制作蝴蝶很有心得啊。
这个不敢放鹰出来玩的。{:4_189:} 加林森 发表于 2022-8-24 10:03
我改变了播放器的位置。可以的吧。这样就可以看见时间的变化了。
在哪儿都可以 马黑黑 发表于 2022-8-24 12:23
在哪儿都可以
嗯嗯。 加林森 发表于 2022-8-24 12:31
嗯嗯。
就是说，根据场景、根据需要来设定 马黑黑 发表于 2022-8-24 12:39
就是说，根据场景、根据需要来设定
是的。我现在就是这样考虑的了。 漂亮，欣赏队长好帖{:4_204:} 红影 发表于 2022-8-24 13:33
漂亮，欣赏队长好帖
哦。 加林森 发表于 2022-8-24 10:58
这个不敢放鹰出来玩的。
蝴蝶和老鹰是你的拿手好戏啊。 梦油 发表于 2022-8-24 15:08
蝴蝶和老鹰是你的拿手好戏啊。
是啊。 加林森 发表于 2022-8-24 13:14
是的。我现在就是这样考虑的了。
挺好的 马黑黑 发表于 2022-8-24 17:42
挺好的
谢谢！{:4_190:} 队长这个是黑黑的教程分享，好像没有用歌词同步上去 小辣椒 发表于 2022-8-24 20:27
队长这个是黑黑的教程分享，好像没有用歌词同步上去
我修改了播放器的定位，歌词基本上还能对上的。放了两只蝴蝶去玩玩。 作品漂亮，茶女漂亮{:4_203:} 樵歌 发表于 2022-8-25 18:36
作品漂亮，茶女漂亮
不错的。
页:
[1]