论坛 › 欢乐水吧 › audio播放器资源修改

亚伦影音工作室 发表于 2024-2-27 23:37

audio播放器资源修改

本帖最后由 亚伦影音工作室 于 2024-3-9 13:22 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 6%, transparent 6%),url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:0px;margin-left: -300px;}
audio {position:absolute;top:580px;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}

audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
li-zi { position: absolute; background: url('https://pic.imgdb.cn/item/65b75c8f871b83018a83e1c1.png') no-repeat center/cover; offset-path: path('M0 400 Q570 -260 1140 400'); offset-distance: 0; animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { to { offset-distance: 100%; } }
#xuhui{left: 5%;top: 5%;position:absolute;font:normal 3em 华文新魏;color: #ff0000;}


#lrc{left: 10%;top: 70%;}#lrcc {left: 90%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #222222;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);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);}}

</style>
<div id="papa">
<div id="zi" ></div>
<div id="xuhui"></div>
<audioid="aud" loop controls >
<source src="http://chuangshicdn.data.mvbox.cn/music/fc/16/12/19/16121923540963611827.mp3" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
</script>
<span id="lrcStr" style="visibility: hidden;">
太懂事的女人没人心疼 - 陈瑞
作词：陈伟
作曲：陈伟
编曲：孙侠
演唱：陈瑞
☆★Lrc编辑 亚伦★☆
● ● ● ● ● ● ●
你的心事 我从来不敢问
最怕你欲言又止 更愁闷
情愿伤害自己 反复沉沦
也舍不得让你 为难半分
夜半三更 我依然把你等
最怕你半醉半醒 风太冷
看你安然沉睡 思绪翻滚
这情缘如梦 却欲罢不能
太懂事的女人 没人心疼
满腹的委屈 只能默默吞
其实我也有颗脆弱的灵魂
可惜你从来都 不闻不问
满身的伤痕 还要苦苦撑
何尝不想找个怀抱来投奔
偏偏死心塌地 爱你那么深
(Music)
☆★谢谢欣赏★☆
=End=
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let 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)) + averAdd;
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
      let lrcAr = [];
      let arr="";
      let calcRule = ;
      for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                              for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                              }
                        }
                }
      }
      lrcAr.sort((a,b)=> a - b);
      return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
      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);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"));
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

<script>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: all=40}).forEach(star => {
      var size = 20 + Math.floor(Math.random() * 30);
      star = document.createElement('li-zi');
      star.style.cssText += `
            left: 0;
            top: ${Math.random() * 140 + 60}px;
            width: ${size}px;
            height: ${size}px;
            opacity: ${Math.random() * 0.4 + 0.4 };
            animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
      `;
      papa.prepend(star);
    });
</script>

<script>
setInterval("xuhui.innerHTML=new Date().toLocaleString();",1000);
</script>

樵歌 发表于 2024-2-28 08:01

听好歌看美女{:4_173:}

山里人 发表于 2024-2-28 08:27

欣赏佳作

红影 发表于 2024-2-28 12:51

漂亮的制作，直接使用audio播放器资源也很漂亮的呢。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-2-28 12:52

看到歌名，觉得笑，太懂事的女人没人心疼，后面应该是，不懂事的女人要人小命{:4_172:}

流水光阴 发表于 2024-2-28 12:58

欣赏老师漂亮的动画制作

流水光阴 发表于 2024-2-28 12:58

感谢分享佳作

流水光阴 发表于 2024-2-28 12:59

好听好听{:4_178:}

查看完整版本: audio播放器资源修改