论坛 › 动画音画 › 全控HTML5频谱音画《你的万水千山(DJ版)-宋小睿》【珍藏版】

亚伦影音工作室 发表于 2022-12-13 06:48

全控HTML5频谱音画《你的万水千山(DJ版)-宋小睿》【珍藏版】

本帖最后由 亚伦影音工作室 于 2022-12-17 04:00 编辑 <br /><br /><style>
#papa { margin: 30px -300px ; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/6397a78fb1fccdcd365e4aa9.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer {--ww: 300px;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;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: 5px;height: 10px;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: 950px; bottom: 130px; width: 120px; height: 120px; background: url('https://pic.imgdb.cn/item/63979dcdb1fccdcd3655f9ee.png')0 0/100% 100%; cursor: pointer; z-index: -4; animation: rot linear 30s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}@keyframes rot {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(2);left: 30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(260deg)scale(0.2);top:30px;}
}
#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: 1024px;
        height: 600px;
        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:150px;height:150px;position: absolute;top:420px; left:880px;z-index: 40;border:2px solid #cccccc;border-radius:50%; transition: .3s all ease;animation:rotating 10s linear infinite;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>
<div id="papa">
<imgid="mpicc"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/6397a945b1fccdcd365f7e48.png)0 0/50% 50%" >
<imgid="mpic"style="width: 100%; height: 100%;background: url(https://pic.imgdb.cn/item/6397a945b1fccdcd365f7e48.png)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:420px; left:50px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>
<div id="img_border" ><imgstyle="width: 150px; height: 150px;mask: radial-gradient(transparent 8px,#red 0);-webkit-mask: radial-gradient(transparent 8px,red 0);background: url(https://pic.imgdb.cn/item/6392d1d2b1fccdcd36701312.png)0 0/100% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)0px 0px/160% 100%;border-radius:50%;"></div>

<div id="mplayer"></div></div>
      </div>
      <audio id="aud" src="https://www.qqmc.com/mp3/music146128855.mp3" 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: 100%; --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: 40px;
    color: #ff0000;
    font-weight: bold}

</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;

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>

红影 发表于 2022-12-13 14:02

单位的网有限制，欣赏不了，等回去了再欣赏{:4_204:}

小辣椒 发表于 2022-12-13 21:11

这个制作好，转盘按钮，手机电脑都可以轻松实现{:4_199:}

小辣椒 发表于 2022-12-13 21:12

这首DJ我最喜欢{:4_208:}

查看完整版本: 全控HTML5频谱音画《你的万水千山(DJ版)-宋小睿》【珍藏版】