论坛 › 音乐沙龙 › 黄霄雲&王赫野《蝴蝶夫人》

杨帆 发表于 2024-12-19 19:19

黄霄雲&王赫野《蝴蝶夫人》

本帖最后由 杨帆 于 2024-12-20 04:58 编辑 <br /><br /><style>
#papa{margin: 130px 0 30px calc(50% - 721px);width: 1280px; height: 791px;;box-shadow: 2px 2px 5px 2px #cccccc, 0px 0px 0px 1px #880000; overflow:hidden;background: url('https://cccimg.com/view.php/ec44b2131ab15cb2f5d0f1c4548799eb.gif') no-repeat center/cover;border: 1px solid;display: grid;position: relative;z-index: 1; --state: running;pointer-events: none;        }
#mplayer {position:absolute;top:5%;left:2%;cursor: pointer;pointer-events: auto;font: normal 2.3em/0em 华文隶书;color:#fff000;z-index: 4;animation: rot 0.5s linear infinite;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 90%;
      font:normal 3em 华文新魏;
      font-weight:200;
      color: #000080;
      white-space: pre;
      -webkit-background-clip: text;
      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 0%;transform:rotateY(0deg)scale(1)}100% { width: 100%;transform:rotateY(0deg)scale(1);filter:hue-rotate(360deg)}}
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: 2;background: url('https://pic.imgdb.cn/item/67639983d0e0a243d4e63d55.gif') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
10% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
20% {opacity: 1;transform: scale(4);}
60% {opacity: 1;transform: scale(1)rotateY(-180deg);}
70% {opacity: 1;transform: scale(1)rotateY(-180deg);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
80% {opacity: 1;transform: scale(4)rotateY(-180deg);}
100% {opacity: 0;transform:scale(4)rotateY(-180deg);}
}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index: 4;mix-blend-mode: lighten; }
#papa:hover #fullscreen { display:block ;}
#fullscreen{ position: absolute; top:5%; left:87%;font: normal 2.3em/0em 华文隶书;color:#fff000;z-index: 6;animation: rot 0.5s linear infinite; opacity: .9;cursor: pointer;pointer-events: auto;z-index: 6;}
@keyframes rot{0% {opacity: 1;transform: scale(1);}100% {opacity: 1;transform:scale(1);filter:hue-rotate(360deg)contrast(100%)brightness(250%);}}
#vid1 { position: absolute; width: 100%; height: 35%; left:0px; top:-100px;object-fit: cover; mix-blend-mode: screen;-webkit-mask: linear-gradient(red, transparent); pointer-events: none; pointer-events: none; }
#vid2 { position: absolute; width: 150%; height: 110%; left:-28%; top:0px;object-fit: cover; mix-blend-mode: screen;-webkit-mask: linear-gradient(red, transparent); pointer-events: none; pointer-events: none;z-index:5;}
#vid3 { position: absolute; width: 150%; height: 110%; left:-28%; top:0px;object-fit: cover; mix-blend-mode: screen;-webkit-mask: linear-gradient(red, transparent); pointer-events: none; pointer-events: none;z-index:6;}
</style>
<div id="papa">
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4" autoplay loop muted></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d04564c32f7.mp4" autoplay loop muted></video>
<divid="img_border" ></div>
<div id='dt' ><imgid="webpGif" src="https://pic.imgdb.cn/item/65b5f220871b83018a1a6e04.webp"alt="WebP Animation"
width="55%" height="55%"></div>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc="花潮lrc在线"></div>
<div id="mplayer" ><span id="bf">暂停</span></div>
<audio id="aud" src="https://cccimg.com/view.php/ca019bbaf17490e37e5ac1a794a64761.mp3" autoplay="" loop=""></audio>
</div>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `蝴蝶夫人 - 王赫野&黄霄雲
词Lyricist：李浩瑞&赵大白&刘涛
曲Composer：刘涛&李浩瑞&林晨阳
制作人Producer：刘涛
监制Executive Producer：陶诗
编曲Arranger：谭侃侃&黎子琨
吉他Guitar：张凇&谭侃侃
混音师Mixing Engineer：李水泽宁@WaterSound Studio&李越@野火春⻛
母带后期混音师Mastering Engineer：李水泽宁@WaterSound Studio
和声Backing Vocals：黄霄雲&李浩瑞&王赫野
和声编写Backing Vocals Design：李浩瑞
配唱制作人Vocal Producer：刘涛&李浩瑞
录音师Recording Engineer：陈冠男&罗颂&谭笑聪
人声编辑Vocal Editing：刘涛&祝薇
视觉设计Visual Design：kidult.
艺人统筹：田维峰&高赫阳
推广策划Promotion Planning：左三好
联合企划：凌联兴&张北
混音棚：好乐无荒&野火春⻛工作室
录音棚Recording Studio：Show Studio&Ready Steady Sound&好乐无荒录音棚(北京)
企划营销Project Marketing：好乐无荒(⻓沙)
制作公司Manufacturing Company：好乐无荒(北京)
OP&SP：好乐无荒
特别鸣谢：梦响强音文化传播（上海）有限公司
联合发行：好乐无荒x腾讯音乐人

王赫野：
现在还不明白
关于你的离开
睡在冰冷的海
我无法释怀
黄霄雲：
一直以来对你的依赖
都变成了一种阻碍
合：
才发现
心空出了一块
合：
雨下了整夜
再也没有再爱上谁
Oh oh oh
黄霄雲：
要告别在梦里才有的日月
这诗要怎么写
合：
而我却在这个没有了你的世界
王赫野：
你是卷起狂风的蝴蝶
黄霄雲：
不必在意 我这失重的落叶
王赫野：
离开了我你能否好一些
好一些
黄霄雲：
现在还不明白
明白你的离开
离开我的未来
未来在人海
王赫野：
一直以来对你的依赖
被隔开了万里以外
合：
才发现
心空出了一块
合：
雨下了整夜
再也没有再爱上谁
Oh oh oh
要告别在梦里才有的日月
这诗要怎么写
留在落笔以前
没有了你的世界
你是带走昼夜的蝴蝶
不必抱歉
我这失重的句点
离开了我你能否好一些
合：
失去你的圆缺
暴雨熄灭了蝴蝶
不完整地赴约
诗篇要怎么婉约
浪费了满月
像黑夜接替了黑夜
要怎么去告别能怎么说
黄霄雲：
下了整夜
再也没有再爱上谁
Oh oh oh
王赫野：
要告别在梦里才有的日月
合：
诗要怎么写
而我却在这个没有了你的世界

`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
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 showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
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 = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };
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/webp");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var mState = () => {
    papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running')
    mplayer.title = aud.paused ? '播放' : '暂停';
    aud.paused ? (vid1.pause(),vid2.pause(),vid3.pause(),image0.stop(),webpGif0.stop()) :(vid1.play(),vid2.play(),vid3.play(),image0.play(),webpGif0.play());
};
    aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
    bf.onclick = () => aud.paused ? aud.play() : aud.pause();
