朵拉 发表于 2023-5-27 23:15

云裳羽衣曲（马黑黑原创）

本帖最后由 朵拉 于 2023-10-9 21:17 编辑 <br /><br /><style>
#papa {margin: 0 0 0 calc(50% - 531px);width: 900px;height: 559px;background: tan url('https://pic1.imgdb.cn/item/647232e7f024cca17399dbea.webp');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
css-doodle{position: absolute;}
</style>

<div id="papa">
      <css-doodle id="mplayer">
                :doodle {
                        @grid: 2 / 300px 60px;
                        color: var(--color);
                        bottom: 0;
                        z-index: 100;
                        --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightpink;
                }
                /* 时间信息 : 左 */
                @nth(1) {
                        @place: 25% 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: 75% 80%;
                        :after { content: var(--ttmsg2); }
                }
                /* 进度条 */
                @nth(4) {
                        @place: 50% 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>
      <css-doodle id="lrc">
                :doodle {
                        @size: auto 4em;
                        top: 10px;
                        --geci: "朵拉制作"; --motion: cover2; --tt: 1s;
                }
                /* 单元格两个伪元素显示lrc歌词 */
                display: grid;
                place-items: center start;
                :before, :after {
                        content: var(--geci);
                        color: gray; /* 歌词底色 */
                        font: bold 2em sans-serif;
                        text-shadow: 1px 1px 2px #000;
                        white-space: pre;
               }
                :after {
                        position: absolute;
                        width: 0;
                        color: lightpink; /* 同步歌词颜色 */
                        overflow: hidden;
                        animation: var(--motion) var(--tt) linear forwards var(--state);
                }
                @keyframes cover1 { from { width: 0; } to { width: 100%; } }
                @keyframes cover2 { from { width: 0; } to { width: 100%; } }
      </css-doodle>
      <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/05/19/7b6c8a2618a0a2e92892f64122d69cc8.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let script = document.createElement('script');
      script.src = '/css-doodle.min.js';
      document.head.appendChild(script);
      let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let lrcAr = [
      ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,];
      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 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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', () => calcKey());
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}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>

朵拉 发表于 2023-5-27 23:55

@马黑黑
马师 晚上好，学生交作业，歌词有一丢丢不同步{:4_201:}

马黑黑 发表于 2023-5-27 23:59

朵拉 发表于 2023-5-27 23:55
@马黑黑
马师 晚上好，学生交作业，歌词有一丢丢不同步

歌词同步是个细活

红影 发表于 2023-5-28 10:02

欣赏朵宝漂亮帖子。貌似歌词有点暗。{:4_204:}

朵拉 发表于 2023-5-28 13:32

马黑黑 发表于 2023-5-27 23:59
歌词同步是个细活

马师好，学生稍稍调整了一下同步歌词，
播放器和同步歌词颜色 也稍稍改变了下，
请您再次指正~~{:4_190:}

朵拉 发表于 2023-5-28 13:35

红影 发表于 2023-5-28 10:02
欣赏朵宝漂亮帖子。貌似歌词有点暗。

影宝 周末好，这会播放器和歌词颜色稍稍调整了一下，
你再看一看 么么哒{:4_204:}

马黑黑 发表于 2023-5-28 17:35

朵拉 发表于 2023-5-28 13:32
马师好，学生稍稍调整了一下同步歌词，
播放器和同步歌词颜色 也稍稍改变了下，
请您再次指正~~{:4_190 ...

非常好

梦缘 发表于 2023-5-28 17:55

很好听，感谢你的分享！{:4_187:}

红影 发表于 2023-5-28 19:00

朵拉 发表于 2023-5-28 13:35
影宝 周末好，这会播放器和歌词颜色稍稍调整了一下，
你再看一看 么么哒

嗯嗯，现在的颜色好，清楚多了{:4_187:}
页: [1]
查看完整版本: 云裳羽衣曲（马黑黑原创）