小辣椒 发表于 2025-9-29 17:07

樵歌翻唱专辑 ① （学习黑黑杂集（多音频模块测试）

<style>
      @import 'https://638183.freep.cn/638183/web/css/tz03.css';
      #pa { --offsetX: 81px; margin: 130px 0 20px calc(50% - 370px); --bg: #ccc url('https://wj.zp68.com/lxx/yunhua/2025/09/28/11.jpg') no-repeat center/cover; }
      #progress { position: absolute; width: 3vw; height: 3vw; bottom: 64%; right: 58%;transition: .4s; }
      #prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
      #prog { stroke: yellow; }
      #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
      #btnFs { left: 47%; bottom: 20px; color: #6d7e71; border-color: currentColor!important; }
      #mList { right: 32%; bottom: 20%; color: yellow; }
      #mList > p:hover { color: orange; }
      .hLight { color: cyan; }
#dt2{ position: absolute; width:280px; height: 61px; top: 18%;left: 48%; }
#dt3{ position: absolute; width: 150px; height: 80px; bottom: 0px; left: 50px; }
       .vid { mixed-blend-mode: screen; opacity: .15}
</style>

   <div id="pa">
         <audio id="aud" src="https://wj.zp68.com/qg01/2025/03/北国之春_未知名.mp3" autoplay loop></audio>

   
      <video class="vid pd-vid" src="https://img.tukuppt.com/video_show/8321488/00/14/00/5e11b34811cf2.mp4" autoplay loop muted></video>
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2025/09/28/bz.png" alt="" />
      <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <defs>
                        <radialGradient id="grd">
                              <stop offset="0%" stop-color="transparent"></stop>
                              <stop offset="50%" stop-color="yellow"></stop>
                              <stop offset="100" stop-color="seagreen"></stop>
                        </radialGradient>
                </defs>
                <g id="g1" class="brightness"><title>ALT+X</title></g>
                <g id="g2"><title>调节进度</title></g>
      </svg>
</div>

<script type="module">
      import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog_mulplayer.js';
      import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

      var dr = Dr.dr(progress);
      dr.path('M0 0 C200 -200,-160 -200,0 0Z').addTo('g1').rotates(5);
      dr.path('M-180 0 L-180 180 L180 180 L180 0').id('track').addTo('g2');
      dr.path('M-180 0 L-180 180 L180 180 L180 0').id('prog').addTo('g2');

      var musics = [
                ['https://wj.zp68.com/qg01/2025/03/我爱你，中国_未知名.m4a', '我爱你中国'],
                ['https://wj.zp68.com/qg01/2025/03/北国之春_未知名.mp3', '北国之春'],
                ['https://wj.zp68.com/qg01/2025/03/花非花_未知名(1).mp3 ', '花非花'],
                ['https://wj.zp68.com/qg01/2025/03/花又落_未知名.m4a', '花又落'],
                ['https://wj.zp68.com/qg01/2025/03/那就是我_未知名(1).mp3', '那就是我 '],
                ['https://wj.zp68.com/qg01/2025/03/蒙古人_未知名(1).mp3', '蒙古人'],
                [' https://wj.zp68.com/qg01/2025/03/苹果香_未知名(2).m4a', '苹果香 '],
                ['https://wj.zp68.com/qg01/2025/03/共产党来了苦变甜_未知名(1).mp3', '共产党来了苦变甜'],
                ['https://wj.zp68.com/qg01/2025/03/蒙古人_未知名(1).mp3', '蒙古人'],
                ['https://wj.zp68.com/qg01/2025/03/骏马奔驰保边疆_未知名(1).mp3', '骏马奔驰保边疆'],
                ['https://wj.zp68.com/qg01/2025/04/心愿_未知名.m4a', '心愿 '],
                ['https://wj.zp68.com/qg01/2025/04/山楂树_未知名(1).mp3', '山楂树'],
                ['https://wj.zp68.com/qg01/2025/04/雁南飞_未知名.mp3', '雁南飞'],
                [' https://wj.zp68.com/qg01/2025/04/三套车_未知名.mp3', '三套车 '],
                ['https://wj.zp68.com/qg01/2025/07/11/01.mp3 ', '今夜的草原有雨'],            
      ];

      FS(pa, g1, musics);
