亚伦影音工作室 发表于 2023-4-23 11:37

北方的雪南方的雨 - 王馨


<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0d4a347fff7a7325c5dbff847d74f485.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: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文隶书; color:#ff0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 21; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%);background-size: 10vmin 125%;background-position: center center; filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 380px; height: 520px;left: 50%; z-index: 20;top:10%;overflow:hidden;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
#an{position: absolute;
      top:0%; left:0%;
      width: 100%;
      height:100%;
   }
@keyframes cover1{0% {
opacity: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}

}
@keyframes cover2 {0% {
opacity: 1;clip-path:inset(0% 100% 0% 100% round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(200%);}
20% {
opacity: 1;clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
filter:hue-rotate(0deg)contrast(120%)brightness(800%);}
}
</style>
<div id="papa">
<div id="mydiv"></div>

<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>



<div id="mplayer">
<img id="an"src="https://www.kumeiwp.com/sub/filestores/2023/04/22/0d7c1626e1a24f2df2185a4aad010493.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music82975815.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 = `北方的雪南方的雨 - 王馨
词：张宏凯
曲：王梦秋
编曲：青音乐
吉他：黄海涛
笛子：贺俊宸
和声：青音和声组
混音：青音乐
外宣：李昕宇
出品人：亚伦
制作人：亚伦
出品：影音工作室
看到北方雪花飘起
我就思念着南方的你
问雪花雪花飘向那里
可否带我寻你的足迹
走过南方绵绵雨季
我又回到老地方等你
托雨滴雨滴捎去信息
不要忘了说好的归期
北方的雪南方的雨
飘飘洒洒凝结成
冰冷的记忆
问天问地再问问自己
何时才能让我见到你
北方的雪南方的雨
纷纷飞飞串连成
相思的泪滴
想你念你在每个朝夕
时时刻刻把你放心底
走过南方绵绵雨季
我又回到老地方等你
托雨滴雨滴捎去信息
不要忘了说好的归期
北方的雪南方的雨
飘飘洒洒凝结成
冰冷的记忆
问天问地再问问自己
何时才能让我见到你
北方的雪南方的雨
纷纷飞飞串连成
相思的泪滴
想你念你在每个朝夕
时时刻刻把你放心底
北方的雪南方的雨
飘飘洒洒凝结成
冰冷的记忆
问天问地再问问自己
何时才能让我见到你
北方的雪南方的雨
纷纷飞飞串连成
相思的泪滴
想你念你在每个朝夕
时时刻刻把你放心底
时时刻刻把你放心底
`;
        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: 40%;
      bottom: -10px;
      width:200PX;opacity:0;
      height:210PX;
      border-radius: 0%;
      background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/100% 100%;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
      let sp = document.createElement('span');
      let ww = Math.random() * 5 + 2;
      sp.className = 'dot';
      sp.style.cssText += `
                --deg: ${-100 + Math.random() * 200}deg;
               
               
                animation: ani 10s ${Math.random() * key - 2}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-23 11:40

点击头像即可暂停。

红影 发表于 2023-4-23 14:01

又是一款很漂亮的歌词同步，还加入了粒子动态和花朵绽放。真美。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2023-4-23 14:02

亚伦影音工作室 发表于 2023-4-23 11:40
点击头像即可暂停。

加入手型标志不就不用这样说明了{:4_173:}

梦缘 发表于 2023-4-23 16:15

好看的播放器，欣赏问好！{:4_171:}

冬天的雨 发表于 2023-4-23 23:28

没有看见小手，感觉不到播放器效果

小文 发表于 2023-4-27 17:14

朋友，我们南方也有雪下的盖，哈哈
页: [1]
查看完整版本: 北方的雪南方的雨 - 王馨