亚伦影音工作室 发表于 2022-12-16 22:35

H5可控音画《女儿情 - 吴静》

本帖最后由 亚伦影音工作室 于 2022-12-17 04:46 编辑 <br /><br /><style>
#papa { margin: 30px -300px ; width: 1164px; height: 640px; background:url(https://pic.imgdb.cn/item/639c856fb1fccdcd36dc3f59.jpg)0px 0px/100% 110%;;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#mplayer { position: absolute; width: 100%; height: 260px; bottom: 0; display: flex; justify-content: center; align-items: flex-end; }
.mLine { position: relative; margin: 0px 2px 0 0; width: 4px; height: 10px; background: linear-gradient(0deg, rgba(99, 99, 99, 0) 0%,rgba(162, 171, 88, 0) 100%); transition: height .45s; }
.mLine::before { position: absolute; content: ''; width: 100%; height: 4px; background:#fff000;top: 20px;border-radius:50%;filter:blur(0.5px)brightness(120%) drop-shadow(#ff0000 0 0px 5px)drop-shadow(#ff0000 0px 0 5px)drop-shadow(#ff0000 0px 0 8px);
animation: dd 5s linear infinite;}
@keyframes dd { 0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-360deg)scale(1);left: -30px;} }
#picBtn { position: absolute; left: 950px; bottom: 130px; width: 220px; height: 180px; background: url('https://gd-hbimg.huaban.com/78e2045f9340a5ac736202b6a600f3a7111fbf408bc94-NxzE0Q')0 0/100% 100%; cursor: pointer; z-index: 1; 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(1);left: -30px;}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(120deg)scale(0.2);top:30px;}
}
#plane {position: absolute;left: -150px;top: 180px;width: 500px;height: 450px; offset-distance: 0;
offset-path: path("M0 20 Q 400 80, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639c89a7b1fccdcd36e432e4.png")0 0/100% 100%;
animation: move 10s linear infinite;}
#plane0 {position: absolute;left: 50px;top: 200px;width: 500px;height: 450px;offset-distance: 0;
offset-path: path("M0 20 Q 400 80, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639c89a7b1fccdcd36e432e4.png")0 0/100% 100%;
animation: move0 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
@keyframes move0 { to { offset-distance: 100%;} }

#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(120%);}
}

#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:450px; left:880px;z-index: 40; transition: .3s all ease;animation:rotating 10s linear infinite;}
@keyframes rotating{
0%{transform: rotate(-360deg);}
100%{transform: rotate(0deg);}
}
</style>
<div id="papa">
<divid="plane"> </div>
<divid="plane0"> </div>
<div id="picBtn" ></div>
<div class="bg"><div id="tx">
<div id="" style="width: 1164px; height: 160px;z-index: 20;position: absolute;top:500px; left:50px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div>
<div id="img_border" style="width: 150px; height: 150px;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;"></div>

<div id="mplayer"></div></div>
      </div>
      <audio id="aud" src="https://p4.t57.cn:8399/2018/jy/ok/JYB.m4a" 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);
       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;z-index: 10;}
#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: 0px;
    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;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;
    font-weight: bold}


.lrc #ullrc li.active::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: #000000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
@keyframes bgMove1{from{width:0%;}to{width:100%;filter:hue-rotate(360deg)}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
</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;
plane.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => plane.style.animationPlayState = 'running');
aud.addEventListener('pause', () => plane.style.animationPlayState = 'paused');

plane0.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => plane0.style.animationPlayState = 'running');
aud.addEventListener('pause', () => plane0.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-16 22:39

我的电脑不知道咋了，音乐很卡！敬请朋友反馈一下！

红影 发表于 2022-12-16 23:26

我这里听着很流畅呢，这频谱真漂亮，制作也好漂亮。欣赏亚伦老师好帖{:4_187:}
页: [1]
查看完整版本: H5可控音画《女儿情 - 吴静》