论坛 › 音乐沙龙 › 如果天有情（学习亚伦老师代码）

朵拉 发表于 2026-3-8 22:00

如果天有情（学习亚伦老师代码）

本帖最后由 朵拉 于 2026-3-22 20:36 编辑 <br /><br /><style>
#papa{
      position: relative;
      width: 1286px;
      height: 720px;
      margin-left:-300px;
      margin-top:10px;
      border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
      background:#000 url('https://pic1.imgdb.cn/item/69ad7978001548a02b696968.jpg')no-repeat center/cover;
      overflow: hidden;
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
#c{
mix-blend-mode: darken;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
    width: 960px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 360px 40px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #00fff0;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;

</style>

<div id="papa">
<canvas id="c"></canvas>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/2fa760a5000f673303e66d9dceb76f41.mp3"loopautoplay ></audio>
</div>
<script>
mdiv.onclick = () => aud.paused ? aud.play(): aud.pause();
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';

</script>
<script >
c = document.querySelector('#c')
c.width = 1980
c.height = 1080
x = c.getContext('2d')
C = Math.cos
S = Math.sin
t = 0
T = Math.tan

rsz=window.onresize=()=>{
setTimeout(()=>{
   if( document.papa.clientWidth > document.papa.clientHeight*1.77777778){
      c.style.height = '100vh'
      setTimeout(()=>c.style.width = c.clientHeight*1.77777778+'px',0)
    } else{
      c.style.width = '100vw'
      setTimeout(()=>c.style.height =   c.clientWidth/1.77777778 + 'px',0)
    }
},0)
}

