论坛 › 欢乐水吧 › HTML5基础音画 我又想你了 - 雨墨妍

亚伦影音工作室 发表于 2022-10-6 15:11

HTML5基础音画 我又想你了 - 雨墨妍

本帖最后由 亚伦影音工作室 于 2022-10-7 23:05 编辑 <br /><br /><style type="text/css">
        #outblk        {margin: auto;
        width: 1024px;
        height: 600px;
        background: rgba(0,0,0,.45) url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/034cbd2c32a0eeb2f685d50dd969c9fe.jpg') no-repeat center/cover;
        margin-top: 20px;
        margin-left: -130px;
        box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000;
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
        }
#photo {
        width: 1024px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        background:#800000 linear-gradient(45deg, #0411FA 29%,#8B43C9 79%);}
#photo img {
        width: 1024px;
        height: 600px;
        position: absolute;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        filter: contrast(120%)brightness(110%);
      opacity: 0;
        animation-name: round;
        animation-duration: 48s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
}

@keyframes round{0% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}


10% {
opacity: 1;background-position: 0% 0%;
}
12% {
opacity: 1;background-position: 0% 0%;
}

18% {
opacity: 0;background-position: 0% 0%;
-webkit-transform:translate(0%,0%)scale(1);}


}

#photo img:nth-child(8) {
        animation-delay: 42s;
}

#photo img:nth-child(7) {
        animation-delay: 36s;
}

#photo img:nth-child(6) {
        animation-delay: 30s;
}

#photo img:nth-child(5) {
        animation-delay: 24s;
}

#photo img:nth-child(4) {
        animation-delay: 18s;
}

#photo img:nth-child(3) {
        animation-delay: 12s;
}

#photo img:nth-child(2) {
        animation-delay: 6s;
}

#photo img:nth-child(1) {
        animation-delay: 0s;
}
.stop #photo img:nth-child(1) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(2) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(3) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(4) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(5) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(6) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(7) {
        animation-play-state: paused;
}

.stop #photo img:nth-child(8) {
        animation-play-state: paused;
}



.lrcShow{
        position: absolute;
        top: 480px;
        font-family: 华文隶书;
        font-size: 45px;
text-align: center;
    display: block;
        white-space: nowrap;
        color: #000080;
       
        filter: drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;
}
.lrcShow::before{position: absolute;
        color: #FF0000;width: 0%;
      height: 100%;
text-shadow:2px 1px 1px #000;
        overflow: hidden;content:attr(data-lrc);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);
        }
@keyframes bgMove1{from{width:0%;filter:hue-rotate(0deg);}to{width:100%;filter:hue-rotate(360deg)contrast(100%)brightness(600%);}}
@keyframes bgMove0{from{width:0;filter:hue-rotate(360deg)contrast(120%)brightness(400%);}to{width:100%;filter:hue-rotate(0deg);}}

.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background: url('http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);background-position:0 0;background-size:100% 100%;}
.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
        #mtitle        {
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent;
                -webkit-text-stroke:1px rgb(0,71,171); background-image:url('https://z3.ax1x.com/2021/07/10/WSvNo4.gif');line-height:180%;
                font:bold 3em 华文隶书;
        }
</style>
<div id="outblk"><div id="testImg">
<divid="photo"><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909495450901604.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909521828974999.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909534928702875.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909563082132258.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909581244929944.jpg" /> <img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092910055041975926.jpg" /><img src="http://chuangshicdn.data.mvbox.cn/album/22/09/29/22092909481026411020.jpg" /> </div></div>
<div style="width:900px; height:600px;position:relative;margin-top: 20px;
        margin-left: 30px;overflow:hidden;">
<span id="mtitle" >我又想你了 - 雨墨妍</span>
</div>

<divclass="lrcShow"style="margin-left:-112px;"></div>
        <button id="testBtn"value="." style="position: absolute;width: 1024px; height: 600px;-webkit-background-clip : text;-webkit-text-fill-color:transparent;z-index: 1;border-radius:0%;"><divid="mDisk" class='mCtrl'></div></button>

