论坛 › 动画音画 › 奢香夫人- 凤凰传奇

亚伦影音工作室 发表于 2023-12-28 10:04

奢香夫人- 凤凰传奇

本帖最后由 亚伦影音工作室 于 2024-4-27 23:18 编辑 <br /><br /><style>
#papa {
      margin: 180px-300px;
      width: 1164px;
      height: 620px;
      background:#000000 url('https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg')no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }

#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 50%;
      transform: translate(-50%);
      top: 86%;
      font:normal 3em 华文新魏;
color: #000080;
      
      -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 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
-webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
#canv {display: block; position: absolute;width:100%; height: 200px; bottom: 0px; left: 0px;z-index:1 ; animation: sp 1s linear infinite;}
@keyframes sp {
      0% { filter:hue-rotate(360deg)contrast(150%)brightness(100%); }
}
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:80%;top:13%;font-size: 15px; z-index: 9;}

</style>

<div id="papa">

<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 87%;left: 75%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: windmill;
                @place: 50% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>

<div id="wrapper">
      <div id="pyer">
                <span class="front"></span>
                <span class="bottom"></span>
                <span class="back"></span>
                <span class="top"></span>
      </div>
</div>

<div data-lrc="奢香夫人" id="lrc">奢香夫人</div>
<canvas id='canv' width="1200" height="250"></canvas>
<audio id="aud" src="https://www.nly3355.cn/mp3/NTAxNjQ2Jmt3bXAz.mp3" autoplay loop></audio>
<span id="bt">奢香夫人 - 凤凰传奇</span>
</div>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `奢香夫人 - 凤凰传奇
落脚河上面崖对崖
威宁草海荞花盛开
谁把月亮挂天上
照得想说的话 流成海 流成海
流成海 流成海
越过绵绵的高山
越过无尽的沧海
如果期待依然在
总是春暖到花开
请你轻轻留下来
让梦卷走这尘埃
香飘在书厢之外
奏响美丽的天籁
不等三更过天晓白
奢香夫人赶月归来
她把日光画心上
照得漆黑的夜 亮堂堂 亮堂堂
亮堂堂 亮堂堂
越过绵绵的高山
越过无尽的沧海
如果期待依然在
总是春暖到花开
请你轻轻留下来
让梦卷走这尘埃
香飘在书厢之外
奏响美丽的天籁
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
千山万水永不寂寞
你来过 年华被传说
百里杜鹃不凋落
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
走过千山万水永不寂寞
你来过 年华被传说
百里杜鹃不凋落
怀念总在心头绕
我们记忆的凭吊
善良的心跳
我寻着你的路 让风都停住
依然清晰看见你那坚强的脚步
如果天留得住
如果地也能把你挽住
愿你就在这片云水间常驻
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
千山万水永不寂寞
你来过 年华被传说
百里杜鹃不凋落
乌蒙山连着山外山
月光洒下了响水滩
有没有人能告诉我
可是苍天对你在呼唤
一座山翻过一条河
走过千山万水永不寂寞
你来过 年华被传说
百里杜鹃不凋落
呀 呀咿呀 呀嘿`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 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 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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.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); /*获得歌词数组*/
})();

pyer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => pyer.style.animationPlayState = 'running');
aud.addEventListener('pause', () => pyer.style.animationPlayState = 'paused');
</script>


<style>
#wrapper { position: absolute;left: 50%;
      
      top: 16%;
      margin: 100px 0 0 100px;
      width: 600px;
      height: 500px;
      perspective: 1200px;
}
#pyer {
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      transform: translateZ(-120px) rotateX(0deg);
      animation: rot 6s linear infinite;
}
#pyer > span {
      --bg1: url('https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg')no-repeat -80px/cover;
      --bg2: url(https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg)no-repeat center/cover;
      --bg3: url('https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg') no-repeat 0px/cover;
      --bg4: url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;
      position: absolute;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font: normal 1.8em sans-serif;
}
.front {
      transform: translateZ(100px) rotateX(0deg);
      background: var(--bg1);
}
.top {
      transform: translateY(-100px) rotateX(90deg);
      background: var(--bg2);
}
.back {
      transform: translateZ(-100px) rotateX(180deg);
      background: var(--bg3);
}
.bottom {
      transform: translateY(100px) rotateX(270deg);
      background: var(--bg4);
}
@keyframes rot {
         0% { transform: translateZ(-120px) rotateX(0deg); }
         100% { transform: translateZ(-120px) rotateX(360deg); }
}
</style>

世外桃源 发表于 2023-12-28 11:28

欣赏欣赏

世外桃源 发表于 2023-12-28 11:28

欣赏精美的制作，好听好看

世外桃源 发表于 2023-12-28 11:28

问好楼主，感谢分享

红影 发表于 2023-12-28 12:36

转动图动态和播放器按钮可以同时控制音乐呢，欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2023-12-28 19:54

精彩制作，好看成动听！{:4_178:}

查看完整版本: 奢香夫人- 凤凰传奇