马黑黑 发表于 2024-5-18 18:04

泽典 - 宿命

本帖最后由 马黑黑 于 2024-5-18 18:06 编辑 <br /><br /><style>
        #tiezi { margin: -50px 0 20px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/sumk.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
        #tiezi:hover .vid { opacity: 0.15; }
        #player { position: absolute; bottom: 0; }
        #lrc { position: absolute; top: 15px; }
        .vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: overlay; transition: 2s; pointer-events: none; }
</style>

<div id="tiezi">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2038511379" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/09/5b505b5860f94.mp4" loop muted></video>
        <canvas id="player" width="1000" height="80"></canvas>
        <canvas id="lrc" width="800" height="50"></canvas>
</div>

<script>
        var sF = document.createElement('script');
        sF.charset = 'utf-8';
        sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
        document.body.appendChild(sF);
        var colors = {track: 'snow', prog: 'cyan', lrc1: 'white', lrc2: 'cyan'};
        var lrcAr = [
        ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
</script>

马黑黑 发表于 2024-5-18 18:06

本帖最后由 马黑黑 于 2024-5-18 22:48 编辑

相关说明和帖子代码：
canva线状进度条+lrc歌词显示音频播放控制器文档 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

老谟深虑 发表于 2024-5-18 18:30

          欣赏老师的佳作，点赞！

马黑黑 发表于 2024-5-18 19:34

老谟深虑 发表于 2024-5-18 18:30
欣赏老师的佳作，点赞！

晚上好

南无月 发表于 2024-5-18 19:51

这个是昨天的升级版。。518的JS，加了视频，可以控制。。{:4_187:}

南无月 发表于 2024-5-18 19:52

歌词上方有一个运动的小圆，按时间分配进行移动。逐字高亮提示歌词。。。{:4_187:}

南无月 发表于 2024-5-18 19:53

一天比一天更加完善。。
改歌词，改位置，改色彩，都十分好用。。{:4_199:}

马黑黑 发表于 2024-5-18 19:58

南无月 发表于 2024-5-18 19:53
一天比一天更加完善。。
改歌词，改位置，改色彩，都十分好用。。

今天这个，更新的部分，仅仅是那个lrc歌词同步的小圆圈，其他都没有动

南无月 发表于 2024-5-18 20:04

马黑黑 发表于 2024-5-18 19:58
今天这个，更新的部分，仅仅是那个lrc歌词同步的小圆圈，其他都没有动

有 加视频啊{:4_170:}

南无月 发表于 2024-5-18 20:07

马黑黑 发表于 2024-5-18 19:58
今天这个，更新的部分，仅仅是那个lrc歌词同步的小圆圈，其他都没有动

明白了，视频照今天这样自己加也是可以控制的{:4_173:}

红影 发表于 2024-5-18 20:09

加个园光标来显示歌词同步，这个思路十分灵动。黑黑厉害了，就没有你解决不了的问题{:4_199:}

红影 发表于 2024-5-18 20:12

这有鼠标触碰后的明暗变化，也是被整合到封装里的吧。黑黑的封装很强大{:4_199:}

小辣椒 发表于 2024-5-18 20:38

哇塞，黑黑今天有更新版了{:4_199:}

小辣椒 发表于 2024-5-18 20:40

这个小圆的光感效果用的特别好，歌词效果也是感觉比前面那个好{:4_178:}

小辣椒 发表于 2024-5-18 20:43

这个播放器简洁，漂亮，效果还可以加视频，欣赏黑黑好制作{:4_187:}

马黑黑 发表于 2024-5-18 20:47

小辣椒 发表于 2024-5-18 20:43
这个播放器简洁，漂亮，效果还可以加视频，欣赏黑黑好制作

{:4_191:}

马黑黑 发表于 2024-5-18 20:47

小辣椒 发表于 2024-5-18 20:40
这个小圆的光感效果用的特别好，歌词效果也是感觉比前面那个好

{:4_190:}

马黑黑 发表于 2024-5-18 20:47

小辣椒 发表于 2024-5-18 20:38
哇塞，黑黑今天有更新版了

就更新一点点儿

马黑黑 发表于 2024-5-18 20:48

红影 发表于 2024-5-18 20:12
这有鼠标触碰后的明暗变化，也是被整合到封装里的吧。黑黑的封装很强大

这是帖子CSS效果

马黑黑 发表于 2024-5-18 20:48

红影 发表于 2024-5-18 20:09
加个园光标来显示歌词同步，这个思路十分灵动。黑黑厉害了，就没有你解决不了的问题

这是方法之一。方法应该很多
页: [1] 2 3 4
查看完整版本: 泽典 - 宿命