</script><script>
var image= document.getElementById("webpGif");
var aud= document.getElementById('aud');
    var mplayer=document.getElementById("bf");
bf.onclick = function() {
if ( bf.innerText == '暂停') {
            webpGif.stop();aud.pause();
          bf.innerText="播放";
      } else {
          webpGif.play();aud.play();
            bf.innerText="暂停";
      }
    };
</script>

起个网名好难 发表于 2024-12-19 19:56

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

杨帆 发表于 2024-12-19 20:23

起个网名好难 发表于 2024-12-19 19:56


难难老师，您好！此贴全屏转换不能接续，不知问题在哪里？

请老师看看是什么原因，帮助解决，由衷感谢{:4_191:}

红影 发表于 2024-12-19 20:27

很奇特的制作，前面的一张图图好像在翻转。
欣赏杨帆好帖{:4_199:}

红影 发表于 2024-12-19 20:27

这个全屏点击后就暂停了？{:4_203:}

杨帆 发表于 2024-12-19 20:29

红影 发表于 2024-12-19 20:27
这个全屏点击后就暂停了？

是啊，不知问题在哪里？你也看看吧

杨帆 发表于 2024-12-19 20:31

红影 发表于 2024-12-19 20:27
很奇特的制作，前面的一张图图好像在翻转。
欣赏杨帆好帖

是的，控制不好动图，又加了三个视频

绿叶清舟 发表于 2024-12-19 20:43

这个效果漂亮，欣赏杨帆的精彩

杨帆 发表于 2024-12-19 20:47

绿叶清舟 发表于 2024-12-19 20:43
这个效果漂亮，欣赏杨帆的精彩

谢谢清舟版主支持与鼓励，祝开心{:4_204:}

樵歌 发表于 2024-12-19 20:51

欣赏精彩制作。{:4_174:}

起个网名好难 发表于 2024-12-19 20:56

杨帆 发表于 2024-12-19 20:23
难难老师，您好！此贴全屏转换不能接续，不知问题在哪里？

请老师看看是什么原因，帮助解决，由衷感谢 ...

抱歉，看不懂{:5_102:}

杨帆 发表于 2024-12-19 21:27

樵歌 发表于 2024-12-19 20:51
欣赏精彩制作。

谢谢樵歌管理员支持与鼓励，祝开心{:4_191:}

小辣椒 发表于 2024-12-19 21:28

杨帆这个制作，怎么全屏欣赏点击会停止

杨帆 发表于 2024-12-19 21:29

起个网名好难 发表于 2024-12-19 20:56
抱歉，看不懂

不急，老师方便时再看吧，谢谢老师{:4_190:}

杨帆 发表于 2024-12-19 22:04

小辣椒 发表于 2024-12-19 21:28
杨帆这个制作，怎么全屏欣赏点击会停止
是，全屏切换不能自然接续，请小辣椒看看问题在哪里呢？谢谢{:4_204:}

小辣椒 发表于 2024-12-19 22:06

杨帆 发表于 2024-12-19 22:04
是，全屏切换不能自然接续，请小辣椒看看问题在哪里呢？谢谢
哇塞，看见难难老师都看不懂，小辣椒肯定看不懂了

杨帆 发表于 2024-12-19 22:08

本帖最后由 杨帆 于 2024-12-19 22:10 编辑

小辣椒 发表于 2024-12-19 22:06
哇塞，看见难难老师都看不懂，小辣椒肯定看不懂了
好呀，怎么发给你呢？自己“鼓捣”部分较多

小辣椒 发表于 2024-12-19 22:09

杨帆 发表于 2024-12-19 22:08
好呀，怎么发给你呢
我发现上面难难老师说看不懂，小辣椒就更加看不懂了，不好意思的

杨帆 发表于 2024-12-19 22:13

小辣椒 发表于 2024-12-19 22:09
我发现上面难难老师说看不懂，小辣椒就更加看不懂了，不好意思的

我想难难老师可能忙着呢，你也可以看看呀{:4_187:}

红影 发表于 2024-12-19 23:25

杨帆 发表于 2024-12-19 20:29
是啊，不知问题在哪里？你也看看吧

我不懂啊，全屏黑黑不是有过封装么？

查看完整版本: 黄霄雲&王赫野《蝴蝶夫人》