论坛 › 欢乐水吧 › 精品音画《当》

亚伦影音工作室 发表于 2023-4-15 23:05

精品音画《当》

本帖最后由 亚伦影音工作室 于 2023-4-17 22:29 编辑 <br /><br /><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/79b875e5ba4a02ec152ed8085f972c3d.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:50px; transform: translate(-50%, 10px);font:normal 2.5em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%); filter: drop-shadow( 2px 2px 0px #ffffff);z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 40%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
#mplayer { position: absolute; width: 280px; height: 280px;left: 15%; z-index: 20;top:55%;overflow:hidden;}

#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%;
   }
@keyframes cover1{0% { width: 100%;letter-spacing: 0px; filter: blur(0px); height: 0;} to { width: 100%;height: 300%;} }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0;color:#000090;}100% { width: 100%; height: 300%; } }
</style>

<div id="papa">
<div id="mydiv"></div>

<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>



<div id="mplayer">
<img id="an"src="http://chuangshicdn.data.mvbox.cn/album/23/04/16/23041613295221266412.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/04/15/5b5a4663065d981843805d43a8e6f1bd.mp3" autoplay loop></audio>


<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `当DJ 散人版-DJ 散人
啊啊啊啊啊
啊啊啊啊啊
啊啊啊啊啊
啊啊啊
当山峰没有棱角的时候
当河水不再流
当时间停住日夜不分
当天地万物化为虚有
我还是不能和你分手
不能和你分手
你的温柔是我今生最大的守候
当太阳不再上升的时候
当地球不再转动
当春夏秋冬不再变化
当花草树木全部凋残
我还是不能和你分散
不能和你分散
你的笑容是我今生最大的眷恋
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
啊啊啊啊啊
啊啊啊啊啊
啊啊啊啊啊
啊啊啊
当太阳不再上升的时候
当地球不再转动
当春夏秋冬不再变化
当花草树木全部凋残
我还是不能和你分散
不能和你分散
你的笑容是我今生最大的眷恋
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
让我们红尘作伴活得潇潇洒洒
策马奔腾共享人世繁华
对酒当歌唱出心中喜悦
轰轰烈烈把握青春年华
啊啊啊啊啊
啊啊啊啊啊
啊啊啊啊啊
啊啊啊
`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
        mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image = document.getElementById("an"),
    button = document.getElementById("mplayer");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();
            this.value = '.';
      } else {
            image.stop();
            this.value = '';
      }
    };
}

</script>
<style>
#mydiv {
      margin: 0px auto;
      width: 1164px;
      height: 620px;
      
      overflow: hidden;
      cursor: pointer;
      position: relative;
      --state: paused;
}
.dot {
      position: absolute;
      left: 50%;
      bottom: -10px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: snow;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-640px); }}
</style>
<script>
Array.from({length: 400}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-50 + Math.random() * 100}deg;
                width: ${ww}px;
                height: ${ww}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: ani 10s ${Math.random() * key - 4}s infinite alternate var(--state);
      `;
      mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

亚伦影音工作室 发表于 2023-4-15 23:07

本帖最后由 亚伦影音工作室 于 2023-4-16 05:41 编辑

如果音乐失效请用：当点击人物即可暂停。


酷狗短地址：http://fs.ringop.kugou.com/KGTX/CLTX001/8dd53f7972982002101ec6b56be9a0d1.mp3

红影 发表于 2023-4-16 00:09

这个上传还没通过呢，暂时看不到效果。等明天再来看{:4_187:}

红影 发表于 2023-4-16 08:47

漂亮的喷泉粒子效果。歌词同步也很有特色，姑娘的伞还会动呢。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2023-4-16 08:49

这个点粒子时无法暂停啊，点姑娘可以暂停，但是姑娘旁边出来文字了{:4_173:}

亚伦影音工作室 发表于 2023-4-16 10:18

红影 发表于 2023-4-16 08:49
这个点粒子时无法暂停啊，点姑娘可以暂停，但是姑娘旁边出来文字了

手机看效果较查，甚至没有了

红影 发表于 2023-4-16 14:35

亚伦影音工作室 发表于 2023-4-16 10:18
手机看效果较查，甚至没有了

我是电脑看的，有时点上去，也会没有了。

查看完整版本: 精品音画《当》