杨帆 发表于 2025-11-26 13:10

玛雅(自选音乐专辑)

本帖最后由 杨帆 于 2025-11-26 22:11 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>《玛雅》(自选音乐专辑)</title>
<meta name="referrer" content="never">
</head>
<body>
<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.v3.css';
        .pa { left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);height:auto;aspect-ratio:16/9; --bg: url('https://s3.bmp.ovh/imgs/2025/11/24/424f0e6cf807a14d.jpg') no-repeat center/cover; }
        .lrc::before { background: url('https://pic.imgdb.cn/item/66c6fc65d9c307b7e9b5b5ab.gif'); background-clip: text; }
    .lrc { font: bold clamp(1.2rem, 4vw, 2.6rem) \534E\6587\65B0\9B4F; }      
   li-zi { position: absolute; left: 270px; top: 120px; width: 60px; height: 60px; opacity: .3; background: url('https://638183.freep.cn/638183/small/hdxk.png') no-repeat center/cover; mix-blend-mode: screen; }
    @keyframes moving { from { opacity: .3; transform: translate(0,0) rotate(0); } to { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(3turn); } }
</style>
<div id="pa" class="pa"></div>
<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js';
        import lrc2HC from 'https://638183.freep.cn/638183/web/tz/lrc2hc.js';
        const dida = [,,,,,,,,,,,,,,,,,,,,,,,,];
        const ys1 = ` 有山有海有你\n我在苍山的夜 穿过了雾里\n有风擦肩而去\n湖上月色横斜 星光漫天遍野\n有歌有酒也有你\n我说这次离别 也许会铭记\n远方曾在这里\n长路如你所约 故事如我所携\n有山有海也有你\n不知多年以后可会再相遇\n不知偶尔你是否想起\n所有散落在那里的回忆\n曾经 有我 有你\n我在熟悉的街 光影正游离\n有梦掠过故地\n人潮悄悄退却 昔日渐渐重叠\n有歌有酒也有你\n我愿时光停歇 也许能汇聚\n远方那些足迹\n再见如你所约 珍重如我所写\n有山有海也有你\n不知漫长岁月你会在哪里\n不知故地是否仍如昔\n所有时光都定格在那里\n曾经 有我 有你\n不知多年以后可会再相遇\n不知偶尔你是否想起\n所有散落在那里的回忆\n曾经 有我 有你\n我在苍山的夜 穿过了雾里\n有风擦肩而去\n湖上月色横斜 星光漫天遍野\n有歌有酒也有你\n曾经 有我 有你\n永远 有我 有你`;
        const ys2 = `我为岁月斟满一杯酒-影子
词:徐晓岚 曲:李勇军
编曲:姜凯升
和声:雪无影
心中装满了生活的忧愁
手中捧着一壶浓烈的酒
人生不过几十个春秋
可脚下的路来去不自由
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走
转眼之间已经白了头
要想的改变也成了奢求
香烟一灭该愁的还是愁
如果情淡了要走该怎么留
我为岁月斟满一杯酒
岁月赐我心酸和泪流
现实中难有一生无忧
命运捉弄谁又能左右
我为岁月斟满一杯酒
岁月赐给我一身的伤口
杯中装满了痛苦和忧愁
酒醒之后继续往前走
哦继续往前走
`;       
        const ys3 = `
月亮女儿
演唱:张燕
词:浮克
曲:浮克
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
啊唉啊唉啊唉
清凉凉的水啊
流过我的家
那水中的鱼儿你说一说话吧
说一说这季节是怎样变化
说一说这母亲是怎样牵挂
说一说这女儿是怎样
一天天长大
唉呀依唉呀依唉依唉唉
唉呀依唉依唉依唉
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦 就可以梦 到她
天上的月儿照着我的家
那月中的人儿请望一望吧
望一望这思念的尽头是什么
望一望这愿望我何时到达
望一望这梦 想有多远
天空究竟有多大
唉呀依唉呀依唉依唉唉
唉呀依唉依唉依唉
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦 就可以梦 到她
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦 就可以梦 到她
我走过一个春
再经过一个夏
我的爱行走在夕阳底下
踩过一个秋
再亲过一季雪花
做一个梦 就可以梦 到她
`;       
        const ys4 = `春暖花开
演唱:周艳泓
啊啊啊啊啊
啊啊啊啊啊
春季准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
春季准时地到来
你的心窗打没打开
对着蓝天许个心愿
阳光就会走进来
花儿竞相地绽开
你别总是站着发呆
快让自己再美丽一些
让世界因你更可爱
有冷就有暖
冬天是否让你好烦
黎明醒来请揉揉你的眼
你会发现天那么蓝
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
桃花也红了
心情也好了
冰封的情感
请解除冬眠
风也变暖了
云也变淡了
往事已飞了
飞过那忘川
`;
        const ys5 = `[总有美好在路上\n 作词 : 曹二娜\n 作曲 : 赵家锐\n演唱:周深\n亲爱的\n此刻正是天亮\n快推开窗\n看外面多晴朗\n雨去了\n需要雨的地方\n留给我们\n最灿烂的阳光\n我们在\n用自己的力量\n让美好像\n大树挺拔生长\n花在开云在飘\n笑容在脸上\n我们向前方\n一路向阳\n亲爱的你\n在路上慢慢逛\n看一看太阳\n让风轻轻\n吹拂你的脸庞\n今天过去\n要到明天看看\n天气会怎样\n阴或晴朗\n谢谢黑黑的代码\n得知黑黑有事要忙\n赶紧做个帖子\n祝福一切顺利安康\n好好的\n享受每段时光\n爱与希望\n在生活里回响\n夏蝉飞冬雪落\n都是好风光\n治愈我们的\n寒来暑往\n亲爱的你\n在路上慢慢逛\n看一看太阳\n让风轻轻\n吹拂你的脸庞\n今天过去\n要到明天看看\n天气会怎样\n阴或晴朗\n故事都慢慢赏\n亲爱的你\n送走晚风斜阳\n等一等月亮\n美好的事\n在赶来的路上\n世界是颗\n最缤纷的糖\n甜了每个日常\n细细品尝\n就会品出希望\n抬头发现\n光一直在身上\n]`;       
        const ys6 = `[
远情 - 谭晶
作词:易茗
作曲:赵季平
尘缘苦短叹人间路长
不能够容我细思量
繁华瞬间如梦幻一场
世上人有几番空忙
春去秋来叹世事沧桑
算人生成败相当
登临远望看山水迷茫
情通天下一路奔放
几番起落雨暴风狂
转眼间鬓已成霜
留住所爱 留住所想
留住一梦相伴日月长
几番起落雨暴风狂
转眼间鬓已成霜
留住所爱 留住所想
留住一梦相伴日月长
留住所爱 留住所想
留住一梦相伴日月长
`;
        const ys7 = `[
云水禅心\n云水禅心
`;
    const ys8 = `[
雪中莲\n雪中莲
`;
   const ys9= `[
故乡的原风景\n故乡的原风景
`;
   const ys10 = `[
春江花月夜\n春江花月夜
`;
   const ys11 = `[
玛雅\n玛雅
`;
        const offsetData = ;
        const gcAr = .map((ys, key) => lrc2HC(ys, offsetData));
        const musicAr = [       
          ['https://music.163.com/song/media/outer/url?id=32685948', '嘀嗒', dida],       
                ['https://music.163.com/song/media/outer/url?id=2744405051', '有山有海有你', gcAr],       
                ['https://file.uhsea.com/2408/82d1f5d5f0a429963d9856c166c3e118EL.mp3', '我为岁月斟满一杯酒', gcAr],
                ['https://upfile.mp3.wf/view.php/2c590d372601e620f38f9ad188a63cd5.mp3', '月亮女儿', gcAr],
                ['https://upfile.mp3.wf/view.php/88b9315f7889d87a36c3a8c1c348ffea.mp3', '春暖花开', gcAr],
                ['https://music.163.com/song/media/outer/url?id=2661293714', '总有美好在路上', gcAr],
                ['https://upfile.mp3.wf/view.php/1342953926d014b6596b26f9cef90fba.mp3', '远情',gcAr],
                ['https://upfile.mp3.wf/view.php/c1982d752202340f0d65dede0576eec0.mp3', '云水禅心',gcAr],
                ['https://upfile.mp3.wf/view.php/1c8a424cce3f02601bc870b91cceecd0.mp3', '雪中莲',gcAr],
                ['https://upfile.mp3.wf/view.php/c49f56976dcae5f8b6f0c677376261fc.mp3', '故乡的原风景',gcAr],
                ['https://upfile.mp3.wf/view.php/509e70aa32b3a2c8854a6c4487544560.mp3', '春江花月夜',gcAr],
                ['https://upfile.mp3.wf/view.php/61ba1740cb993dd77b6d5fb6b8c48c9b.mp3', '玛雅',gcAr],
        ];
        const tz = TZ.TZ('pa');       
        tz.add('video', '', 'pd-vid', {
                src:
                'https://vd4.bdstatic.com/mda-rkpd1te18x6yw10e/sc/cae_h264/1763975632099583854/mda-rkpd1te18x6yw10e.mp4',
                style: 'width: 100vw; height: 110vw; left: 0px; top: 0%;preload:"auto";playsinline'});
        tz.mlist(musicAr, true, 'bottom: 60px; --border : 0;').style('left: 20px; bottom: 20px');
        tz.add('img', '', 'ma', { src: 'https://pic.imgdb.cn/item/67205f9dd29ded1a8cdba766.png' })
          .style('bottom: 120px; clip-path: circle(45%)')
          .playmp3();
        tz.bgprog().style('bottom: 20px;height: 3px;transition: transform .5s;cursor: pointer;color: #fff');
        tz.fs().style('right: 20px; bottom: 20px');
