文本歌词播放器
本帖最后由 亚伦影音工作室 于 2024-7-4 21:21 编辑 <br /><br /><style>#tz { left: 50%; transform: translateX(calc(-50% - 81px)); background:url('')no-repeat center/cover;width: 1200px; height: 700px; overflow: hidden; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#bjbs{animation: rotating 1s linear infinite;width: 1200px; height:700px;position:absolute;z-index: 1;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#player { position: absolute; width: 100px; left: 920px; bottom: 70px; cursor: pointer; animation: rot 6s linear infinite; opacity: 1; z-index: 5;}
@keyframes rot { to { transform: rotate(1turn); } }
#txtbox { position: absolute; left:10%;top: 80px; width: 1000px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-lr; letter-spacing: 5px;z-index: 6;}
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 24px/45px sans-serif; color: #fff; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
.tMid, .tRight { display: inline-block; width: 100%; }
.tMid { text-align: center; }
.tRight { text-align: right; font-size: 18px; }
@keyframes move { 100% { transform: translate(0); } }
</style>
<div id="tz">
<div id="bjbs"><img id="Img" src="https://pic.imgdb.cn/item/6684a788d9c307b7e94005b4.gif" alt="" /></div>
<audio id="aud" src="https://songs.boonkiong.com/2407038340.mp3" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png" />
<div id="txtbox"></div>
</div>
<script type="text/javascript">
bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
var image= document.getElementById("Img");
</script>
<script>
var txtAr = [
`<span class="tMid"></span>
歌曲《年少的狂想 》
星星在天空沉默不语 指引着那方向
月亮会洒下皎洁余辉 投来温馨目光
蝴蝶在扇动翅膀 热烈为你鼓掌
瞳孔投射出 五彩斑斓的光芒
我要登上那山川之巅
呼吸自由的芬芳
我要踏过那深谷与沟壑
触摸年少的狂想
我要飞过那低洼沼泽
拥抱风儿的翅膀
我要爬上那 黑暗的深渊
沐浴胜利的阳光
我要登上那山川之巅
呼吸自由的芬芳
我要踏过那深谷与沟壑
触摸年少的狂想
我要飞过那低洼沼泽
拥抱风儿的翅膀
我要爬上那 黑暗的深渊
沐浴胜利的阳光
`,
`<span class="tMid"></span>星星在天空沉默不语 指引着那方向
月亮会洒下皎洁余辉 投来温馨目光
蝴蝶在扇动翅膀 热烈为你鼓掌
瞳孔投射出 五彩斑斓的光芒
我要登上那山川之巅
呼吸自由的芬芳
我要踏过那深谷与沟壑
触摸年少的狂想
我要飞过那低洼沼泽
拥抱风儿的翅膀
我要爬上那 黑暗的深渊
沐浴胜利的阳光
我要登上那山川之巅
呼吸自由的芬芳
我要踏过那深谷与沟壑
触摸年少的狂想
我要飞过那低洼沼泽
拥抱风儿的翅膀
我要爬上那 黑暗的深渊
沐浴胜利的阳光
<span class="tRight"></span>`
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;
var addPs = () => {
var txtstr = txtAr;
txtbox.innerHTML = '';
paras.length = 0;
var ar = txtstr.split(/\n/).filter(item => item !=='');
ar.forEach((p,k) => {
var para = document.createElement('p');
para.innerHTML = p;
para.style.cssText += `transform: translate(${ww}px);`;
txtbox.appendChild(para);
paras.push(para);
});
curIdx = (curIdx + 1) % txtAr.length;
mkAni();
};
var parasReset = () => {
addPs();
paras.forEach(p => {
p.style.animationName = '';
p.style.transform = 'translate(${ww}px)';
setTimeout( () => { paras.style.animationName = 'move'; }, 500);
});
};
var mkAni = () => {
paras.forEach((p,k) => {
p.onanimationend = () => {
paras[(k+1) % paras.length].style.animationName = 'move';
if(k === paras.length - 1) setTimeout( () => parasReset(), 50000);
};
});
};
var mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? (aud.play(),image.play()) : (aud.pause(),image.stop());
addPs();
paras.style.animationName = 'move';
</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;
}
}
};
}
</script> 欣赏佳作，问候亚伦。 我貌似听不到音乐，所以按钮点上去也很奇怪，点击则可以暂停，再点击动态还在，但是不转了{:4_204:} 估计是忽然断链了，等过后再来看看。
欣赏亚伦老师好帖{:4_187:}
页:
[1]