化雪总比下雪冷-艺凌
本帖最后由 亚伦影音工作室 于 2024-4-16 10:34 编辑 <br /><br /><style>#papa {margin: 150px -420px;
width: 1440px;
height: 720px;
background:url('https://xlaj.cn/assets/file/zp/20240106015310.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: 37%; height: 39%; top:12.5%; left:9%;object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; }
#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:81.5%; left:8%;
bottom: 25px;
width: 20px;
height: 20px;background:#cccccc;
border: 2px solid #000000;
border-radius: 50%;
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: #000000;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 8px;
border-width: 5px 8px;
border-color: transparent transparent transparent #000000;
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: #000000;
top:68%;
left:24%;}
#prog {position: absolute;z-index: 91;
width: 19%;
height: 1.0%;
cursor: pointer;
top:82.7%;
box-shadow: 0px 0px 1px 1px #ffffff;
left:18%;
border-radius: 3px;}
#musickrc{width:30%;line-height:27px;position: absolute;position: absolute;left:12%;top:44%;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:13%;top:68%;font-size: 10px; font-family:仿宋;z-index: 21;}
</style>
<div id="papa">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/659a40f5871b83018aa75d99.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: 25px;" ></P>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 25px;"></P>
</div>
<div id="bt">化雪总比下雪冷-艺凌 </div>
</div>
<audio id="aud" src="https://bzgz.club/view.php/c957ce0a6d867427c1aa351691439ee8.mp3" loop autoplay></audio>
<script >
var songkrc =`化雪总比下雪冷-艺凌
作词：龙奔
作曲：龙奔
出品公司：Clever Music@克莱威尔
「未经许可请勿商业翻唱」
不再有任何的奢求
回忆在撕扯我伤口
曾经许下天长和地久
如今早已化为乌有
故事开始总很温柔
结局却配不上开头
曾经和你雪中手牵手
是否也能算共白头
化雪总比下雪冷
结束总比开始疼
两眼泪纷纷滴落在红尘
辜负青春耗尽半生
化雪总比下雪冷
结束总比开始疼
白头若是同淋雪可替
此生何来苦心人
此生何来苦心人
故事开始总很温柔
结局却配不上开头
曾经和你雪中手牵手
是否也能算共白头
化雪总比下雪冷
结束总比开始疼
两眼泪纷纷滴落在红尘
辜负青春耗尽半生
化雪总比下雪冷
结束总比开始疼
白头若是同淋雪可替
此生何来苦心人
此生何来苦心人
`;
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 + '%, #696969 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_187:} 欣赏亚伦的精美播放器制作，好听好看！欣赏学习了！{:4_199:} 欣赏精美制作！{:4_174:} 亚伦你也是太厉害了，动图也是修改的那么完美，必须赞一记! 我现在把音乐进度时间移动到下面了，但发现歌词不能出来，自己电脑预览好的，是不是歌词格式不对？ 谢谢亚伦一次次为小辣椒修改，感谢有你~~{:4_187:} 小辣椒 发表于 2024-1-7 21:51
谢谢亚伦一次次为小辣椒修改，感谢有你~~
对照代码，一段一段的检查，会发现问题的！！！！ 有时改好视频，真的不容易。
页:
[1]