加林森 发表于 2022-6-3 17:48

《半纸音书》（纯音乐欣赏）


<style>

.outer { position: relative; width: 760px; height: 520px; cursor: pointer; background: #ccc linear-gradient(rgba(100,26,210,.75),rgba(25,175,100,.65)); }
.mama { position: absolute; left: 20px; top: 20px; width: fit-content; height: fit-content; cursor: pointer; }
.wrap { width: 96px; height: 80px; -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(0,0,0,.15)); display: flex; align-items: flex-end; gap: 4px; }
.wrap span { width: 6px; height: 60px; background-color: rgba(255,0,0,.6); display: block; position: relative; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.mama meter { width: 96px; position: absolute; bottom: -4px;}
@keyframes up { from { top: -3px;} to { top: -16px; } }

</style>

<div class="outer">
      <img src="https://pic.imgdb.cn/item/6299d8170947543129b695f9.jpg">
      <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
      </div>
</div>

<audio id="aud" src="https://www.joy127.com/url/83824.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'), wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud'), meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min, prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 10}).forEach((ele) => {
      ele = document.createElement('span');
      ele.className = 'sskey';
      ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
      wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
      })
      meter.value = prog(aud.duration, aud.currentTime);
})

</script>

加林森 发表于 2022-6-3 17:48

本帖最后由 加林森 于 2022-6-3 17:49 编辑

采桃花染笺，写半纸音书！

落红的渡口，离弦，撑开了如嫣的夜色；我，备好了仗剑天涯的酒，唱一阙蓑衣调，为你践行。涉水的江湖，风，把十二栏杆拍遍。那个，坐于城春一隅的我，折灞桥的烟柳做笔，采南庄的桃花染笺，写成了半纸音书，寄你。

醉美水芙蓉 发表于 2022-6-3 18:41

加林森 发表于 2022-6-3 19:07

醉美水芙蓉 发表于 2022-6-3 18:41
欣赏队长佳作！

谢谢水芙蓉。端午安康！

小辣椒 发表于 2022-6-3 19:15

队长修改了小频谱的宽度尺寸？

小辣椒 发表于 2022-6-3 19:16

队长这个图图和音乐有点诗情画意的{:4_199:}

加林森 发表于 2022-6-3 19:19

小辣椒 发表于 2022-6-3 19:15
队长修改了小频谱的宽度尺寸？

老黑才新出的改版的。{:4_189:}

加林森 发表于 2022-6-3 19:20

小辣椒 发表于 2022-6-3 19:16
队长这个图图和音乐有点诗情画意的

是的啊。

小辣椒 发表于 2022-6-3 19:22

加林森 发表于 2022-6-3 19:19
老黑才新出的改版的。

又有新的版本了啊，我去看看

加林森 发表于 2022-6-3 19:24

小辣椒 发表于 2022-6-3 19:22
又有新的版本了啊，我去看看

嗯嗯

红影 发表于 2022-6-3 19:37

这个真漂亮，队长真棒{:4_187:}

东篱闲人 发表于 2022-6-3 19:45

这是加加妃子？{:5_115:}

加林森 发表于 2022-6-3 20:22

红影 发表于 2022-6-3 19:37
这个真漂亮，队长真棒

送给老兄可好？{:4_189:}

加林森 发表于 2022-6-3 20:22

东篱闲人 发表于 2022-6-3 19:45
这是加加妃子？

送给你的，感觉怎么样？。。。。。{:4_189:}

东篱闲人 发表于 2022-6-3 20:24

加林森 发表于 2022-6-3 20:22
送给你的，感觉怎么样？。。。。。

不要。

加林森 发表于 2022-6-3 20:34

东篱闲人 发表于 2022-6-3 20:24
不要。

有点像杨贵妃的哦。。。。。{:4_189:}

东篱闲人 发表于 2022-6-3 20:36

加林森 发表于 2022-6-3 20:34
有点像杨贵妃的哦。。。。。

你自己留着玩吧。。。{:5_112:}

加林森 发表于 2022-6-3 20:42

东篱闲人 发表于 2022-6-3 20:36
你自己留着玩吧。。。

皇上真的不要？

东篱闲人 发表于 2022-6-3 20:43

加林森 发表于 2022-6-3 20:42
皇上真的不要？

不要，去玩吧。。。

加林森 发表于 2022-6-3 20:51

东篱闲人 发表于 2022-6-3 20:43
不要，去玩吧。。。

皇上既然看不起，本队就把她咔嚓了。来人，把杨贵妃拖出去宰了。。。{:5_165:}
页: [1] 2
查看完整版本: 《半纸音书》（纯音乐欣赏）