rsz()
async function Draw(){
if(!t){
    R=(Rl,Pt,Yw,m)=>{if(!aud.paused){
      M=Math
      A=M.atan2
      H=M.hypot
      X=S(p=A(X,Y)+Rl)*(d=H(X,Y))
      Y=C(p)*d
      Y=S(p=A(Y,Z)+Pt)*(d=H(Y,Z))
      Z=C(p)*d
      X=S(p=A(X,Z)+Yw)*(d=H(X,Z))
      Z=C(p)*d
      if(m){
      X+=oX
      Y+=oY
      Z+=oZ
      }
   } }
    Q=()=>
    I=(A,B,M,D,E,F,G,H)=>(K=((G-E)*(B-F)-(H-F)*(A-E))/(J=(H-F)*(M-A)-(G-E)*(D-B)))>=0&&K<=1&&(L=((M-A)*(B-F)-(D-B)*(A-E))/J)>=0&&L<=1?:0
   
    Rn = Math.random
   
    geoSphere = (mx, my, mz, iBc, size) => {
      let collapse=0
      let B=Array(iBc).fill().map(v=>{
      X = Rn()-.5
      Y = Rn()-.5
      Z = Rn()-.5
      return
      })
      for(let m=99;m--;){
      B.map((v,i)=>{
          X = v
          Y = v
          Z = v
          B.map((q,j)=>{
            if(j!=i){
            X2=q
            Y2=q
            Z2=q
            d=1+(Math.hypot(X-X2,Y-Y2,Z-Z2)*(3+iBc/40)*3)**4
            X+=(X-X2)*99/d
            Y+=(Y-Y2)*99/d
            Z+=(Z-Z2)*99/d
            }
          })
          d=Math.hypot(X,Y,Z)
          v=X/d
          v=Y/d
          v=Z/d
          if(collapse){
            d=25+Math.hypot(X,Y,Z)
            v=(X-X/d)/1.1
            v=(Y-Y/d)/1.1         
            v=(Z-Z/d)/1.1
          }
      })
      }
      B.map(v=>{
      v*=size
      v*=size
      v*=size
      v+=mx
      v+=my
      v+=mz
      })
      return
    }

    Cylinder = (rw,cl,ls1,ls2) => {
      let a = []
      for(let i=rw;i--;){
      let b = []
      for(let j=cl;j--;){
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
      }
      //a = [...a, b]
      for(let j=cl;j--;){
          b = []
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*i-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*(j+1)) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          X = S(p=Math.PI*2/cl*j) * ls1
          Y = (1/rw*(i+1)-.5)*ls2
          Z = C(p) * ls1
          b = [...b, ]
          a = [...a, b]
      }
      }
      b = []
      for(let j=cl;j--;){
      X = S(p=Math.PI*2/cl*j) * ls1
      Y = ls2/2
      Z = C(p) * ls1
      b = [...b, ]
      }
      //a = [...a, b]
      return a
    }

    Tetrahedron = size => {
      ret = []
      a = []
      let h = size/0.4142/0.25
      for(i=3;i--;){
      X = S(p=Math.PI*2/3*i) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      }
      ret = [...ret, a]
      for(j=3;j--;){
      a = []
      X = 0
      Y = 0
      Z = -h
      a = [...a, ]
      X = S(p=Math.PI*2/3*j) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      X = S(p=Math.PI*2/3*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = h
      a = [...a, ]
      ret = [...ret, a]
      }
      ax=ay=az=ct=0
      ret.map(v=>{
      v.map(q=>{
          ax+=q
          ay+=q
          az+=q
          ct++
      })
      })
      ax/=ct
      ay/=ct
      az/=ct
      ret.map(v=>{
      v.map(q=>{
          q-=ax
          q-=ay
          q-=az
      })
      })
      return ret
    }

    Cube = size => {
      for(CB=[],j=6;j--;CB=[...CB,b])for(b=[],i=4;i--;)b=[...b,[(a=)*(l=j<3?size/0.5:-size/0.5),a[(j+1)%3]*l,a[(j+2)%3]*l]]
      return CB
    }
   
    Octahedron = size => {
      ret = []
      let h = size/0.25
      for(j=8;j--;){
      a = []
      X = 0
      Y = 0
      Z = h * (j<4?-1:1)
      a = [...a, ]
      X = S(p=Math.PI*2/4*j) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      X = S(p=Math.PI*2/4*(j+1)) * size/0.25
      Y = C(p) * size/0.25
      Z = 0
      a = [...a, ]
      ret = [...ret, a]
      }
      return ret      
    }
   
    Dodecahedron = size => {
      ret = []
      a = []
      mind = -6e6
      for(i=5;i--;){
      X=S(p=Math.PI*2/5*i + Math.PI/5)
      Y=C(p)
      Z=0
      if(Y>mind) mind=Y
      a = [...a, ]
      }
      a.map(v=>{
      X = v
      Y = v-=mind
      Z = v
      R(0, .553573, 0)
      v = X
      v = Y
      v = Z
      })
      b = JSON.parse(JSON.stringify(a))
      b.map(v=>{
      v *= -1
      })
      ret = [...ret, a, b]
      mind = -6e6
      ret.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          if(Z>mind)mind = Z
      })
      })
      d1=Math.hypot(ret-ret,ret-ret,ret-ret)
      ret.map(v=>{
      v.map(q=>{
          q-=mind+d1/2
      })
      })
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          q*=-1
      })
      })
      ret = [...ret, ...b]
      b = JSON.parse(JSON.stringify(ret))
      b.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(0,Math.PI/2,0)
          q = X
          q = Y
          q = Z
      })
      })
      e = JSON.parse(JSON.stringify(ret))
      e.map(v=>{
      v.map(q=>{
          X = q
          Y = q
          Z = q
          R(0,0,Math.PI/2)
          R(Math.PI/2,0,0)
          q = X
          q = Y
          q = Z
      })
      })
      ret = [...ret, ...b, ...e]
      ret.map(v=>{
      v.map(q=>{
          q *= size/2
          q *= size/2
          q *= size/2
      })
      })
      return ret
    }
   
    Icosahedron = size => {
      ret = []
      B = [
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      [,,],
      ]
      for(p=,i=38;i--;)p=[...p,p+p]
      phi = p/p
      a = [
      [-phi,-1,0],
      ,
      ,
      [-phi,1,0],
      ]
      for(j=3;j--;ret=[...ret, b])for(b=[],i=4;i--;) b = [...b, ,a[(j+1)%3],a[(j+2)%3]]]
      ret.map(v=>{
      v.map(q=>{
          q*=size/1.25
          q*=size/1.25
          q*=size/1.25
      })
      })
      cp = JSON.parse(JSON.stringify(ret))
      out=[]
      a = []
      B.map(v=>{
      idx1a = v
      idx2a = v
      idx3a = v
      idx1b = v
      idx2b = v
      idx3b = v
      a = [...a, ,cp,cp]]
      })
      out = [...out, ...a]
      return out
    }
   
    stroke = (scol, fcol, lwo=0) => {
      if(scol){
      //x.closePath()
      x.globalAlpha = 0.02
      x.strokeStyle = scol
      x.lineWidth = Math.min(100,600*lwo/Z)
      x.stroke()
      x.lineWidth /= 5
      x.globalAlpha = 1
      x.stroke()
      }
      if(fcol){
      x.fillStyle = fcol
      x.fill()
      }
    }
    Rn = Math.random
   
    LsystemRecurse = (size, splits, p1, p2, stem, theta, LsystemReduction, twistFactor) => {
      if(size < .7) return
      let X1 = stem
      let Y1 = stem
      let Z1 = stem
      let X2 = stem
      let Y2 = stem
      let Z2 = stem
      let p1a = Math.atan2(X2-X1,Z2-Z1)
      let p2a = -Math.acos((Y2-Y1)/(Math.hypot(X2-X1,Y2-Y1,Z2-Z1)+.0001))+Math.PI
      size/=LsystemReduction
      for(let i=splits;i--;){
      X = 0
      Y = -size
      Z = 0
      R(0, theta, 0)
      R(0, 0, Math.PI*2/splits*i+twistFactor)
      R(0, p2a, 0)
      R(0, 0, p1a+twistFactor)
      X+=X2
      Y+=Y2
      Z+=Z2
      let newStem =
      Lshp = [...Lshp, newStem]
      LsystemRecurse(size, splits, p1+Math.PI*2/splits*i+twistFactor, p2+theta, newStem, theta, LsystemReduction, twistFactor)
      }
    }
    DrawLsystem = shp => {
      shp.map(v=>{
      x.beginPath()
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      X = v
      Y = v
      Z = v
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      lwo = Math.hypot(v-v,v-v,v-v)
      stroke('#ff0000','#00aa00',lwo)
      })
      
    }
    Lsystem = (size, splits, theta, LsystemReduction, twistFactor) => {
      Lshp = []
      stem =
      Lshp = [...Lshp, stem]
      LsystemRecurse(size, splits, 0, 0, stem, theta, LsystemReduction, twistFactor)
      Lshp.map(v=>{
      v+=size*1.5
      v+=size*1.5
      })
      return Lshp
    }
   
    Sphere = (ls, rw, cl) => {
      a = []
      ls/=1.25
      for(j = rw; j--;){
      for(i = cl; i--;){
          b = []
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*j) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*(i+1)) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          X = S(p = Math.PI*2/cl*i) * S(q = Math.PI/rw*(j+1)) * ls
          Y = C(q) * ls
          Z = C(p) * S(q) * ls
          b = [...b, ]
          a = [...a, b]
      }
      }
      return a
    }
   
    iWaveSystemc = 120
    iWsp = .1
    a = [], b = []
    for(i=iWaveSystemc;i--;){
      X = (-iWaveSystemc/2+i)*iWsp
      Y = 0
      Z = 0
      a = [...a, ]
      b = [...b, ]
    }
    base_waveSystem =
   
    cl = 3
    rw = 4
    br = 4
    sp = 8
    iBc = rw*cl*br
   
    B = Array(iBc).fill().map((v,i)=>{
      X = ((i%cl)-cl/2+.5)*sp*4.95/3
      Y = (((i/cl|0)%rw)-rw/2+.5)*sp
      Z = ((i/cl/rw|0)-br/2+.5)*sp
      return
    })
}

