论坛 › 音乐沙龙 › 《风说花儿长得美》天籁天

亦是金 发表于 2025-12-14 21:12

《风说花儿长得美》天籁天

本帖最后由 亦是金 于 2025-12-15 10:34 编辑 <br /><br /><style>
#papa {
    margin-top: 120px;
    left: calc(50% - 81px);
    transform: translateX(-50%);
    width: 1164px;
    height: 620px;
    background: gray url('https://upfile.mp3.wf/view.php/2e1ccdb5645f54169e59fd6a4274b671.gif') no-repeat center/cover;
    border-radius: 22px;
    border: thick double#88abfa;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

#mplayer {--ww: 300px;--hh: 160px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:-120px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 10;}

.mLine {position: relative;margin: 0 1px 0 0;width: 4px;height: 8px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: .95;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }



#picBtn { position: absolute; left: 650px; bottom: -50px; width: 450px; height: 450px; background: url('https://upfile.mp3.wf/view.php/ac775ada8d0c17204253780172cd1fe1.png')0 0/100% 100%; cursor: pointer; z-index: -1; animation: rot linear 40s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(-150deg);}

@keyframes rot {
0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg)scale(0.6);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-460deg)scale(0.8);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-160deg)scale(0.6);top:-120px;}
}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 620px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0.5; }
@keyframes fly {from {
                background-position: 0 0;
                filter: hue-rotate(-360deg)
        }

        to {
                background-position: 100px 1600px;
        }
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 620px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0.6; }
@keyframes tot {from {
                background-position: 0 0;
                filter: hue-rotate(360deg)
        }

        to {
                background-position: -1600px 300px;
        }
}

#tx { position: absolute;
        top: 0px;
        left: 0px;
        width: 1164px;
        height: 620px;
        animation: tx 2s linear infinite;
        cursor: pointer;
       }

@keyframes tx {from {filter: hue-rotate(0deg);
        }
to {filter:hue-rotate(360deg)contrast(100%)brightness(150%);}
}

#img_border{display:inline-block;width:1164px;height:620px;position: absolute;top:0px; left:0px;z-index: 40;}

#dt2{ position: absolute; width: 000px; height: 350px; top: 280px; left: 800px; }

@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>

<div style="position: relative;width: 500px;height: 50px;top:755px;LEFT: 700px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;">亦是金在线音乐</span></span></span></p></div>


<div id="papa">

<img id="dt2" src="" alt="" />

<imgid="mpicc"style="width: 100%; height: 100%;background: url(http://pan.yinhuabbs.cn/view.php/e728796b452e541155fb0a1535adb80d.pn)0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(http://pan.yinhuabbs.cn/view.php/e728796b452e541155fb0a1535adb80d.pn)0 0/50% 50%" >

<div id="picBtn" ></div>
<div class="bg"><div id="tx">
<div id="" style="width: 1164px; height: 160px;z-index: 20;position: absolute;top:540px; left:50px;"> <!--歌词设置有关数据-->
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>

<div id="img_border" ><imgstyle=""></div>

<div id="mplayer"></div></div>
      </div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2728456234" loop autoplay></audio>

<script>
(function() {
        (function(mkPlayer) {let defaults = {lrcAr: [],player_css: '',ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
      
       
        let ypData = ;
        HCPlayer({
               
                ypData: ypData,
                player_css: '--ww: 120%; --hh: 22%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
        });
})();
</script>
<style>

.bg{width: 1px;height: 1px;
    margin: 0;position: absolute;top:0px; left:0px;}
#aud{
    width: 250px;
    display: block;
    margin: 0 auto;}
.btn{
    display: block;
    margin: 0;}
.lrc{
    width: 960px;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:0px; left:0px;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 35px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 50px;
    color: #ff0000;
    font-weight: bold}

</style>



<script >var lrc = `《风说花儿长得美》天籁天
词曲 : 梁文正
演唱 ：天籁天
歌词编辑：亦是金
。。。。。。
今生种下一棵玫瑰
在我心上盛开花蕊
香飘万里和你约会
是你打开我的心扉
爱情让我那么沉醉
今生有幸彼此相陪
一朝一夕和你牵手
共赏人间如画山水
风说花儿长得美
你说我比花儿娇媚
花好月圆相依偎
多么甜蜜的滋味
风说花儿长得美
你说我比花儿娇贵
花谢花开为君来
此生爱你永无悔
。。。。。。
爱情让我那么沉醉
今生有幸彼此相陪
一朝一夕和你牵手
共赏人间如画山水
风说花儿长得美
你说我比花儿娇媚
花好月圆相依偎
多么甜蜜的滋味
风说花儿长得美
你说我比花儿娇贵
花谢花开为君来
此生爱你永无悔
风说花儿长得美
你说我比花儿娇贵
花谢花开为君来
此生爱你永无悔
花谢花开为君来
此生爱你永无悔

-- 谢谢欣赏 --

-
-
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;

mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');

mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpicc.style.animationPlayState = 'paused');

tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tx.style.animationPlayState = 'running');
aud.addEventListener('pause', () => tx.style.animationPlayState = 'paused');

picBtn.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => picBtn.style.animationPlayState = 'running');
aud.addEventListener('pause', () => picBtn.style.animationPlayState = 'paused');

img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');

</script>

绿叶清舟 发表于 2025-12-14 21:18

播放器漂亮，以为就在下面滚动的结果一下跳上去了{:4_173:}

亦是金 发表于 2025-12-14 22:05

绿叶清舟 发表于 2025-12-14 21:18
播放器漂亮，以为就在下面滚动的结果一下跳上去了

问好绿叶清舟老师！{:4_187:}谢谢欣赏点赞加分加精！{:4_204:}

红影 发表于 2025-12-14 23:24

还以为那个转动的上下移动的小图标是播放器，还追着去点击，然后发现点击背景就能暂停了{:4_173:}

红影 发表于 2025-12-14 23:25

漂亮的频谱效果，制图也很漂亮。
欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2025-12-15 10:24

红影 发表于 2025-12-14 23:24
还以为那个转动的上下移动的小图标是播放器，还追着去点击，然后发现点击背景就能暂停了

问好红影！{:4_187:}你真逗！哈哈哈{:4_170:}

亦是金 发表于 2025-12-15 10:25

红影 发表于 2025-12-14 23:25
漂亮的频谱效果，制图也很漂亮。
欣赏亦是金老师好帖

谢谢欣赏点赞点评加分！{:4_204:}

红影 发表于 2025-12-15 23:21

亦是金 发表于 2025-12-15 10:24
问好红影！你真逗！哈哈哈

我说的是真的啊，先入为主地以为那个是播放器{:4_173:}

红影 发表于 2025-12-15 23:21

亦是金 发表于 2025-12-15 10:25
谢谢欣赏点赞点评加分！

不客气啊，再赏亦是金老师好帖{:4_187:}

查看完整版本: 《风说花儿长得美》天籁天