醉美水芙蓉 发表于 3 天前

【水芙蓉播放器】音乐自选8首

<meta charset="UTF-8">
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa {
          --offsetX: 81px;
      position: relative;
      width: 100vw;
      height: 140vh;
      overflow: hidden;
      color: #2196F3;
      margin: 0;
      padding: 0;
    }
    .bg-layer {
      position: absolute;
      inset: 0;
      background-image: url("https://upfile.mp3.wf/view.php/c27cf5ac5e1a5c5285f4d4085b9bc404.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      z-index: 1;
      transition: background-image 0.2s ease;
    }
    .pa.play .bg-layer {
      background-image: url("https://upfile.mp3.wf/view.php/c27cf5ac5e1a5c5285f4d4085b9bc404.jpg");
    }
    .player {
      width: 480px;
      bottom: 10px;
      z-index: 5;
    }
    .btnFs {
      top: 25px;
      right: 20px;
    }
    #lyric {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translateX(-50%);
      font: normal 2em Microsoft YaHei, sans-serif;
      font-weight: bold;
      white-space: nowrap;
      pointer-events: none;
      z-index: 9999;
      text-shadow: 0 0 10px rgba(0,0,0,0.1);
      color: rgba(33,150,243,0.3);
      background: linear-gradient(90deg, #2196F3 0%, #2196F3 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
      mask-image: linear-gradient(to right, #000 0%,#000 0%,transparent 0%);
    }
    #msvg {
      position: absolute;
      width: 12vw;
      height: 12vw;
      top: 10%;
      transition: .75s;
      opacity: 1;
      z-index: 10;
    }
    #svgObj {
      position: absolute;
      left: 50%;
      top: 25%;
      transform: translateX(-50%);
      width: 70vw;
      height: auto;
      z-index: 2;
      fill: none;
      stroke: url(#grdWave);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 3 2;
      stroke-dashoffset: 0;
      opacity: .45;
      animation: pMove 8s ease-in-out infinite alternate;
    }
    @keyframes pMove {
      to {
            stroke-dashoffset: -180;
      }
    }
    .aplayer {
      background: transparent !important;
    }
    .aplayer-bar .aplayer-bar-inner {
      background: #2196F3 !important;
    }
    .aplayer-icon {
      color: #2196F3 !important;
    }
    .aplayer-time {
      color: #2196F3 !important;
    }
</style>

<div id="pa" class="pa">
    <div class="bg-layer"></div>
    <svg id="svgObj" viewBox="0 0 160 90">
      <defs>
      <linearGradient id="grdWave">
          <stop offset="0" stop-color="#072afc"></stop>
          <stop offset="0.15" stop-color="#1976D2"></stop>
          <stop offset="1" stop-color="#2196F3"></stop>
      </linearGradient>
      </defs>
      <symbol id="pb">
      <path d='M0 45 C40 0 120 90 160 45'></path>
      </symbol>
      <use href="#pb" x="0" y="0"></use>
      <use href="#pb" x="5" y="5"></use>
      <use href="#pb" x="10" y="10"></use>
    </svg>

    <div id="lyric"></div>

    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <title>播放/暂停(Alt+X)</title>
      <defs>
            <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stop-color="#2196F3"></stop>
                <stop offset="50%" stop-color="#03A9F4"></stop>
                <stop offset="100%" stop-color="#00BCD4"></stop>
            </linearGradient>
      </defs>
      <g id="g1" class="rotate"></g>
    </svg>
</div>

<script>
var options = {
    pa: '.pa',
    urls: [
      ['https://www.joy127.com/url/153588.mp3', '芜凩《听风吟》'],
      ['https://www.joy127.com/url/153589.mp3', '宇宇冷 - 此生只为你一人停留DJ'],
      ['https://www.joy127.com/url/153591.mp3', '《乌兰巴托的夜（空灵DJ）》'],
      ['https://www.joy127.com/url/153592.mp3', '林月儿 - 一生只对你一人依恋'],
      ['https://imgimg.qqdsw8.cn/view.php/bfff4b6525e2ef757a0beac982eb7393.mp3', '山河行者 - 雪域莲心'],
      ['https://www.joy127.com/url/153692.mp3', '香奈惠 - 你是我唯一的依靠(合唱版)'],
      ['https://www.joy127.com/url/153693.mp3', '超哥 - 踏马寻花向自由(雷鬼版)'],
      ['https://www.joy127.com/url/153694.mp3', '你有没有真的爱过我(烟嗓版) - 寂寞阿图']
    ],
    btns:
};

const songLrc = [
`听风吟
LRC编辑：醉美水芙蓉
云深处见山鹭
桃花开了十里路
不知人间何岁月
只记花开花落处
溪边谁的白衣蔚
惹了花瓣一身醉
林间狐影悄然过
留下传说几分魅
这青丘的风啊 吹了多少朝暮
这桃林的香啊 浸染了仙骨
我守着三生石上 你刻下的名字
等一场重逢 在落英深处
听风吟 看花舞
借月色 酿一壶
饮下这千年的孤独
只为等一个当初
这青丘的风啊 吹了多少朝暮
这桃林的香啊 浸染了仙骨
我守着三生石上 你刻下的名字
等一场重逢 在落英深处
谢谢欣赏`,
`《此生只为你一人停留DJ》
演唱：宇宇冷
LRC编辑：醉美水芙蓉
晚风掠过城市的烟火
你的轮廓刻在我心窝
缘分交错擦肩的过客
偏偏为你沦陷了自我
爱如火燃尽了寂寞
情如歌唱尽了执着
心漂泊只为你停泊
这份情该如何割舍
我在霓虹深处为你执着
爱到最后只剩泪滑落
明知是错偏偏不舍
你的温柔是我的枷锁
我在人海之中为你等候
倾尽所有换一次回眸
情路难走痴心依旧
此生只为你一人停留
星光闪烁照亮了寂寞
思念成河淹没了快乐
许下承诺却随风飘落
爱而不得最让人心痛
我在霓虹深处为你执着
爱到最后只剩泪滑落
明知是错偏偏不舍
你的温柔是我的枷锁
我在人海之中为你等候
倾尽所有换一次回眸
情路难走痴心依旧
此生只为你一人停留
谢谢欣赏！`,
`《乌兰巴托的夜（空灵DJ）》
词：贾樟柯/左小祖咒
曲：昔日布道尔吉
演唱：魏潇潇
LRC编辑：醉美水芙蓉
穿过狂野的风
你慢些走
我用沉默告诉你
我醉了酒
乌兰巴托的夜
那么静 那么静
连风都听不到
听不到
飘向天边的云
你慢些走
我用奔跑告诉你
我不回头
乌兰巴托的夜
那么静 那么静
连云都不知道
不知道
乌兰巴托的夜
那么静 那么静
歌儿轻轻唱
风儿轻轻吹
乌兰巴托的夜
那么静那么静
唱歌的人不许掉眼泪
有一个地方很远很远
那里有风有古老的草原
骄傲的母亲目光深远
温柔的塔娜话语缠绵
乌兰巴托的夜
那么静那么静
歌儿轻轻唱
风儿轻轻吹
乌兰巴托的夜
那么静那么静
唱歌的人不许掉眼泪
啊
呜
乌兰巴托的夜
那么静那么静
连云都不知道
不知道
唱歌的人不时掉眼泪
谢谢欣赏！
`,
`一生只对你一人依恋
演唱：林月儿
LRC编辑：醉美水芙蓉
一生只对你一人依恋
多想今生和你相见
和你再续红尘情缘
一生只对你一人留恋
只愿记起你的容颜
佛前树下求一次签
求他为我结一次缘
生生世世对你留恋
一生只对你一人依恋
三生石旁许下心愿
只求永远 能在你身边
就算不 再和你有缘
只求今生无挂无牵
多想今生和你相见
一生只对你一人留恋
就算不再和你有缘
一生只愿对你依恋
一生只对你依恋
生生世世只对你依恋
谢谢欣赏`,
` 雪域莲心
演唱：山河行者
LRC编辑：醉美水芙蓉
雪山托起 蓝蓝的云天
经幡摇曳 岁岁的祈愿
草原铺开 千里柔软
风吹格桑 开满山间
牧歌飘过 云水之间
哈达洁白 映着容颜
雪域深处 炊烟袅袅
藏家姑娘 立在流年
雪域的姑娘 美若雪山莲
眼眸清澈 映着白云天
舞步轻摇 伴着弦子弦
一声藏腔 颤落山间云烟
雪域的姑娘 心似湖水甜
虔诚心念 绕着转经圈
清风作伴 神山为缘
一腔温柔 醉了整片高原
玛尼石上 刻满了诉愿
酥油飘香 暖了流年
马背摇曳 落日余晖
经声轻轻 漫过草原
姑娘回眸 眉眼含云烟
红衣漫染 雪域尘缘
不惹人间 俗世纷繁
只守山河 静忆安然
雪域的姑娘 美若雪山莲
眼眸清澈 映着白云天
舞步轻摇 伴着弦子弦
一声藏腔 颤落山间云烟
雪域的姑娘 心似湖水甜
虔诚心念 绕着转经圈
清风作伴 神山为缘
一腔温柔 醉了整片高原
岁月流转不败那纯真笑脸
新年路灯照亮着苍茫山川
无论风雨还是艳阳满天
你都在哪里守着最初的誓言
雪域的姑娘 美若雪山莲
眼眸清澈 映着白云天
舞步轻摇 伴着弦子弦
一声藏腔 颤落山间云烟
雪域的姑娘 心似湖水甜
虔诚心念 绕着转经圈
清风作伴 神山为缘
一腔温柔 醉了整片高原
雪山依旧
经幡依旧
雪域姑娘
留在心头
谢谢欣赏！`,

`你是我唯一的依靠(合唱版)
词：生命树下
曲：生命树下
LRC编辑：醉美水芙蓉
走过许多黑夜
也问过自己
如果没有你
我还能依靠谁
当世界沉默
眼泪慢慢坠
只有你的温柔
陪我度过长夜
若有一天
岁月改变一切
风吹散梦想
星光慢慢熄灭
当人群散去
世界只剩黑夜
我仍会在这里
陪你走过一切
当心渐渐疲惫
当泪悄悄滑落
有一双手
轻轻拥抱我
如果没有你
我还能拥有什么
这漫长岁月
还有谁等我
如果没有你
黑夜多么寂寞
是谁在风里
为我守候
就算世界
慢慢改变所有
你仍是我心里
唯一等候
当岁月走远
当一切沉默
你依然是
我生命的依靠
如果没有你
我还能拥有谁
走过万千人间
只想与你相随
如果没有你
我该向哪里飞
这条漫长的路
谁与我相陪
就算时间
带走青春岁月
你仍是我心里
永远的依归
这一生
若只剩一份拥有
那一定是
你给我的温柔
谢谢欣赏！`,

`踏马寻花向自由(雷鬼版)
作词: 疯狂的羊
作曲: 郭仔
演唱：超哥
LRC编辑：醉美水芙蓉
我自有节奏
天高任我游
我要逃离世俗的烦忧
命运的岔路口
到底往哪走
随着微风四处去漂流
想喝李白的酒
醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游
跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我
想喝李白的酒
醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游
跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我
谢谢欣赏！`,

`你有没有真的爱过我（烟嗓版）
演唱：寂寞阿图
作词：廖伟志
作曲：廖伟志
制作人：欧华成
艺人统筹：小帅
监制：秦朗
出品：北京诗序文化
LRC编辑：醉美水芙蓉
你有没有真的爱过我
为何问你你总是不说
热烈相拥过
又不再交错
感情只剩模糊的轮廓
你有没有真的爱过我
哪怕一个坚定的承诺
从无话不说
到无话可说
故事结束任眼泪滑落
你有没有真的爱过我
你的回应是一直沉默
只剩下落寞
我有什么错
短暂柔情似流星划落
你有没有真的爱过我
我是你诗的哪个段落
落款第几页
第几次临摹
还是匆匆一瞥就略过
你有没有真的爱过我
我可曾是你情感寄托
今夜雾蒙蒙
无情又冷漠
似梦似醒憧憬被打破
你有没有真的爱过我
酒杯清浅我没有把握
回忆上了锁
我望月独酌
还不死心承受着折磨
你有没有真的爱过我
为何问你你总是不说
热烈相拥过
又不再交错
感情只剩模糊的轮廓
你有没有真的爱过我
哪怕一个坚定的承诺
从无话不说
到无话可说
故事结束任眼泪滑落
谢谢欣赏！`
];
function parseLines(text){
    const out=[];
    text.trim().split('\n').forEach(l=>{
      const m=l.match(/^\[(\d+):(\d+\.\d+)\]\s*(.*)$/);
      if(!m)return;
      out.push({ t: +m*60 + +m, txt: m });
    });
    return out;
}

let aud, dr;
let lyricEl = document.getElementById('lyric');
let curIdx = -1;
let rafId = null;
let lines = [];
const wave = document.getElementById('svgObj');
const paBox = document.getElementById('pa');

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
});