oX=0, oY=0, oZ=14
Rl = t/3, Pt = -t, Yw = C(t/8)*10

x.globalAlpha = 2
x.fillStyle='#44aa88'
x.fillRect(0,0,c.width,c.height)
x.lineJoin = x.lineCap = 'round'

for(m=2;m--;) base_waveSystem.map((v, i)=>{ if(!aud.paused){
    v=(m?-1:1)*iWsp + Math.max(0, ((S(p=Math.PI*8/iWaveSystemc*i+(v>0?1:-1)*C(t/4)*5)*4)**16/10000000000)+S((v>0?1:-1)*Math.PI*4/iWaveSystemc*i+t*5)+S((v>0?1:-1)*Math.PI*(S(t/4+t/2)*4)**3/iWaveSystemc*i+t*10)+S((v>0?1:-1)*Math.PI/iWaveSystemc*i+t*20))*(m?-1:1)
} })

B.map(v=>{
    tx = v
    ty = v
    tz = v
   
    for(m=2;m--;){
      x.beginPath()
      v.map(q=>{
      X = q
      Y = q
      Z = q
      p = Math.atan2(ty,tz)+Math.PI/2
      R(0,p,0)
      X += tx
      Y += ty
      Z += tz
      R(Rl,Pt,Yw,1)
      if(Z>0)x.lineTo(...Q())
      })
      stroke(m?'#ff0000':'#000078')
    }
})