</div>
<script type="text/javascript">
var lrcPlayerY = function() {
    return this.init.apply(this, arguments)
};
lrcPlayerY.prototype = {
    constructor: lrcPlayerY,
    init: function(opts) {
      lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
      this.showLrcObj = document.getElementById(opts.lrcShowID);
      this.audioCtrl = document.getElementById(opts.audioCtrl);
      this.lrcShowObj = document.getElementsByClassName('lrcShow');
      this.lrcVec = this.handleLrc(lyricTxt);
      this.genPlayer(opts.audioURL)
    },
    handleLrc: function(lyricTxt) {
      var parts = lyricTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
      var lrcs = new Array();
      for (let index = 0; index < parts.length; index++) {
            let chkTime = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
            if (chkTime) {
                tIdx = parts.lastIndexOf(']');
                if (tIdx > 0) lrcTxt = parts.substr(tIdx + 1);
                for (m = 0; m < chkTime.length; m++) {
                  ta = chkTime.substr(1).replace(']', '').split(/:/);
                  _t = ( + ta) * 60 + ( + ta);
                  if (lrcs.length == 0 && _t != 0) {
                        lrcs.push({
                            seconds: 0,
                            words: '正在播放...'
                        })
                  }
                  lrcs.push({
                        seconds: _t,
                        words: lrcTxt
                  })
                }
            }
      }
      return lrcs.sort(function(a, b) {
            return (a.seconds - b.seconds)
      })
    },
    showLrc: function(durTime) {
      this.lrcShowObj.innerHTML = this.lrcShowObj.dataset.lrc = this.lrcVec.words;
      this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
      this.lrcShowObj.style.setProperty('--durTime', durTime + 'ms');
      this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
      this.idx++
    },
    genPlayer: function(mUrl) {
      this.mObj = document.createElement("audio");
      this.mObj.loop = false;
      this.mObj.muted = false;
      this.mObj.autoplay = true;
      this.mObj.src = mUrl;
      this.lrcShowObj.appendChild(this.mObj);
      var that = this;
      var turn = 0;
      this.idx = 0;
      this.mObj.addEventListener('ended',
      function() {
            that.idx = 0;
            that.audioCtrl.classList.remove('z360z');
            this.play()
      });
      this.mObj.addEventListener('play',
      function() {
            that.audioCtrl.classList.add('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'running')
      });
      this.mObj.addEventListener('pause',
      function() {
            if (that.idx == 1 && this.currentTime < 1) {
                that.mObj.play();
                return false
            }
            that.audioCtrl.classList.remove('z360z');
            that.lrcShowObj.style.setProperty('--aniPlayState', 'paused')
      });
      this.mObj.addEventListener('error',
      function() {
            console.log("audio wrong, remove play start event");
            that.lrcShowObj.style.display = 'none';
            that.lrcShowObj.removeChild(this)
      });
      this.mObj.addEventListener('timeupdate',
      function() {
            if (that.idx < that.lrcVec.length) {
                if (this.currentTime >= that.lrcVec.seconds) {
                  if (that.idx < (that.lrcVec.length - 1)) {
                        that.showLrc((that.lrcVec.seconds - that.lrcVec.seconds) * 1000 - 100)
                  } else {
                        that.showLrc((this.duration - that.lrcVec.seconds) * 1000 - 100)
                  }
                }
            }
      });
      this.audioCtrl.addEventListener('click',
      function() {
            if (that.mObj.paused) {
                that.mObj.play()
            } else {
                that.mObj.pause()
            }
      })
    }
}
var image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
button.onclick = function() {
      if (this.value == '.') {
            image.classList.add('stop');
            this.value = '*';
}

else {
image.classList.remove('stop');
            this.value = '.';
}
    };
}

</script>

<script type="text/javascript">
var lrc =`我又想你了 - 雨墨妍
作词：唐古
作曲：贺一航
编曲：胜屹
夜深了却还是睡不着
只想听到你的声音
对你最深的思念
都变成了默不打扰
想问候却找不到借口
都说时间是最好解药
对你最痛的心跳
没有停止一分一秒
我又想你了
真的想你了
寂寞的星空失去了颜色
就像你给我的回忆
涂鸦着缤纷的失落
我又想你了
真的想你了
安静的呼吸没有了着落
遥远的拥抱太寂寥
我要的永远你做不到
夜深了却还是睡不着
只想听到你的声音
对你最深的思念
都变成了默不打扰
想问候却找不到借口
都说时间是最好解药
对你最痛的心跳
没有停止一分一秒
我又想你了
真的想你了
寂寞的星空失去了颜色
就像你给我的回忆
涂鸦着缤纷的失落
我又想你了
真的想你了
安静的呼吸没有了着落
遥远的拥抱太寂寥
我要的永远你做不到
我又想你了
真的想你了
寂寞的星空失去了颜色
就像你给我的回忆
涂鸦着缤纷的失落
我又想你了
真的想你了
安静的呼吸没有了着落
遥远的拥抱太寂寥
我要的永远你做不到
我要的永远你做不到
`;
var opts = {
        lrcTxt:lrc,
        //lrcShowID:'sLRC',
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://www.qqmc.com/up/kwlink.php?id=57590627.mp3'
};
new lrcPlayerY(opts);
</script>

红影 发表于 2022-10-6 19:45

这制作真漂亮，歌词和标题的颜色也漂亮，真棒的制作。欣赏亚伦老师好帖{:4_187:}

相约爱晚亭 发表于 2022-10-6 20:41

欣赏精美音画佳作！

醉美水芙蓉 发表于 2022-10-6 21:50

查看完整版本: HTML5基础音画 我又想你了 - 雨墨妍