爱到天荒地老 - 唐艺
本帖最后由 亚伦影音工作室 于 2024-1-9 10:07 编辑 <br /><br /><style>#papa {margin: 150px -310px;
width: 1168px;
height: 640px;
background:#000000 url('https://')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: 50%; height: 50%; top:12.5%; left:49%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1;-webkit-mask-image: radial-gradient(black 25% ,transparent 70%); }
#dt{position: absolute;top:0%; left:0%;width: 100%;height:100%;z-index:-1;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
position: absolute;
top:94.5%; left:50.5%;
bottom: 25px;
width: 20px;
height: 15px;background:#333333;
border: 0px solid #000000;
border-radius: 20%;
opacity: 1;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: #ffffff;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 6px;
border-width: 5px 8px;
border-color: transparent transparent transparent #ffffff;
opacity: var(--disp1);
}
#mplayer::after {
width: 1px;
height: 10px;
border-width: 0 2px 0 2px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
font: normal 10px sans-serif;
color: #00ff00;
top:68%;
left:24%;}
#prog {position: absolute;z-index: 91;
width: 9%;
height: 0.6%;
cursor: pointer;
top:92.4%;
box-shadow: 0px 0px 1px 1px #cccccc;
left:47%;border-radius: 0px;}
#musickrc{width:45%;line-height:30px;position: absolute;position: absolute;left:50%;top:65%;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: 15%; height: 50px;color: #ffffff; position: absolute; left:46%;top:78%;font-size: 12px; font-family:仿宋;z-index: 21;}
</style>
<div id="papa">
<div id="dt"><img id="Img" src="http://chuangshicdn.data.mvbox.cn/album/24/01/08/24010814022029905152.gif" width="100%" height="100%"></div>
<video id="vid"src="http://chuangshicdn.data.mvbox.cn/music/yc/24/01/06/24010605520994609632.mp4" muted autoplay loop></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divid="musickrc" >
<p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 30px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 30px;"></P>
</div>
<div id="bt">爱到天荒地老 - 唐艺</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music328582052.mp3" loop autoplay></audio>
<script >
var songkrc =`爱到天荒地老 - 唐艺
曲Composer：刘涛
词Lyricist：刘涛/赵大白
制作人Producer：刘涛
编曲Arranger：谭侃侃
OP/SP：亚伦影音工作室
我希望你
一直都会爱我不管是现在或未来
我答应你
不管岁月如何更改都会一直爱你
一字一句一点一滴
千言万语不如爱你
你相信所以我相信
小小幸福捧在手心
开出花朵开过四季
手牵着手慢慢老去
多幸运爱的此刻
一直有你陪着
跨过时间的河
世上如此难得
如你一般清澈
你是我最美的景色
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
故事的开头和以后
最想是与你白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
我希望你
一直都会爱我不管是现在或未来
我答应你
不管岁月如何更改都会一直爱你
一字一句一点一滴
千言万语不如爱你
你相信所以我相信
小小幸福捧在手心
开出花朵开过四季
手牵着手慢慢老去
多幸运爱的此刻
一直有你陪着
跨过时间的河
世上如此难得
如你一般清澈
你是我最美的景色
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
故事的开头和以后
最想是与你白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
我爱你爱到天荒地老的时候
你爱我也有地久天长的等候
翻过了岁月的山丘
我们一直到白头
一生有你就别无所求
我爱你爱到天荒地老的时候
你爱我也有地久天长的守候
无论天晴还是雨后
爱你春夏到晚秋
日落看星河悠悠
只想和你白头
`;
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 i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = ""; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
/*进度条 进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 ' + aud.currentTime / aud.duration * 100 + '%, #333333 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
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>
<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;
}
}
};
}
vid=document.querySelector('#vid');
var image= document.getElementById("Img");
mplayer.onclick =function() { aud.paused ? (image.stop(),vid.pause()):(image.play(),vid.play())};
</script>
好代码，好制作，点赞！
漂亮的制作，有时一个漂亮的播放音箱，有按钮有进度条，还有漂亮的视频和动图。
所有的都能一键全控。欣赏亚伦老师好帖{:4_199:} 贴贴精美！欣赏中{:4_174:} 动图的暂停都是用开始的静态图代替的吧，貌似只有视频是真正停到当下位置的{:4_173:} 红影 发表于 2024-1-8 19:41
动图的暂停都是用开始的静态图代替的吧，貌似只有视频是真正停到当下位置的
主要一个静态图亚伦用的前面那个图，亚伦偷懒了{:4_170:}
这个是前面那个基础上修改的 亚伦太棒了，又一个修改出来了，只是很奇怪，微风我就是套用你的源码复制出来也是不行，一定得外加html才行 时间进度条还得移动一个合适的位置 小辣椒 发表于 2024-1-8 22:17
亚伦太棒了，又一个修改出来了，只是很奇怪，微风我就是套用你的源码复制出来也是不行，一定得外加html才行
源码是可以发表的！很可能哪里还有问题！ 亚伦影音工作室 发表于 2024-1-8 22:51
源码是可以发表的！很可能哪里还有问题！
我一点没有动就你的源码发了也是不能动图停止，郁闷哦 小辣椒 发表于 2024-1-8 22:16
主要一个静态图亚伦用的前面那个图，亚伦偷懒了
这个是前面那个基础上修改的
是的，亚伦老师做了好多个带音响效果的的，每一个都不一样，特别棒呢{:4_204:} 红影 发表于 2024-1-9 13:32
是的，亚伦老师做了好多个带音响效果的的，每一个都不一样，特别棒呢
亚伦特别喜欢玩这些效果{:4_170:} 小辣椒 发表于 2024-1-9 21:06
亚伦特别喜欢玩这些效果
这些效果很不错啊，各种音箱视觉冲击。 红影 发表于 2024-1-9 23:11
这些效果很不错啊，各种音箱视觉冲击。
亚伦很有水平，动图的截图做的很漂亮 小辣椒 发表于 2024-1-10 21:43
亚伦很有水平，动图的截图做的很漂亮
是的，非常漂亮{:4_187:}
页:
[1]