t+=1/60
requestAnimationFrame(Draw)
}

Draw()
</script>

<script >
var lrc = `如 果 天 有 情
制作：朵拉

总要为爱伤透了心
才知真情多么难寻
有谁愿意如此认识爱情
总要流下多少泪滴
才能看清楚自己
一颗痴心一段赤情
说得容易怎奈人间际遇
就让我和你沉睡在梦里
可知我的心不愿意醒
相偎又相依黑夜到天明
缘份不能分命运不能离
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
总要为爱伤透了心
才知真情多么难寻
有谁愿意如此认识爱情
总要流下多少泪滴
才能看清楚自己
一颗痴心一段赤情
说得容易怎奈人间际遇
就让我和你沉睡在梦里
可知我的心不愿意醒
相偎又相依黑夜到天明
缘份不能分命运不能离
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
如果天有情如果梦会灵
就让我的心爱到彻底
我对你的爱已无法说明
就像风吹不息雨打不停
此情不渝
2026—03—08
`;
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 = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    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 >

朵拉 发表于 2026-3-8 22:10

@亚伦影音工作室
亚伦老师好，学生的图不显示，麻烦您查看原因{:4_190:}

红影 发表于 2026-3-8 22:20

漂亮，欣赏朵宝好帖{:4_187:}

亚伦影音工作室 发表于 2026-3-9 08:52

#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-300px;
        margin-top:10px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url( href="https://pic1.imgdb.cn/item/69ad7978001548a02b696968.jpg )no-repeat center/cover;
        overflow: hidden;
}

朵拉 发表于 2026-3-9 09:56

亚伦影音工作室 发表于 2026-3-9 08:52
#papa{
        position: relative;
        width: 1286px;


谢谢亚伦老师，学生修改好了，请您查阅{:4_190:}

亚伦影音工作室 发表于 2026-3-9 10:54

朵拉 发表于 2026-3-9 09:56
谢谢亚伦老师，学生修改好了，请您查阅

很漂亮！

梦油 发表于 2026-3-9 10:56

朵拉朋友的制作很有特点。

朵拉 发表于 2026-3-9 11:17

梦油 发表于 2026-3-9 10:56
朵拉朋友的制作很有特点。

谢谢梦油老师的点评，祝您新周愉快{:4_190:}

梦油 发表于 2026-3-9 13:42

朵拉 发表于 2026-3-9 11:17
谢谢梦油老师的点评，祝您新周愉快

朵拉朋友别客气。

雨季工作室 发表于 2026-3-10 16:41

欣赏朵拉老师制作漂亮分享！

查看完整版本: 如果天有情（学习亚伦老师代码）