mp3测试
本帖最后由 翁奕童苑 于 2025-1-11 22:33 编辑 <br /><br /><p></p><style>
#bj{position: relative;width: 1186px;height: 620px;MARGIN-LEFT:-300px;margin-top:150px;;overflow:hidden;background:url(https://www.oldkids.cn/upload/2024/09/01/blog_260806313_20240901204156049.jpg)no-repeat center / cover;}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 85%;font:100 3.2em 华文隶书;color:#000080;white-space:pre;-webkit-background-clip:text; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#btnplay { width: 60px; height: 60px; cursor: pointer;LEFT:2%;top:88%; animation: rotating 6s infinite linear ;position:absolute;background:url(https://pic1.imgdb.cn/item/65141b72c458853aef4cff4a.png)no-repeat center / cover; }
@keyframes rotating { to { transform: rotate(360deg); } }
#fullscreen { opacity:1;position: absolute; width: 40px; height: 40px; top:88%; cursor: pointer;right: 2%;z-index: 40;}
#bj:hover #fullscreen { opacity:1;}
#全屏{ width: 40px; height: 40px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 40px; height: 40px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="bj">
<div id="btnplay" title="播放/暂停"></div>
<audio id="aud" src="https://www.oldkids.cn/upload/2025/01/11/blog_260806313_20250111221644177.mp3" loop autoplay></audio>
<div id="geci">情花毒 - 乔玲儿</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>
<script>
let lrc = `情花毒 - 乔玲儿
词：倪金茂
曲：乔玲儿
混音：卢晓武
发行：环斯文化传媒
你莲花一吐
我心被俘虏
你像彩云漂浮
我一如既往
痴恋如故
是幸福还是痛苦
你支支吾吾
态度似迷雾
春秋几度
你音信全无
可我义无反顾
执迷不悟
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
你支支吾吾
态度似迷雾
春秋几度
你音信全无
可我义无反顾
执迷不悟
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
就是我今生最大幸福
`;
aud.addEventListener("seeked", myFunction)
aud.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function lrcTime (ar) {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
btnplay.onclick = () => aud.paused ? (aud.play(),btnplay.style.animationPlayState = 'running') :( aud.pause(),btnplay.style.animationPlayState = 'paused');
let fs= true;
fullscreen.onclick = () => {
fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
</script> 这个是亚伦代码套用吧，一样的音乐，一样的播放器 漂亮，欣赏翁奕童苑好帖{:4_187:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 欣赏老师音画佳作。问老师，这歌曲MP3是从哪里上传的？ 小辣椒 发表于 2025-1-11 22:48
这个是亚伦代码套用吧，一样的音乐，一样的播放器
是的。经亚伦老师同意使用此播放器测试mp3及图片。 老小孩的mp3和图片可以外链了，请大家关注！ 亚伦影音工作室 发表于 2025-1-12 14:44
老小孩的mp3和图片可以外链了，请大家关注！
亚伦老师是否可以给个网址 有声有色 发表于 2025-1-12 14:52
亚伦老师是否可以给个网址
https://www.oldkids.cn 亚伦影音工作室 发表于 2025-1-12 14:44
老小孩的mp3和图片可以外链了，请大家关注！
好消息，谢谢亚伦老师{:4_191:} 翁奕童苑 发表于 2025-1-12 09:35
是的。经亚伦老师同意使用此播放器测试mp3及图片。
没事，亚伦老师的代码特别多，欢迎一起开心玩{:4_173:} 亚伦影音工作室 发表于 2025-1-12 16:26
https://www.oldkids.cn
谢谢
页:
[1]