论坛 › 翻唱朗诵 › 想妹妹 - 翻唱：辫子哥哥 TO：虎妞

小辣椒 发表于 2024-2-19 20:59

想妹妹 - 翻唱：辫子哥哥 TO：虎妞

<style>
#papa {margin: 150px 0 0 calc(50% - 781px);
                width: 1400px;
        height: 764px;
        background:#000000;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 0.3;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: 1; transition: 0.1s all ease;mix-blend-mode: lighten; }
#vid1 { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none;opacity: 1;z-index: -1; transition: 0s all ease;filter:hue-rotate(10deg)contrast(160%)brightness(100%);}
#tmsg {position: absolute;z-index: 91;
      font: normal 15px sans-serif;
      color: #ffffff;
         top:93.5%;
      left:85%;}

#prog {position: absolute;z-index: 91;
      width: 76%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:7%;
border-radius: 2px;}
#mplayer {z-index: 80;position:absolute;top:93%;left:3%;width:30px;height:30px;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:95%; left:calc(95% - 15px);font: normal 1.5em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#musickrc{width:80%;line-height:40px;position: absolute;position: absolute;left:10%;top:74%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#musickrc span {display:block;text-align:center; }

#bt{ width: 600px;; height: 60px;color: #ffffff; position: absolute; left:3%;top:96%;font-size: 20px; font-family:微软雅黑;z-index: 10; animation: wz 20s linear infinite ; }
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%); left: 80%;}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="testImg"><div id="bt">想妹妹 - 翻唱：辫子哥哥</div></di>
<video id="vid"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6d5e65d5535209ab6e36dc73596bbb1b_preview.mp4" muted autoplay loop></video>
<video id="vid1"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4" muted autoplay></video>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<divid="musickrc" >
<divid="wzsd1"><p id="musickrc01"style="color:#880000; text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></di>
<P id="musickrc02"style="color:#000080;text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/02/19/07.mp3" loop autoplay></audio>
<script >
var songkrc =`想妹妹
翻唱：辫子哥哥
帖赠：虎妞
那一年 妹送我走出那穷山沟
不开口不抬头 泪水默默流
到如今才知道 妹是我心头肉
不论在哪方走 有了妹妹我就没烦忧
想你深更半夜睡啊睡不透
你的黑发你的笑容梦里飘悠悠
想你外面呆后不如咱山沟
想来想去还是妹妹最温柔
虎妞必须记住保护好自己的眼睛
那一年 妹送我走出那穷山沟
不开口不抬头 泪水默默流
到如今才知道 妹是我心头肉
不论在哪方走 有了妹妹我就没烦忧
想你深更半夜睡啊睡不透
你的黑发你的笑容梦里飘悠悠
想你外面呆后不如咱山沟
想来想去还是妹妹最温柔
想你深更半夜睡啊睡不透
你的黑发你的笑容梦里飘悠悠
想你外面呆后不如咱山沟
想来想去还是妹妹最温柔
想你深更半夜睡啊睡不透
你的黑发你的笑容梦里飘悠悠
想你外面呆后不如咱山沟
想来想去还是妹妹最温柔
想来想去还是妹妹最温柔

`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML =lyric; }else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
/*暂停 播放按钮*/
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
        img.src="https://wj.zp68.com/lxx/yunhua/2024/02/19/dak.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://wj.zp68.com/lxx/yunhua/2024/02/19/tz.png";
}, false);})();

mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
/*进度条 进度时间*/
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
/*结束*/

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { aud.paused ?(vid.play()): (vid.pause()) };
/*结束*/

klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

<script>
/*控制动画*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*/
</script>
<script>
(function() {
let vid1 = document.querySelector('vid1');
let mState = () => aud.paused ?vid1.pause() :vid1.play();
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);});
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
var dts = [
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0540a449967dc511122be6c46d14e977_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6648b5e3e5a9f07b8fffd9689c73f4a5_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/736fdc82634c98f0146dc7492f29fa6a_preview.mp4",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/c4c773c5e33f7d0f9ccdc0db0f9f8dbf_preview.mp4",

];
var dt= document.getElementById('vid1');
var dtIdx = 1;
dt.onended = function(){
      dt.src = dts;
      dtIdx++;
      dtIdx %= dts.length;
}
</script>

小辣椒 发表于 2024-2-19 21:01

@虎妞

亲爱的，谢谢你的金嗓子演绎，好听的歌声，回个礼，辫子哥哥的翻唱，小辣椒做个帖，一起送上心意，希望你会喜欢{:4_179:}

