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

红尘相伴永不离【频谱测试】

<style>
#papa { margin: 30px -300px ; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/704f191851e97a040089581902fd0bea.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 1; }
#mplayer {--ww: 300px;--hh: 140px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:-60px;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 {width:200px; height: 120px;border: none;outline: none;position:absolute; left:940px; top: 460px;z-index: 30; transition:all .55s ;}
</style>
<div id="papa">
<button id="picBtn" class="picBtn"style="background: url('https://pic.imgdb.cn/item/638fd787b1fccdcd36503624.gif')0 0/100% 100%;transition:all .55s ;"></button>
<div class="bg">
<div class="texiao" style="width: 1164px; height: 160px;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://www.kumeiwp.com/sub/filestores/2022/12/11/1c9189aa86d29d033a8f132032a0105c.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: 80%; --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}

/*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 = ` 红尘相伴永不离
作曲：雅诗
红尘相伴永不离
首唱：雅诗
作词：施生军
作曲：雅诗
编曲：Q 月若男DJ
红尘相伴永不离
字幕：亚伦
茫茫的人海中我们相遇
缘分让我们走到了一起
注定了你是我今生的唯一
我要把你深深刻在我心里
今生今世我和你在一起
心与心相印不离也不弃
多想依偎在你温暖怀抱里
感受着你那浓浓的情意
红尘相伴永不离
三生石上刻下爱的痕迹
既然爱了就要好好去珍惜
我会毫无保留把爱都给你
红尘相伴永不离
爱情路上难免遇到风雨
只要两颗心紧紧连在一起
海枯石烂我们永远不分离
字幕：三破狼
今生今世我和你在一起
心与心相印不离也不弃
多想依偎在你温暖怀抱里
感受着你那浓浓的情意
红尘相伴永不离
三生石上刻下爱的痕迹
既然爱了就要好好去珍惜
我会毫无保留把爱都给你
红尘相伴永不离
爱情路上难免遇到风雨
只要两颗心紧紧连在一起
海枯石烂我们永远不分离
海枯石烂我们永远不分离
2022 12 01`;
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 19:07

可能出现手机无法欣赏的现象，待完善！

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

好美的图，欣赏老师的精彩！{:4_187:}

红影 发表于 2022-12-11 20:16

漂亮的变色频谱，欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2022-12-11 20:49

这个手机看不见频谱

小辣椒 发表于 2022-12-11 20:51

是不是接触不好

醉美水芙蓉 发表于 2022-12-11 22:28

亚伦影音工作室 发表于 2022-12-12 04:34

亚伦影音工作室 发表于 2022-12-11 19:07
可能出现手机无法欣赏的现象，待完善！

建议用手机的电脑版欣赏！

小辣椒 发表于 2022-12-12 18:45

这个有按钮，上次点击下面频谱没有反应手机界面放大，频谱看全，没有看见按钮

小辣椒 发表于 2022-12-12 18:53

这个频谱我是在前几天别人发链接就看见过了，那是电脑，发现手机怎么会看不见呢，也是在奇怪的，今天再仔细看看
页: [1]
查看完整版本: 红尘相伴永不离【频谱测试】