亚伦影音工作室 发表于 2022-12-11 11:52

想想走过的这些年(DJ默涵版) - 雨中百合[频谱新格式]

本帖最后由 亚伦影音工作室 于 2024-12-21 19:33 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9988d137ec3b9f5d6e5072cd4cb5d7f9.jpg') no-repeat center/cover; box-shadow: 2px 3px 2px #000; position: relative; display: grid; place-items: end center; user-select: none; z-index: 1;overflow:hidden; }
#mplayer { position: absolute; width: 60%; height: 160px; bottom: 0px; left:30px;display: flex;justify-content: center; align-items: flex-end;z-index: 10; }
.mLine { position: relative; margin: 0 1px 0 0; width: 100%; height: 8px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .55s; opacity:1; }
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
.picBtn {width:200px; height: 120px;border: none;outline: none;position:absolute; left:940px; top: 460px;z-index: 40; transition: .1s ;}
</style>

<div id="papa">
<button id="picBtn" class="picBtn"style="background: url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%;transition: .1s ;"></button>
<div class="bg">
<div class="texiao" style="width: 1164px; height: 120px;z-index: 12;position: absolute;top:400px; left:-90px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>

<div class="img_border" ><img id="aplay" style="width: 300px; height: 300px;mask: radial-gradient(transparent 15px,#red 0);background: url(https://pic.imgdb.cn/item/6392d1d2b1fccdcd36701312.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/9124df70176f1ff2a5cb778e4e36d3b4.jpg)0px 0px/160% 100%; "></div></div>

<div class="texiao"id="mplayer"></div>
      </div>
      <audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/ee/5b/26/9f39a84817415f764569a52eabf2f29c/audio.mp3" loop autoplay ></audio>


<script>
(function() {(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;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;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;

HCPlayer({
                ypData: ypData,
                player_css: '--ww: 50%; --hh: 200px; --pinpu: linear-gradient(to top,black,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;}
.container .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: 40px;
    color: #ff0000;
    font-weight: bold}

/*mv动画*/

.img_border{display:inline-block;width:300px;height:300px;position: absolute;top:60px; left:240px;z-index: 4;}

.img_border #aplay{border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }

.z360z{animation:rotating 10s linear infinite;

}@keyframes rotating{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);}

}

</style>

<style>
.texiao{margin: 0px auto;position: absolute;z-index:10;
    display: block;
    animation:rotat 6s linear infinite;}


@keyframes rotat{0%{
      background-position: 0% 0%;filter:hue-rotate(360deg);transform:rotate(0deg)scale(1);
    }
   
}

</style>

<script >var lrc = ` 想想走过的这些年(DJ默涵版) - 雨中百合
作词：三力
作曲：三力
编曲：姜山
混音：大卫
监制：谢飞
人生在世短短几十年
谁能摆脱命运的熬煎
辛辛苦苦一天又一天
想要的生活却始终没改变
时光如梭流逝于指间
岁月匆匆苍老了容颜
忙忙碌碌一年又一年
追逐的梦想却停留在原点
叹四季变换往事如烟
无尽的沧桑刻在眉间
回头想想走过的这些年
泪水盈眶模糊了视线
叹光阴似箭轮回变迁
悲欢离合重复在上演
无数个深夜感慨万千
心中的梦何日能实现
时光如梭流逝于指间
岁月匆匆苍老了容颜
忙忙碌碌一年又一年
追逐的梦想却停留在原点
叹四季变换往事如烟
无尽的沧桑刻在眉间
回头想想走过的这些年
泪水盈眶模糊了视线
叹光阴似箭轮回变迁
悲欢离合重复在上演
无数个深夜感慨万千
心中的梦何日能实现`;
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;
</script>

<script language="javascript">
var mu = document.getElementById('aud');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/638fd7d1b1fccdcd3651339d.png')0 0/100% 100%");
}
mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/638fd7d1b1fccdcd3651339d.png')0 0/100% 100%";

})

</script>
<script type="text/javascript">

var my_audio =document.getElementById("aud");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(lrc);

</script>

加林森 发表于 2022-12-11 12:18

漂亮的制作。{:4_199:}

醉美水芙蓉 发表于 2022-12-11 13:08

红影 发表于 2022-12-11 14:18

漂亮的制作，欣赏亚伦老师好帖{:4_187:}

梦缘 发表于 2022-12-11 19:31

很漂亮的帖，欣赏问好！{:4_185:}
页: [1]
查看完整版本: 想想走过的这些年(DJ默涵版) - 雨中百合[频谱新格式]