论坛 › 动画音画 › 用外链MP3，谢谢辣椒老师

有声有色 发表于 2023-4-9 12:52

用外链MP3，谢谢辣椒老师

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1874036">

<style>
#papa { margin: 150px -410px; width: 1400px; height:711px; background: lightblue url('https://pic.imgdb.cn/item/643230260d2dde5777d39a86.gif') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 75%; top:500px; transform: translate(-50%); height: 50px; font: bold 40px/50px sans-serif; background: transparent; color: gray; display: grid; place-items: center start; pointer-events: none;--motion: cover2; --state: running; --tt: 1s; }
#lrc::before, #lrc::after { position: absolute; content: ''; }
#lrc::before { content: attr(data-lrc); width: 0%; height: 100%; color: green; white-space: pre; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }
#lrc::after { width: 50px; height: 50px; left: -100px; border-radius: 50%; background: url('https://xlaj.cn/assets/file/zp/20230408162600.png') center/cover no-repeat; cursor: pointer; pointer-events: auto; animation: rot 4s infinite linear var(--state); }
#svg { position: absolute; font: bold 6em sans-serif; }
.text { fill: none; stroke-width: 3; stroke-dasharray: 0 300; stroke-dashoffset: 0; }
.text:nth-child(3n + 1) { stroke: Gray; animation: stroke1 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 2) { stroke:         orange; animation: stroke2 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 3) { stroke: Teal; animation: stroke3 30s ease-in-out infinite alternate; }
.text:hover { fill: teal; opacity: .45; }

@keyframes stroke1 { to { stroke-dashoffset: 1000; stroke-dasharray: 80 160; } }
@keyframes stroke2 { to { stroke-dashoffset: 1080; stroke-dasharray: 80 160; } }
@keyframes stroke3 { to { stroke-dashoffset: 1160; stroke-dasharray: 80 160; } }
@keyframes cover1 { to { width: 100%; } }
@keyframes cover2 { to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
#dt1{ position: absolute; width:600px; height: 600px; top:200px;; left:780px; }

</style>

<div id="papa">
        <svg id="svg" width="1400" height="280">
                <symbol id="s-text"><text text-anchor="middle" x="70%" y="75%" dy=".25em">临海之行</text></symbol>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>

<img id="dt1" src="https://pic.imgdb.cn/item/6330057516f2c2beb14a5809.gif" alt="" />


      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/103569.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr = [
               ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
lrc.onclick = () => aud.paused ? aud.play() :aud.pause();
</script></td></tr></table>

梦缘 发表于 2023-4-9 16:34

漂亮的播放器，欣赏问好！{:4_204:}

马黑黑 发表于 2023-4-9 16:55

欣赏美帖

有声有色 发表于 2023-4-9 17:08

梦缘 发表于 2023-4-9 16:34
漂亮的播放器，欣赏问好！

谢谢支持

有声有色 发表于 2023-4-9 17:11

马黑黑 发表于 2023-4-9 16:55
欣赏美帖

歌词没做好，第一次用本地MP3音乐做外链MP3，看来还需努力

马黑黑 发表于 2023-4-9 17:18

有声有色 发表于 2023-4-9 17:11
歌词没做好，第一次用本地MP3音乐做外链MP3，看来还需努力

慢慢探索

红影 发表于 2023-4-9 18:38

漂亮的蚂蚁字，漂亮的播放器。欣赏有声有色漂亮的制作{:4_187:}

樵歌 发表于 2023-4-9 18:58

欣赏美贴。

小辣椒 发表于 2023-4-9 19:48

问好有声有色，用上了127的音乐了，那天焱鑫磊的链接出来不够流畅我去问了一下，对方告诉我最近有个人一下子上传300多首歌曲，,服务器卡死了 就7首 5天播放量34万次，那种专业的网站有免费就拼命上传了，现在听说有控制了，你们这种难得上传一首应该没有问题的，同时告诉一下焱鑫磊@焱鑫磊

小辣椒 发表于 2023-4-9 19:52

不用客气，喜欢玩我的什么代码尽管玩，自己也是可以调整一下位置和修改一下颜色。

焱鑫磊 发表于 2023-4-10 00:47

小辣椒 发表于 2023-4-9 19:48
问好有声有色，用上了127的音乐了，那天焱鑫磊的链接出来不够流畅我去问了一下，对方告诉我最近有个人一下 ...

谢谢小辣椒告知！{:4_187:}

有声有色 发表于 2023-4-10 09:07

红影 发表于 2023-4-9 18:38
漂亮的蚂蚁字，漂亮的播放器。欣赏有声有色漂亮的制作

这都是你们做的音画代码，我是照葫芦画瓢

有声有色 发表于 2023-4-10 09:08

樵歌 发表于 2023-4-9 18:58
欣赏美贴。

谢谢一直鼓励支持

有声有色 发表于 2023-4-10 09:17

小辣椒 发表于 2023-4-9 19:48
问好有声有色，用上了127的音乐了，那天焱鑫磊的链接出来不够流畅我去问了一下，对方告诉我最近有个人一下 ...

首先谢谢你给的网址，这是我一位快50年没见的兵团战友，过几天我们去临海聚会，因是本地音乐无法外链，本想放弃了想不到辣椒老师这是雪里送炭，谢谢了。但是还没做好我会在修改。

有声有色 发表于 2023-4-10 09:19

小辣椒 发表于 2023-4-9 19:52
不用客气，喜欢玩我的什么代码尽管玩，自己也是可以调整一下位置和修改一下颜色。

谢谢辣椒老师慷慨。

红影 发表于 2023-4-10 21:53

有声有色 发表于 2023-4-10 09:07
这都是你们做的音画代码，我是照葫芦画瓢

哈哈，我也是照猫画虎呢{:4_173:}

查看完整版本: 用外链MP3，谢谢辣椒老师