(function() {
    let all = 30;
    for(let i = 0; i < all; i++) {
      let lz = document.createElement('li-zi');
      let hudu = Math.PI / 180 * 360 / all * i;
      let xx = 1280 * Math.cos(hudu), yy = 850 * Math.sin(hudu);
      lz.style.cssText += `
            --x0: ${xx}px;
            --y0: ${yy}px;
            filter: hue-rotate(${Math.floor(Math.random() * 360)}deg);
            animation: moving ${Math.random() * 20 + 20}s ${1 - Math.random() * 20}s infinite var(--state);
      `;
      pa.prepend(lz);
    }
    let mState = () => aud.paused ? pa.style.setProperty('--state','paused') : pa.style.setProperty('--state','running');
    aud.addEventListener('playing',mState,false);
    aud.addEventListener('pause',mState,false);
    ma.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
</body>
</html>

小文 发表于 2025-11-26 14:13

赞先点起来!{:4_187:}

梦江南 发表于 2025-11-26 15:30

哇,这帖也只有杨帆能做出来。有歌词与音乐随意点听,太厉害了!这要化多少时间啊!{:4_187:}

梦江南 发表于 2025-11-26 15:32

红枫做小播挺好看的,背景图也赞。佩服!{:4_199:}

杨帆 发表于 2025-11-26 15:55

小文 发表于 2025-11-26 14:13
赞先点起来!

谢谢小文版主鼓励,祝开心{:4_191:}

杨帆 发表于 2025-11-26 16:02

梦江南 发表于 2025-11-26 15:30
哇,这帖也只有杨帆能做出来。有歌词与音乐随意点听,太厉害了!这要化多少时间啊!

问好江南,谢谢鼓励~

做专辑用素材、用时相对要多点

但用马老师提供的模版就简便多了

不妨玩一玩呦{:4_204:}

红影 发表于 2025-11-26 19:22

这么多好歌好曲子,这个制作很赞。那个群山的前景很好,对小播很有衬托效果。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-11-26 19:23

可以在列表里直接选择歌曲,也可以任它随机播放。
这个里面的是随机的么,这个之前还不知道呢{:4_173:}

红影 发表于 2025-11-26 19:25

欣赏杨帆精彩制作,这个太赞了{:4_199:}

朵拉 发表于 2025-11-26 20:19

杨帆老师的制作精美,向您学习{:4_204:}

樵歌 发表于 2025-11-26 20:40

音、画、境、意都非常和谐在!

杨帆 发表于 2025-11-26 20:41

红影 发表于 2025-11-26 19:23
可以在列表里直接选择歌曲,也可以任它随机播放。
这个里面的是随机的么,这个之前还不知道呢

是的,可选择播放,也可随机播放,是马老师封装时预设好的呦

该贴还用到你的帖子里的诸多元素,在此特向马老师以及你表示感谢~{:4_176:}



杨帆 发表于 2025-11-26 20:43

朵拉 发表于 2025-11-26 20:19
杨帆老师的制作精美,向您学习

问好朵拉,我们都一样在跟马老师学习呀,很欣赏你的许多作品,加油{:4_204:}

杨帆 发表于 2025-11-26 21:11

樵歌 发表于 2025-11-26 20:40
音、画、境、意都非常和谐在!

欢迎樵歌管理员鉴赏,谢谢鼓励{:4_191:}

小辣椒 发表于 2025-11-26 22:48

欣赏杨帆好制作,这个是黑黑老师分享的专辑歌词同步制作,漂亮{:4_199:}

小辣椒 发表于 2025-11-26 22:48

小辣椒欣赏加学习{:4_187:}

杨帆 发表于 2025-11-26 22:56

小辣椒 发表于 2025-11-26 22:48
欣赏杨帆好制作,这个是黑黑老师分享的专辑歌词同步制作,漂亮

谢谢小辣椒鼓励,马老师这个模版挺好,有空也可玩一玩{:4_204:}
页: [1]
查看完整版本: 玛雅(自选音乐专辑)