【夏。碎碎念】把小美好通通珍藏

那年夏天

1.通用版小按钮播放器（全民K歌）

<br><br>
<div align="center" style="position: relative;">
     <script type="text/javascript">
     document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/jquery.js'></sc" + "ript>")
     document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/player.js'></sc" + "ript>")
     document.write("<scr" + "ipt src='http://webftp.bbs.hnol.net/sxrx2016/players/fineplay/player/fineplay.js'></sc" + "ript>")
     </script>
     <link href="http://webftp.bbs.hnol.net/sxrx2016/players/fineplay/player/fineplay.css" rel="stylesheet" type="text/css">
     <div style="margin:0px auto;">
         <div class="fineplays" style="display:block;position:relative;width:100%;max-width:100px;height:auto;margin:0px auto 0px;">
             <ul class="player-audios" style="display:none;">
                 <li data-title="阴天 - 那年夏天">
                     <div class="player-source" data-type="audio/mpeg" data-src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=PfZV0UPimvUF8Pkn">
                     </div>
                 </li>
             </ul>
         </div>
     </div>
</div>
<br><br><br>

2.网易云音乐

<ul class="player-audios" style="display: none;">
                                                    <li data-title="夏日终曲-蓝心羽">
                                                        <div class="player-source" data-type="audio/mpeg" data-src="https://music.163.com/song/media/outer/url?id=2161586969&auto.mp3">
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

3.配音秀

<video controls="" autoplay="" name="media"><source src="https://video7.peiyinxiu.com/download/202406291720a0d47698_175393142.mp4" type="video/mp4"></video>

https://wyc520.com.cn/forum.php?mod=viewthread&tid=415542

4.自制的音乐播放器代码（鱼儿教的）

<style>
        #mydiv { margin: 0px 0  0 100px; width: 120px; height:120px; background:#fff url('https://img.wyc520.com.cn/data/attachment/forum/202406/06/224052v3j2z2rx7njqzq8c.png') no-repeat center/cover; border-radius:8% 8%;box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
        txt-box { position: absolute;margin-left: 85px;  margin-top: 85px;display: grid; place-items: center; top: var(--xx); bottom: 10px; width: 25px; height: 25px; font: normal 16px sans-serif; color:Orchid; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
        txt-box::after { position: absolute; content: '...'; inset: -4px; border: thick outset Mediumpurple; border-radius:50% 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
        txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
        #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px);border-radius:50% 50%; object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }
        #vid2 {position: absolute;margin-top: 0px;width: 100%; height: 100%;  top:0px;border-radius:50% 50%;transform: rotateY(180deg);object-fit: cover; pointer-events: none; mix-blend-mode: screen;z-index: 5;opacity: .59;}
        @keyframes move { to { bottom:0px; } }
        @keyframes rot { to { transform: rotateX(365deg); } }
</style>

<div id="mydiv">
         <audio id="aud" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=mRJD3HmAPWg2DmqS" autoplay loop></audio>
        <img id="vid2" src="https://gd-hbimg.huaban.com/4d3a42272d2760f6deed127346944bd1f12294972a40b6-W51vl4">
                 
</div>

<script>
(function() {
        const ar = '夏'.split('');
        const total = ar.length, half = Math.floor(ar.length / 2), ww =50;
        let tbAr = [];
        ar.forEach((t,k) => {
                let tbox = document.createElement('txt-box');
                tbox.textContent = t;
                tbox.style.cssText += `
                        --xx: ${ww / total * k +1}px;
                        --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
                `;
                tbAr.push(tbox);
                mydiv.appendChild(tbox);
        });
        aud.onplaying = aud.onpause = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
                tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
        };
        tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

4.小播放器
<audio style="width:190px;height:64px;" controls="controls" autoplay="autoplay" loop="loop" src="https://music.163.com/song/media/outer/url?id=1316823248" type="audio/mpeg"></audio>

5.手动播放代码
<br>
<audio style="width: 120px; height: 34px;" src="http://cgi.kg.qq.com/fcgi-bin/fcg_get_play_url?shareid=hQeaoKhFNJvQyhEE" loop="loop" controls="controls" type="audio/mpeg"></audio>
<br>

山人

山人 发表于 2024-6-27 07:20
像是六道木花，好看！

夏天老师好客气啊！

那年夏天

今天一大清早就出门奔波，不太会开车出行确实不方便的。
等明年搬了新家，还是得考虑把开车这技能再拾起来。
下午近两点才吃了午饭，睡了一觉，小可乐时不时来房间瞄我几眼。

最近阴雨天气，不方便出门，小家伙在家跑来跑去的，估计无聊了。
一觉睡到四点多，强迫自己起床，不然晚上又要失眠了，起来录了两首诗。
和家人带可乐来商场游乐园玩，我们小时候都没有游乐园，连那种摇摇车都没怎么坐过。
现在的孩子很幸福，要什么就有什么，认同奶奶的观点，出门不主动给他买零食和玩具。

我被游乐园娃娃机里的小狗公仔吸引住了，嗯，好可爱啊。
花了十块钱抓了五次，每次都是抓住了又被弹回去，都是套路，哼。
没抓得着，只能拍个照片惦记一下吧～

风有约

那年夏天 发表于 2024-6-29 18:26
今天一大清早就出门奔波，不太会开车出行确实不方便的。
等明年搬了新家，还是得考虑把开车这技能再 ...

车子多开开就可以了，熟能生巧吧。我也是胆小鬼，不敢开车，所以也就不去学车了。每天骑个小电驴自我感觉良好的，哈哈。

那年夏天

风有约 发表于 2024-6-29 20:27
车子多开开就可以了，熟能生巧吧。我也是胆小鬼，不敢开车，所以也就不去学车了。每天骑个小电驴自我感觉 ...

平时上下班都是骑小电驴，去市区又是雨天的，就不方便了呢

那年夏天

那年夏天

目光所及皆为华夏，五星闪耀皆为信仰。

生逢盛世，定不负使命，初心不改，砥砺前行。
（默默反思，最近好久没看申论）

那年夏天

@巫山烟云 手抄了烟云的诗歌，呼叫你一声哈，默默在小屋送上祝福～

那年夏天

买的字帖和钢笔收到了，笔开始用着有点不习惯，好久不用钢笔了。
总觉得字写粗了许多，写着、练着就又习惯了，抄了两页，空了继续。
描摹容易，真要学会怎么写，还得花功夫，熟记，多练。
@北晨 默默交个作业哈

那年夏天