</script>

小辣椒 发表于 2025-9-29 17:11

鼠标滑过界面歌曲列表出来，音乐是随机的

小辣椒 发表于 2025-9-29 17:08

@马黑黑

黑黑直接套用玩一个，感觉音乐列表停留画面时间还可以长一点

感谢黑黑源码分享



小辣椒 发表于 2025-9-29 17:10

樵哥哥，先做一个专辑--1 上去了15首翻唱。后面有时间继续最专辑 -- 2@樵歌

梦江南 发表于 2025-9-29 17:49

小辣椒 发表于 2025-9-29 17:10
樵哥哥，先做一个专辑--1 上去了15首翻唱。后面有时间继续最专辑 -- 2@樵歌

哇，樵歌老师唱了这么多首的歌曲，都没有听过呢。

梦江南 发表于 2025-9-29 17:49

小辣椒编辑辛苦了！{:4_187:}

梦江南 发表于 2025-9-29 17:51

收藏了。{:4_208:}

马黑黑 发表于 2025-9-29 18:14

小辣椒 发表于 2025-9-29 17:08
@马黑黑

黑黑直接套用玩一个，感觉音乐列表停留画面时间还可以长一点


那个，鼠标在帖子上面移动就出来，所以没必要给它另设一个停留时间，和全屏按钮同步就可以

马黑黑 发表于 2025-9-29 18:16

感谢 @樵歌 封神的演唱！

感谢 @小辣椒 精美的制作！

樵歌 发表于 2025-9-29 18:29

小辣椒 发表于 2025-9-29 17:11
鼠标滑过界面歌曲列表出来，音乐是随机的

辛苦啦，又不知道费了你好多时间和精力呵，幸好大师@马黑黑 才创作了个特别好用的代码文件，减轻了你的劳动强度哈{:4_190:}{:4_176:}

樵歌 发表于 2025-9-29 18:31

小辣椒 发表于 2025-9-29 17:10
樵哥哥，先做一个专辑--1 上去了15首翻唱。后面有时间继续最专辑 -- 2@樵歌

来了来了，下午出门有事了，辛苦了，但是，有好些歌是未知名唱的呀，是不是搞混了呵{:4_358:}万一他找上门来我可抵挡不住。

樵歌 发表于 2025-9-29 18:32

马黑黑 发表于 2025-9-29 18:16
感谢 @樵歌 封神的演唱！

感谢 @小辣椒 精美的制作！

感谢大师@马墨黑 {:4_176:}
感谢大师@小辣椒 {:4_204:}

偶然~ 发表于 2025-9-29 19:00

制作大气

偶然~ 发表于 2025-9-29 19:00

首首精彩

偶然~ 发表于 2025-9-29 19:01

感谢樵歌精彩的演绎，辛苦了。

偶然~ 发表于 2025-9-29 19:02

感谢小辣椒的精彩制作，辛苦了。

马黑黑 发表于 2025-9-29 19:10

樵歌 发表于 2025-9-29 18:32
感谢大师@马墨黑
感谢大师@小辣椒

{:4_172:}

马黑黑 发表于 2025-9-29 19:11

樵歌 发表于 2025-9-29 18:29
辛苦啦，又不知道费了你好多时间和精力呵，幸好大师@马黑黑 才创作了个特别好用的代码文件，减轻了你的劳 ...

{:4_191:}

樵歌 发表于 2025-9-29 19:37

马黑黑 发表于 2025-9-29 19:10


感谢花潮有您{:4_176:}

樵歌 发表于 2025-9-29 19:37

马黑黑 发表于 2025-9-29 19:11


换个色色滴{:4_176:}
页: [1] 2 3
查看完整版本: 樵歌翻唱专辑 ① （学习黑黑杂集（多音频模块测试）