《画里有话》 - 尹昔眠（试帖黑黑老师音频播放控制器应用实例）
本帖最后由 亦是金 于 2024-1-26 20:34 编辑 <br /><br /><div style="width: 1000px;height: 667px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:10px;margin-LEFT: -200px;"><style>
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: relative; top: -870px; left: 0px; font: bold 2.6em sans-serif; color:
#FAEFC0; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<style>
#papa {
margin: auto;
top: 0px;
left: 0px;
width: 1000px;
height: 667px;
background: tan url('https://s4.ax1x.com/2022/02/17/H5pStP.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
}
</style>
<div id="papa">
<css-doodle id="mplayer">
:doodle {
@grid: 2 / 550px 100px;
position: absolute;
color: var(--color);
bottom: 0;
--prog: 0%;
--size: 60px;
--ttmsg1: '00:00';
--ttmsg2: '00:00';
--color: #1434f6;
--state: paused;
}
@nth(1) {@place: 35% 100%;:after { content: var(--ttmsg1); }}
@nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);}
@nth(3) {@place: 65% 100%;:after { content: var(--ttmsg2); }}
@nth(4) {@place: 50% 80%;@size: 100% 2px;background: #bbb;display: grid;place-items: center start;:before {content: '';width: var(--prog);height: 100%;background: var(--color);}}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
</div>
<img class=&lazyload bg-gif" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" data-original="" title="" alt="" style="z-index: 1;POSITION: relative; TOP: -250px;LEFT:750px;height: 70px; margin: 0px;border-radius:3%background-color: rgb(255, 255, 255); display: block;">
<style type="text/css">
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:-720px;LEFT: -280px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《 画 里 有 话 》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;"> - 尹昔眠</span></div>
<div style="position: relative;width: 500px;height: 50px;top:-150px;LEFT: 800px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;"> 亦是金在线音乐 </span></span></span></p></div>
<div style="position: relative;width: 600px;height: 50px;top:-160px;LEFT: 150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#0f09fe;"><span style="font-family:华文隶书;"><span style="font-size:28px;"></span></span></span></p></div>
</style>
<div id="papa">
<div id="mama"><span id="box"></span></div>
<span id="btnplay"></span> <!--播放按钮代码-->
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2004667932" autoplay= "autoplay"></audio>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
(function() {
let mKey = 0, mFlag = true, slip = 0.1;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.loop = false;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime - slip >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
})();
motion();
function motion() {
moveX += stepX;
moveY += stepY;
mama.style.left = moveX + 'px';
mama.style.top = moveY + 'px';
requestAnimationFrame(motion);
if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>
</div>
<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://www.huachaowang.com/css-doodle.min.js';
document.head.appendChild(script);
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;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)});
mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;}
mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;}
})();
</script>
首席欣赏{:4_199:} 冬天的雨 发表于 2023-5-12 08:31
首席欣赏
问好冬天的雨！谢谢欣赏！{:4_190:} 漂亮的播放器，花潮的歌词同步，赞的 感谢分享{:4_187:} @黑黑老师，我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢！{:4_190:} 欣赏美帖！
似乎同步、循环都有改进的余地。
冬天的雨 发表于 2023-5-12 08:32
漂亮的播放器，花潮的歌词同步，赞的
在这里要学习的东西真多，玩的也开心！真好！！！{:4_205:} 冬天的雨 发表于 2023-5-12 08:33
感谢分享
祝你欣赏愉快！{:4_190:} 起个网名好难 发表于 2023-5-12 08:53
欣赏美帖！
似乎同步、循环都有改进的余地。
问好老师！{:4_190:}谢谢老师点评！我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢！ 亦是金 发表于 2023-5-12 08:45
@黑黑老师，我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢！
艾特的对方必须是论坛名，不能是自己习惯的叫法，否则是艾特不到的{:4_173:} 这用了黑黑的最新css-doodle音频播放控制器，做得这么漂亮。给亦是金老师点赞{:4_199:} 这个背景画面好美，选的歌曲也好听。非常赞{:4_187:} 好美的帖，欣赏点赞！{:4_178:} 红影 发表于 2023-5-12 09:54
艾特的对方必须是论坛名，不能是自己习惯的叫法，否则是艾特不到的
好的，谢谢！{:4_187:} 红影 发表于 2023-5-12 09:56
这用了黑黑的最新css-doodle音频播放控制器，做得这么漂亮。给亦是金老师点赞
问好！谢谢欣赏！{:4_187:} 梦缘 发表于 2023-5-12 10:37
好美的帖，欣赏点赞！
问好梦缘！祝你欣赏愉快！{:4_187:} 亦是金 发表于 2023-5-12 11:00
好的，谢谢！
艾特好了以后，有细线显示，表明已经发送给对方了{:4_173:} 亦是金 发表于 2023-5-12 11:01
问好！谢谢欣赏！
亦是金老师每次做帖子都有自己的修改，很棒的{:4_199:} @马黑黑我想在帖子里加上花朵飞舞效果，反复捣鼓没有成功。请老师指点！谢谢！{:4_190:}
页:
[1]
2