小辣椒 发表于 2024-2-19 21:04

@亚伦
谢谢亚伦，用了你代码套用玩一个，我做了大屏，修改了一下位置，把歌曲名称移动到下面了，但大屏感觉滚动字范围大了一点，我去修改宽度600，left: 定位改了也是没有用，求速度完成，就这样发了

小辣椒 发表于 2024-2-19 21:04

也是谢谢辫子哥哥的好声音{:4_170:}@辫子哥哥

虎妞 发表于 2024-2-19 21:15

小辣椒 发表于 2024-2-19 21:01
@虎妞

亲爱的，谢谢你的金嗓子演绎，好听的歌声，回个礼，辫子哥哥的翻唱，小辣椒做个帖，一起送上心意 ...

来了，兴高采烈，大步流星的跑来了，哈哈

红影 发表于 2024-2-19 21:17

漂亮的视频，还有辫子哥哥好听的歌儿。亲爱的这个回礼真棒{:4_199:}

虎妞 发表于 2024-2-19 21:18

艾玛，这么高大上的大礼包，沉甸甸啊{:4_178:}

红影 发表于 2024-2-19 21:18

给亲爱的制作和辫子的演唱点赞，虎哥收礼开心{:4_199:}

虎妞 发表于 2024-2-19 21:19

像看电影一样，太美了{:4_199:}

小辣椒 发表于 2024-2-19 21:20

虎妞 发表于 2024-2-19 21:15
来了，兴高采烈，大步流星的跑来了，哈哈

亲爱的，回了就下，早点休息了，要多保重

小辣椒 发表于 2024-2-19 21:21

红影 发表于 2024-2-19 21:17
漂亮的视频，还有辫子哥哥好听的歌儿。亲爱的这个回礼真棒

亲爱的，我是求速度，直接套用亚伦的代码了，这样感觉快多了

虎妞 发表于 2024-2-19 21:22

哈，这帖子做的太精致，精美了，太养眼了，辫子哥哥这首歌也是唱的也是好到极致了，啥时候偷着练的呢，哈哈

小辣椒 发表于 2024-2-19 21:22

虎妞 发表于 2024-2-19 21:18
艾玛，这么高大上的大礼包，沉甸甸啊

没有啊，妞你要早休息，你看看辫子哥哥，回了就下去休息了，他说给你做榜样{:4_170:}

小辣椒 发表于 2024-2-19 21:24

虎妞 发表于 2024-2-19 21:22
哈，这帖子做的太精致，精美了，太养眼了，辫子哥哥这首歌也是唱的也是好到极致了，啥时候偷着练的呢，哈哈

辫子哥哥还特别谦虚，说他唱的不好{:4_170:}

虎妞 发表于 2024-2-19 21:25

小辣椒 发表于 2024-2-19 21:01
@虎妞

亲爱的，谢谢你的金嗓子演绎，好听的歌声，回个礼，辫子哥哥的翻唱，小辣椒做个帖，一起送上心意 ...

一直在循环着听，循环着看，及其的养眼，即饱了眼福又饱了耳福，真是强强联手，为我送上了最美，最珍贵的礼物，太感谢俩亲了{:4_185:}

虎妞 发表于 2024-2-19 21:26

小辣椒 发表于 2024-2-19 21:04
也是谢谢辫子哥哥的好声音

嗯嗯，这歌儿他唱的最棒了，尽显功底啊{:4_199:}

虎妞 发表于 2024-2-19 21:27

小辣椒 发表于 2024-2-19 21:04
@亚伦
谢谢亚伦，用了你代码套用玩一个，我做了大屏，修改了一下位置，把歌曲名称移动到下面了，但大屏感 ...

已经很完美了，亲爱哒

虎妞 发表于 2024-2-19 21:29

小辣椒 发表于 2024-2-19 21:01
@虎妞

亲爱的，谢谢你的金嗓子演绎，好听的歌声，回个礼，辫子哥哥的翻唱，小辣椒做个帖，一起送上心意 ...

俩亲用心的制作，用心的演唱，太喜欢了，谢谢了，感动的都不知道说啥好了，哈哈

梦油 发表于 2024-2-19 21:29

大屏真漂亮。辫子朋友唱得好棒啊！

红影 发表于 2024-2-19 21:30

小辣椒 发表于 2024-2-19 21:21
亲爱的，我是求速度，直接套用亚伦的代码了，这样感觉快多了

这个效果很美呢{:4_187:}

查看完整版本: 想妹妹 - 翻唱：辫子哥哥 TO：虎妞