论坛 › 欢乐水吧 › LOGO音乐按钮控制音画

亚伦影音工作室 发表于 2024-10-13 17:21

LOGO音乐按钮控制音画

本帖最后由 亚伦影音工作室 于 2024-10-13 17:22 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/66fb8419f21886ccc0a628e0.webp)no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#qmsvg{ position: absolute;z-index: 10;
      left: 5%;cursor: pointer;
      top: 5%;
       animation: rot 10s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
.list{list-style: none;left: -50px;top: 130px;width:100%;height:100%;position:absolute;z-index: 4;overflow:hidden;}
.list li{width: 90%;height: 90%;top: 10px;position:relative;line-height: 720px;text-align: center;left: 5%;font: 6004em/1.5em 华文隶书;animation: myfirst 32s linear 1 0s;color:#880000;transition: all .5s;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);opacity:0;overflow:hidden;opacity: 0;}
.stop .list li{animation-play-state: paused;}
@keyframes myfirst {0% {
          opacity: 0;
           transform:perspective(600px) translate(100%,0%)scale(1)rotateX(0deg)rotateY(0deg);
        }
        10% {
          opacity: 1;
          transform: translateX(0px);
        }
50% {
          opacity: 1;
          transform: translateX(0px);
        }
60% { opacity: 1;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}

100% { opacity: 0;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}
}
</style>



<div id="papa">
<div id="testImg" ><div class="list">
<li><p style="zoom:1.2">你来了又走心满了又空</p><br /><p style="zoom: .7">代码编辑 亚伦<br />亚伦影音工作室<br/>演唱:任夏</p></li>
</div></div>
<svgid="qmsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
        </text>
</svg>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2631839994.mp3" autoplay loop>
<script>
qmsvg.onclick = () => aud.paused ? ( aud.play(),image.classList.remove('stop')):(aud.pause(),image.classList.add('stop'));
qmsvg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>qmsvg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>qmsvg.style.animationPlayState = 'paused');
var image= document.getElementById("testImg");
</script>
<span id="lrcStr" style="visibility: hidden;">
你来了又走心满了又空 任夏
亚伦影音工作室出品制作
谁不渴望有人疼
谁不渴望有人宠
我也曾被人捧在掌心之中
可如今只剩孤独相守
谁愿意承受心痛
谁愿意眼泪汹涌
可惜你只陪了我一程
我却要念你一生
你像风来了又走
我的心满了又空
明明我们也曾拥入怀抱之中
可最后只剩一句保重
你像风来了又走
我的梦醒了又空
离开你后的我余生何去何从
再难对谁心之所动
谁不渴望有人疼
谁不渴望有人宠
我也曾被人捧在掌心之中
可如今只剩孤独相守
谁愿意承受心痛
谁愿意眼泪汹涌
可惜你只陪了我一程
我却要念你一生
你像风来了又走
我的心满了又空
明明我们也曾拥入怀抱之中
可最后只剩一句保重
你像风来了又走
我的梦醒了又空
离开你后的我余生何去何从
再难对谁心之所动
你像风来了又走
我的心满了又空
明明我们也曾拥入怀抱之中
可最后只剩一句保重
你像风来了又走
我的梦醒了又空
离开你后的我余生何去何从
再难对谁心之所动
</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"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
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;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

马黑黑 发表于 2024-10-13 17:33

高端大气

小辣椒 发表于 2024-10-13 17:48

亚伦这个文字播放器按钮效果漂亮

红影 发表于 2024-10-13 18:47

这个变色圆环logo小播真好。可移走的标题字设计也很棒。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-10-13 18:48

背景图很符合歌词效果，也正好给小播留出了位置呢{:4_187:}

老谟深虑 发表于 2024-10-14 18:15

          欣赏老师的新作，学习了！

查看完整版本: LOGO音乐按钮控制音画