function tzRun() {
    aud = new AudPlayer(options);
    dr = _dr(msvg);
    dr.path('M-40 -190 A90 300, 0 0 0, 40 -190 L0 0Z', 'url(#grd)', 'lightgreen', 4).addTo(g1).rotates(8);

    updateCurrentLrc();

    // 播放切换动图
    aud.aud.addEventListener('play', () => {
      paBox.classList.add('play');
      wave.style.animationPlayState = 'running';
      if(!rafId) rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('pause', () => {
      paBox.classList.remove('play');
      wave.style.animationPlayState = 'paused';
      cancelAnimationFrame(rafId);
      rafId = null;
    });
    aud.aud.addEventListener('loadeddata', function(){
      curIdx = -1;
      cancelAnimationFrame(rafId);
      rafId = null;
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      updateCurrentLrc();
      if(aud.aud.paused){
            paBox.classList.remove('play');
            wave.style.animationPlayState = 'paused';
      }else{
            paBox.classList.add('play');
            wave.style.animationPlayState = 'running';
      }
      rafId = requestAnimationFrame(renderMask);
    });
    aud.aud.addEventListener('ended', ()=>{
      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
      curIdx = -1;
      paBox.classList.remove('play');
      wave.style.animationPlayState = 'paused';
    });

    if(aud.aud.paused){
      paBox.classList.remove('play');
    }else{
      paBox.classList.add('play');
    }
    rafId = requestAnimationFrame(renderMask);
}

function updateCurrentLrc(){
    const nowSrc = aud.aud.src;
    let idx = 0;
    for(let i=0; i<options.urls.length; i++){
      if(options.urls === nowSrc){
            idx = i;
            break;
      }
    }
    lines = parseLines(songLrc);
    for(let i=0; i<lines.length; i++){
      lines.tEnd = (i+1 < lines.length) ? lines.t : (lines.t + 4);
    }
    curIdx = -1;
}

function renderMask(){
    if(!aud || !aud.aud) return;
    const t = aud.aud.currentTime;
    let i = curIdx;

    if(i<0 || t<lines.t || t>=lines.tEnd){
      for(i=lines.length-1; i>=0; i--){
            if(t>=lines.t) break;
      }
      if(i!==curIdx && i>=0){
            lyricEl.textContent = lines.txt;
            curIdx = i;
      }
      if(i<0){
            lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
                'linear-gradient(to right,#000 0%,#000 0%,transparent 0%)';
            curIdx = -1;
      }
    }

    if(curIdx>=0){
      const seg = lines;
      const dur = Math.max(seg.tEnd - seg.t, 0.01);
      const p = Math.min(Math.max((t - seg.t)/dur, 0), 1);
      const percent = (p*100).toFixed(2)+'%';

      lyricEl.style.webkitMaskImage = lyricEl.style.maskImage =
            `linear-gradient(to right,#000 0%,#000 ${percent},transparent ${percent})`;
    }

    rafId = requestAnimationFrame(renderMask);
}

function loadJs(u,cb){
    var s=document.createElement('script');
    s.src=u;
    s.onload=cb;
    document.head.appendChild(s);
}
</script>

雨声 发表于 3 天前

首席欣赏水妹带来的精美作品~

雨声 发表于 3 天前

问好水妹，周末快乐~

雨声 发表于 3 天前

好听的歌好看的播放器，谢谢水妹的精彩分享~

醉美水芙蓉 发表于 3 天前

雨声 发表于 2026-6-21 22:15
好听的歌好看的播放器，谢谢水妹的精彩分享~

问好雨声姐！晚上好！谢谢光临支持！

云端漫步 发表于 前天 03:01

芙蓉播放器音乐自选8首， 制作棒画面唯美歌好听。

醉美水芙蓉 发表于 前天 07:06

云端漫步 发表于 2026-6-22 03:01
芙蓉播放器音乐自选8首， 制作棒画面唯美歌好听。

谢谢漫步老师欣赏鼓励！

醉美水芙蓉 发表于 前天 07:12

云端漫步 发表于 2026-6-22 03:01
芙蓉播放器音乐自选8首， 制作棒画面唯美歌好听。

漫步老师深夜回帖辛苦了！

绿蔷薇 发表于 前天 10:26

漂亮的音乐帖，问好芙蓉~~{:9_269:}

醉美水芙蓉 发表于 前天 12:01

绿蔷薇 发表于 2026-6-22 10:26
漂亮的音乐帖，问好芙蓉~~

谢谢蔷薇美女光临！
页: [1] 2 3
查看完整版本: 【水芙蓉播放器】音乐自选8首