测试多曲播放器动画背景
本帖最后由 亚伦影音工作室 于 2023-11-5 06:05 编辑 <br /><br /><style>#papa{margin: 10px -300px;
width: 1164px;
height: 640px;
background:url(https://pic.imgdb.cn/item/65378517c458853aef7deb87.jpg)no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345; }
#geci{width: 100%;
font: normal 3em/0em 华文隶书;
color: #ff0000;
filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
text-align:center;
position: absolute; pointer-events: none;
z-index: 10;
}
#wzsd1 { animation: wzsd 0.56s linear infinite ; position:absolute;width:100%;height:80px; z-index: 10; top:90%; }
@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%);}}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<style>
#gj {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:20%; left:5%;z-index: 20;
position: absolute;
width: 350px;
height: 350px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}
#mplayer {position: absolute;
top:2%; left:0%;z-index: 21;
width: 500px;
height: 500px;
cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#tmsg {position: absolute;z-index: 20;
font: normal 25px sans-serif;
color: #ffffff;
top:500px;
left:14%;}
#prog {position: absolute;z-index: 91;
width: 80%;
height: 0.3%;
cursor: pointer;
top:95%;
margin:0px 10%;
border-radius: 2px;}
</style>
<div id="papa" >
<span id="fullscreen">全屏</span>
<div id="wzsd1" >
<div id="geci" ></div>
</div>
<audio id="aud"autoplay="autoplay" ></audio>
<ol style="width:380px;height:200px;color:#00ff00;position:absolute;left:30px;top:124px;font: normal 1.2em/2em 仿宋;cursor:pointer;z-index: 20; "></ol>
<divid="prog"></div>
<div id="gj" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>
<div id="testImg" >
<pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p><pclass="photo"></p>
</div>
</div>
<script >
var lrc= []
lrc = [,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc = [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
lrc = [['0.00', '晚秋 - 黄凯芹'], ['26.13', '曾停留风里看着多少的晚秋'], ['31.65', '如何能跟你说别潇洒的远走'], ['37.77', '含愁凝望你 要分手是时候'], ['43.38', '那心间多少泪水未让流'], ['48.86', '何时能解开心中多少苦与忧'], ['54.20', '何时能解释心中空虚的借口'], ['61.04', '情谜围住我 你此际又回眸'], ['66.70', '问情怀可永久相拥有'], ['72.65', '朦胧缠着那份爱万缕'], ['78.38', '明晨离别盼望爱仍留'], ['84.06', '共你常一对 相爱结伴随'], ['89.90', '却总怕醒觉随梦走'], ['118.76', '何时能解开心中多少苦与忧'], ['124.28', '何时能解释心中空虚的借口'], ['130.50', '情谜围住我 你此际又回眸'], ['136.06', '问情怀可永久相拥有'], ['141.60', '朦胧缠着那份爱万缕'], ['147.61', '明晨离别盼望爱仍留'], ['153.70', '共你常一对 相爱结伴随'], ['159.26', '却总怕醒觉随梦走'], ['164.77', '何时能解开心中多少苦与忧'], ['170.59', '何时能解释心中空虚的借口'], ['176.77', '情谜围住我 你此际又回眸'], ['182.38', '问情怀可永久相拥有'], ['188.50', '唯求原谅我 恕失敬别离后'], ['193.97', '未回头 因已经心伤透']];
lrc = [['0.00', '风的季节-黎瑞恩'], ['6.36', '曲：李雅桑 词：汤正川 编：梁伟基'], ['34.95', '凉风轻轻吹到悄然进了我衣襟'], ['39.75', '夏天偷去听不见声音'], ['44.55', '日子匆匆走过倍令我有百感生'], ['49.38', '记挂那一片景象缤纷'], ['58.91', '随风轻轻吹到你步进了我的心'], ['63.66', '在一息间改变我一生'], ['68.52', '付出多少热诚也没法去计得真'], ['73.30', '却也不需再惊惧风雨侵'], ['82.88', '吹呀吹 让这风吹'], ['87.07', '抹干眼眸里亮晶的眼泪'], ['92.55', '吹呀吹 让这风吹'], ['97.23', '哀伤通通带走 管风里是谁'], ['111.71', '从风沙初起想到是季节变更'], ['116.55', '梦中醒却岁月如飞奔'], ['121.33', '是否早订下来你或我也会变心'], ['126.10', '慨叹怎么会久合终要分'], ['135.68', '狂风吹得起劲朗日也要被蔽隐'], ['140.47', '泛起一片迷朦尘埃滚'], ['145.28', '掠走心里一切美梦带去我欢欣'], ['150.08', '带去我的爱只是独留恨'], ['159.76', '吹呀吹 让这风吹'], ['163.93', '抹干眼眸里亮晶的眼泪'], ['169.32', '吹呀吹 让这风吹'], ['174.09', '哀伤通通带走 管风里是谁'], ['207.73', '吹呀吹 让这风吹'], ['211.89', '抹干眼眸里亮晶的眼泪'], ['217.42', '吹呀吹 让这风吹'], ['222.08', '哀伤通通带走 管风里是谁']];
lrc = [['0.00', '千千阕歌-陈慧娴'], ['3.23', '词：林振强'], ['6.47', '曲：马饲野康二'], ['9.70', '编曲：卢东尼'], ['12.94', '制作人：欧丁玉&陈永明&陈慧娴'], ['16.17', '徐徐回望'], ['17.76', '曾属于彼此的晚上'], ['22.38', '红红仍是你'], ['24.84', '赠我的心中艳阳'], ['30.24', '如流傻泪'], ['31.86', '祈望可体恤兼见谅'], ['36.51', '明晨离别你'], ['38.97', '路也许孤单得漫长'], ['43.53', '一瞬间太多东西要讲'], ['47.10', '可惜即将在各一方'], ['50.25', '只好深深把这刻尽凝望'], ['56.70', '来日纵使千千阙歌'], ['60.39', '飘于远方我路上'], ['63.90', '来日纵使千千晚星'], ['67.41', '亮过今晚月亮'], ['71.46', '都比不起这宵美丽'], ['74.94', '亦绝不可使我更欣赏'], ['78.51', 'Ah 因你今晚共我唱'], ['119.13', '临行临别'], ['120.18', '才顿感哀伤的漂亮'], ['124.86', '原来全是你'], ['127.29', '令我的思忆漫长'], ['133.05', '何年何月'], ['134.31', '才又可今宵一样'], ['139.02', '停留凝望里'], ['141.33', '让眼睛讲彼此立场'], ['146.07', '当某天雨点轻敲你窗'], ['149.40', '当风声吹乱你构想'], ['152.67', '可否抽空想这张旧模样'], ['159.24', '来日纵使千千阙歌'], ['162.84', '飘于远方我路上'], ['166.41', '来日纵使千千晚星'], ['169.86', '亮过今晚月亮'], ['173.94', '都比不起这宵美丽'], ['178.80', '亦绝不可使我更欣赏'], ['180.99', 'Ah 因你今晚共我唱'], ['200.88', 'Ah 怎都比不起这宵美丽'], ['205.68', '亦绝不可使我更欣赏'], ['209.19', '因今宵的我可共你唱'], ['215.70', '来日纵使千千阙歌'], ['219.27', '飘于远方我路上'], ['222.87', '来日纵使千千晚星'], ['226.41', '亮过今晚月亮'], ['230.46', '都比不起这宵美丽'], ['233.94', '亦绝不可使我更欣赏'], ['237.51', 'Ah 因你今晚共我唱'], ['245.94', '来日纵使千千阙歌'], ['247.68', '飘于远方我路上'], ['251.19', '来日纵使千千晚星'], ['254.70', '亮过今晚月亮'], ['258.69', '都比不起这宵美丽'], ['262.23', '都洗不清今晚我所想'], ['266.97', '因不知哪天再共你唱']];
lrc = [['0.00', '倩女幽魂 - 张国荣'], ['2.09', '词：黄沾'], ['3.24', '曲：黄沾'], ['11.10', '人生路'], ['14.30', '美梦似路长'], ['19.16', '路里风霜'], ['21.90', '风霜扑面干'], ['27.07', '红尘里'], ['30.79', '美梦有几多方向'], ['35.12', '找痴痴梦幻中心爱'], ['40.37', '路随人茫茫'], ['45.95', '人生是'], ['48.91', '美梦与热望'], ['53.45', '梦里依稀'], ['56.31', '依稀有泪光'], ['61.53', '何从何去'], ['65.59', '去觅我心中方向'], ['69.82', '风仿佛在梦中轻叹'], ['74.91', '路和人茫茫'], ['164.15', '人间路'], ['167.06', '快乐少年郎'], ['171.51', '路里崎岖'], ['174.14', '崎岖不见阳光'], ['179.73', '泥尘里'], ['183.34', '快乐有几多方向'], ['187.76', '一丝丝梦幻般风雨'], ['192.96', '路随人茫茫'], ['197.80', '丝丝梦幻般风雨'], ['203.06', '路随人茫茫']];
lrc =[,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var videoArray = [
["https://p4.t57.cn:8399/2021/zw/2/GMV.m4a","最远的你是我最近的爱dj(孙艺琪)"], ["https://www.qqmc.com/mp3/music176503550.mp3","越是爱你心越痛(孙艺琪)"], ["https://xlaj.cn/assets/file/zp/20231008131344.mp3", "突然的自我(DJ童波版)"],["https://storage.live.com/items/1965B2B1656C2AF6!17615?","黄凯芹-晚秋"],
["https://storage.live.com/items/1965B2B1656C2AF6!17611?","黎瑞恩-风的季节"],
["https://storage.live.com/items/1965B2B1656C2AF6!17617?","陈慧娴-千千阕歌"],
["https://storage.live.com/items/1965B2B1656C2AF6!17618?","张国荣-倩女幽魂"],
["https://wj1.zp68.com:812/lxx/yunhua/2023/04/02/xsdlj.mp3","心上的罗加-阿鲁阿卓"]
];
var items = []
var olObj = document.querySelector('ol');
for(i = 0 ; i < videoArray.length; i++) {
oli = document.createElement('li');
oTxt = document.createTextNode(videoArray);
oli.appendChild(oTxt);
olObj.appendChild(oli);
items = oli;
}
geci = document.querySelector('#geci')
var player = document.querySelector('#aud');
var curIdx = 0;
player.focus();
player.src = videoArray;
items.style.color = 'red';
;
player.addEventListener("timeupdate", myFunction);
function myFunction() {
for(j=0; j<lrc.length; j++){
if(player.currentTime >= lrc){
geci.innerHTML = lrc;
}
}
}
player.onended = function() {
items.style.color = '#ffffff';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = videoArray;
items.style.color = '#ff0000';
player.play();
}
for(n = 0; n < items.length; n++) {
items.onclick = function() {
player.pause();
items.style.color = '#00f000';
for(j = 0; j < items.length; j++) {
if(this.innerHTML == videoArray) {
player.src = videoArray;
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
}
};
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 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>
<style>
.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0px;filter:contrast(120%)brightness(80%);
opacity: 0;
animation: round 90s linear infinite;}
@keyframes round{0% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
6% {opacity: 1;-webkit-transform:translate(0%,0%)scale(1) ;}
16% {opacity: 1;-webkit-transform:translate(130%,0%)scale(1) rotateY(140deg)rotate(0deg);}
18% {opacity: 0;-webkit-transform:translate(130%,0%)scale(1) rotateY(140deg)rotate(0deg);}
}
.photo:nth-child(1) {animation-delay: 84s;background: url('https://img-qn.51miz.com/preview/element/00/01/33/20/P-1332073-5C9607BD.png')no-repeat center/cover}
.photo:nth-child(2) {animation-delay: 78s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(3) {animation-delay: 72s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311727-040363C5.png)no-repeat center/cover}
.photo:nth-child(4) {animation-delay: 66s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/17/P-1311728-7F39962B.png)no-repeat center/cover}
.photo:nth-child(5) {animation-delay: 60s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312352-E506D784.png)no-repeat center/cover}
.photo:nth-child(6) {animation-delay: 54s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312353-7B4AD9E1.png)no-repeat center/cover}
.photo:nth-child(7) {animation-delay: 48s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312355-659BD8DC.png)no-repeat center/cover}
.photo:nth-child(8) {animation-delay: 42s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313154-3807C065.png)no-repeat center/cover}
.photo:nth-child(9) {animation-delay: 36s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/14/P-1311459-35C9504D.png)no-repeat center/cover}
.photo:nth-child(10){animation-delay: 30s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313163-D3AC7269.png)no-repeat center/cover}
.photo:nth-child(11){animation-delay: 24s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313165-A3FD1305.png)no-repeat center/cover}
.photo:nth-child(12){animation-delay: 18s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/23/P-1312358-897681D1.png)no-repeat center/cover}
.photo:nth-child(13){animation-delay: 12s;background: url(https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313157-AA2D045C.png)no-repeat center/cover}
.photo:nth-child(14) {animation-delay: 6s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/31/P-1313158-3C9ABEF0.png')no-repeat center/cover}
.photo:nth-child(15) {animation-delay: 0s;background: url('https://img-qn.51miz.com/preview/element/00/01/31/26/P-1312615-B88B9882.png')no-repeat center/cover}
.stop .photo:nth-child(1),
.stop .photo:nth-child(2),
.stop .photo:nth-child(3),
.stop .photo:nth-child(4),
.stop .photo:nth-child(5),
.stop .photo:nth-child(6),
.stop .photo:nth-child(7),
.stop .photo:nth-child(8),
.stop .photo:nth-child(9),
.stop .photo:nth-child(10),
.stop .photo:nth-child(11),
.stop .photo:nth-child(12),
.stop .photo:nth-child(13),
.stop .photo:nth-child(14),
.stop .photo:nth-child(15){animation-play-state: paused;}
</style>
<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
fs = !fs;
};
</script>
亚伦这个播放器可以做专辑，非常棒！ 多曲歌词同步，这种小辣椒先收藏代码，暂时没有时间玩的 谢谢亚伦的精彩分享{:4_187:} 上一个是视频的轮播，这个是图片的轮播。各种形式都做的得心应手，给亚伦老师点赞{:4_199:} 问好亚伦！欣赏学习收藏了！{:4_190:} {:4_208:}{:4_208:}{:4_208:} 好看，好听{:4_199:}
页:
[1]