论坛 › 欢乐水吧 › 《借一缕白发》魏佳艺【黑胶片播放器】

亚伦影音工作室 发表于 2024-3-17 20:56

《借一缕白发》魏佳艺【黑胶片播放器】

本帖最后由 亚伦影音工作室 于 2024-4-1 14:23 编辑 <br /><br /><style>
#papa {margin: 140px -300px;
        width: 1164px;
        height: 640px;
        background:url(https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}

#vid { position: absolute; width: 100%; height: 100%; top:20%; object-fit: cover; pointer-events: none;opacity: .4;z-index: -1; transition: 0.1s all ease;mix-blend-mode: lighten; }

#prog {
      position: absolute;z-index: 16;
      bottom: 30px;
      left: 8%;
      width: 80%;
      height: 2px;
      background: linear-gradient(to right, green, green var(--prg), white 0);
      color: lightgreen;
      --prg: 0%; --state: paused;
}
#prog::before, #prog::after { position: absolute;color: #cccccc; }
#prog::before { content: attr(data-cu); left:-50px; top: -10px; }
#prog::after { right: -50px; content: attr(data-du); ; top: -10px; }
#bfq{position: absolute;
width: 220px;
height: 220px;top:20%; left:5%;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(1);}
#mplayer {z-index: 80;position:absolute;top:0%;left:0%;width:220px;height:220px;cursor: pointer;z-index: 50}

#cd{top:55px; left:25px;z-index: 10;
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png')no-repeat center/cover;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95.5%; right:2%;font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#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%);}}
#musickrc{width:80%;line-height:30px;position: absolute;position: absolute;left:10%;top:80%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }

#bt{ width: 90%; height: 60px;color: #ffffff; position: absolute; left:3%;top:5%;font-size: 20px; font-family:仿宋;z-index: 11; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 80%;}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="bt">《借一缕白发》魏佳艺</div>
<video id="vid"src="https://www.kumeiwp.com/sub/filestores/2023/10/15/d2e637885a6d87c3a945900fb175cc5c.mp4" muted autoplay loop></video>
<div data-cu="00:00" data-du="00:00" id="prog" title="调节进度"></div>
<div id="bfq">
<div id="cd" ></div>
<img id="mplayer" src="https://pic.imgdb.cn/item/65f6e5c29f345e8d033c1e0e.png" alt="" title="点击暂停/播放" /></div>
<divid="musickrc" >
<divid="wzsd1"><p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></di>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>

</div>
<audio id="aud" src="https://bzgz.club/view.php/e7c5fedb853a09011fa5d6563ed80fc1.mp3" loop autoplay></audio>

<script >
var songkrc =`借一缕白发
作词Lyricist：张世彬
作曲Composer：张世彬
出品：亚伦影音工作室
我想问问老天
借一缕白发
用它覆盖世俗浮夸
不再贪恋繁华
不再纠结真假
是是非非全都不理它
我想求求老天
赐一缕白发
用它遮掩我的挣扎
曾经那些害怕
留下未愈的疤
还有很多欠我的回答
狠狠咽下那些想要去抱怨的话
好好看看身边被忽略的花
没有谁天生强大
扛得住风吹雨打
时光不曾为谁留下
我想求求老天
赐一缕白发
用它遮掩我的挣扎
曾经那些害怕
留下未愈的疤
还有很多欠我的回答
狠狠咽下那些想要去抱怨的话
好好看看身边被忽略的花
没有谁天生强大
扛得住风吹雨打
时光不曾为谁留下
狠狠咽下那些想要去抱怨的话
好好看看身边被忽略的花
没有谁天生强大
扛得住风吹雨打
时光不曾为谁留下
`;

function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var j = 0; j < lyric.length; j++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(j+1==lyric.length){ document.getElementById("musickrc01").innerHTML =lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
        if (aud.paused) { aud.play();}
else {aud.pause();}
}
aud.addEventListener("play", function (e) {
        img.src="https://pic.imgdb.cn/item/65f6e5d29f345e8d033c7a04.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://pic.imgdb.cn/item/65f6e5c29f345e8d033c1e0e.png";
}, false);
})();
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
/*进度条 进度时间*/
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 = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
});
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
/*结束*/
/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ? vid.play(): vid.pause() };
/*结束*/
cd.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>cd.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>cd.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

小辣椒 发表于 2024-3-17 21:24

亚伦的素材找的很好，这个背景非常是漂亮{:4_199:}

小辣椒 发表于 2024-3-17 21:26

这个效果很漂亮，只是最近我都玩的少了，先收藏代码

小辣椒 发表于 2024-3-17 21:26

感谢亚伦的精彩分享

红影 发表于 2024-3-17 21:50

漂亮的频谱效果，这个能真正暂停呢，不是用静态图代替的呢。非常美的制作。
欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2024-3-18 07:29

漂亮！

梦油 发表于 2024-3-18 09:18

欣赏佳作，问候亚伦。

老谟深虑 发表于 2024-3-18 16:06

          好漂亮，点赞！

查看完整版本: 《借一缕白发》魏佳艺【黑胶片播放器】