音画 走进花潮【添加同步歌词】
本帖最后由 亚伦影音工作室 于 2024-4-14 07:55 编辑 <br /><br /><style>#mydiv { margin: 120px-300px ; width: 1164px; height: 620px; background: url('https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #333; position: relative; }
#tub{ position: absolute; width: 220px; height: 200px;top: 28px; cursor: pointer; left: 820px; filter:drop-shadow(#000 2px 2px 0)}
#play { position: absolute; width: 210px; height: 50px;top: 552px; cursor: pointer; left: 60px; }
#play img{height: 100%;width: 100%;}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
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>
<div id="mydiv">
<img id="tub" src="https://pic.imgdb.cn/item/661b0afd68eb935713287d17.png" alt="" />
<audio id="aud" src="https://bzgz.club/view.php/83765be3c0d8d3d55036fb7a7234debf.mp3" ></audio>
<div id="play"> <img id="Img" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" alt="" /></div>
<divclass="lrc" >
<div id="wzsd1"><ul id="ullrc">
</ul>
</div>
</div>
</div>
<script>let autoplayPromise = aud.play();
var canv = document.createElement('canvas');
var ww = canv.width = mydiv.offsetWidth;
var hh = canv.height = mydiv.offsetHeight;
canv.style.cssText = `position: absolute'; left: 0; top: 0; cursor: crosshair`;
mydiv.prepend(canv);
var ctx = canv.getContext('2d');
var balls = [];
var raf = null;
var speed = () => (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 0.5 + 0.5);
var mState = () => {
aud.paused ?
(mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf)) :
(mydiv.style.setProperty('--state', 'running'), render());
};
var innerCircle = (ex,ey,cx,cy,r) => Math.sqrt((ex - cx) ** 2 + (ey - cy) ** 2) <= r;
var drawBall = (x,y,r,color) => {
ctx.save();
ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.restore();
};
var move = (ball) => {
var x = ball.x, y = ball.y, r = ball.r, color = ball.color, spdX = ball.speedX, spdY = ball.speedY;
x += spdX;
y += spdY;
if(x - r < 0 || x + r > ww) spdX = - spdX;
if(y - r < 0 || y + r > hh) spdY = - spdY;
ball.x = x;
ball.y = y;
ball.speedX = spdX;
ball.speedY = spdY;
drawBall(x,y,r,color);
};
var render = () => {
ctx.clearRect(0,0,ww,hh);
for(var j = 0; j < balls.length; j ++) {
for(var k = 0; k < balls.length; k ++) {
var dx = balls.x - balls.x, dy = balls.y - balls.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if(distance < (balls.r + balls.r)) {
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
balls.speedX = -balls.speedX;
balls.speedY = -balls.speedY;
}
}
move(balls);
}
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(render);
};
var initBalls = (total) => {
for (var j = 0; j < total; j ++) {
var x = Math.random() * (ww - 200) + 50, y = Math.random() * (hh - 100) + 30, r = Math.random() * 4+ 4, color = '#' + Math.random().toString(16).substr(-6), spdx = speed(), spdy = speed();
balls.push({x: x, y: y, r: r, color: color, speedX: spdx, speedY: spdy});
move(balls);
}
};
aud.loop = false;
aud.onplaying = aud.onpause = () => mState();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
canv.onclick = (e) => {
var x = e.offsetX, y = e.offsetY;
for(var j = 0; j < balls.length; j ++) {
if(innerCircle(x, y, balls.x, balls.y, balls.r)) {
if(balls.r < 20) balls.r += 2;
balls.color = `#${Math.random().toString(16).substr(-6)}`;
}
}
};
initBalls(40);
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");
play.onclick = () => aud.paused ? (aud.play(),image.play()): (aud.pause(),image.stop());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
/*控制歌词闪动*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
</script>
<style type="text/css">
.lrc{z-index: 20;
width: 60%;
height: 120px;
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;position: absolute;top:68%; left:25%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 40px;
color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `
走进花潮
词曲：不知
演唱：不知
LRC同步歌词：亚伦影音
00:09.03]出品：亚伦影音
走进花潮论坛，
心灵飞翔知识的海洋，
智慧闪耀朋友们相聚，
分享快乐，
梦想起航。
走进花潮论坛，
思维绽放思想的火花，
激发创意交流互动，
收获满满，
智慧之光照亮未来。
走进花潮论坛，
心灵交融情感的纽带，
温暖心房真诚的交流，
感悟人生，
友情的芬芳弥漫。
走进花潮论坛，
梦想生根追逐希望，
展翅高飞智慧的种子，
在心中发芽，
让我们共同成长。
走进花潮论坛，
思想的盛宴，
快乐的源泉，
让我们共同探索，
共同提高，
让我们共同成长，
让我们共同成长。`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script>
挺漂亮的音画作品。 祝愿花潮论坛繁荣兴旺！
亚伦朋友辛苦啦！ 亚伦老师把龙卷风的歌曲变成音画了，这个制作真美，还能直接看到歌词了。
谢谢亚伦老师的制作{:4_199:} 每次听到这首花潮之歌，都很激动{:4_173:} 欣赏老师的精美制作，点赞！
欣赏亚伦的精彩制作{:4_199:} 把龙帅的歌曲用上去了，好棒哦{:4_199:} 好听好看 欣赏佳作 感谢老师分享
页:
[1]