论坛 › 动画音画 › TO黑黑老师——沪剧大雷雨

有声有色 发表于 2023-6-24 13:36

TO黑黑老师——沪剧大雷雨

<style>
#mydiv {
      margin: 0 0 0 calc(50% - 651px);
      width: 1140px;
      height: 640px;
      background: url('https://pic.imgdb.cn/item/649676b01ddac507cc298a7a.gif');
      box-shadow: 0 0 8px 0 #000;
      display: grid;
      place-items: center;
      position: relative;
}
#lrc {
      position: absolute;
      width: fit-content;
      height: fit-content;
      top: 45%;
      font: bold 2.4em Sans-serif;
      color: #0cf20c;
      text-shadow: 1px 5px 5px #f0091a;
      white-space: pre;
      display: inherit;
      place-items: inherit;
      user-select: none;
      --state: paused; --motion: cover2; --tt: 2s;
}
#lrc::before, #lrc::after { position: absolute; content: ''; cursor: pointer; }
#lrc::before {
      content: attr(data-lrc);
      width: 100%;
      height: 100%;
      white-space: pre;
      width: 0;
      left: 0;
      color: orange;
      overflow: hidden;
      animation: var(--motion) var(--tt) linear forwards var(--state);
}
#lrc::after {
      width: 70px;
      height: 70px;
      bottom: 220px;
       background: green;
      border-radius: 0%;
      opacity: .7;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      animation: rot 6s infinite linear var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
      <div id="lrc" data-lrc="HUACHAO">HUACHAO</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/105544.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
      let mKey = 0, mFlag = true, slip = 0;
      let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.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); };
      aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', () => calcKey());
      lrc.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小辣椒 发表于 2023-6-24 16:14

欣赏有声有色好制作，这个黑黑老师新分享的。有声有色速度的制作出来了{:4_199:}

红影 发表于 2023-6-24 16:24

这个是沪剧了，还是双声道的。好听。黑黑收礼开心@马黑黑{:4_187:}

红影 发表于 2023-6-24 16:26

这是最新代码呢，歌词同步很准确，欣赏有声有色老师好帖{:4_187:}

有声有色 发表于 2023-6-24 16:35

小辣椒 发表于 2023-6-24 16:14
欣赏有声有色好制作，这个黑黑老师新分享的。有声有色速度的制作出来了

是黑黑老师最新版的，我只能照葫芦画瓢，像把五角星的播放器换成其他的我就，换不来。苦啊

有声有色 发表于 2023-6-24 16:37

红影 发表于 2023-6-24 16:26
这是最新代码呢，歌词同步很准确，欣赏有声有色老师好帖

是黑黑老师最新版的，我只能照葫芦画瓢，像把五角星的播放器换成其他的我就，换不来。苦啊，歌词同步我现在只要仔细一点就能基本同步了

小辣椒 发表于 2023-6-24 16:37

有声有色 发表于 2023-6-24 16:35
是黑黑老师最新版的，我只能照葫芦画瓢，像把五角星的播放器换成其他的我就，换不来。苦啊

效果很好~~谢谢有声有色分享，制作辛苦了

马黑黑 发表于 2023-6-24 17:51

红影 发表于 2023-6-24 16:24
这个是沪剧了，还是双声道的。好听。黑黑收礼开心@马黑黑

听戏对我来说是一种折磨，看看还差不多。不过还是非常感谢，用心了{:4_170:}

红影 发表于 2023-6-24 18:49

有声有色 发表于 2023-6-24 16:37
是黑黑老师最新版的，我只能照葫芦画瓢，像把五角星的播放器换成其他的我就，换不来。苦啊，歌词同步我现 ...

能用来表现想要的帖子内容，也就达到效果了啊，那个不用换花样啊，能根据背景修改颜色就好{:4_187:}

红影 发表于 2023-6-24 18:51

马黑黑 发表于 2023-6-24 17:51
听戏对我来说是一种折磨，看看还差不多。不过还是非常感谢，用心了

感受一下戏曲的唱腔，也是一种美妙的感觉呢{:4_187:}

马黑黑 发表于 2023-6-24 19:28

红影 发表于 2023-6-24 18:51
感受一下戏曲的唱腔，也是一种美妙的感觉呢

可我起鸡皮疙瘩呢

梦缘 发表于 2023-6-24 20:26

欣赏老师的精彩，好听！{:4_187:}

红影 发表于 2023-6-24 23:32

马黑黑 发表于 2023-6-24 19:28
可我起鸡皮疙瘩呢

那是因为你没有沉浸到戏剧的场景里。

马黑黑 发表于 2023-6-24 23:32

红影 发表于 2023-6-24 23:32
那是因为你没有沉浸到戏剧的场景里。

沉浸不了

红影 发表于 2023-6-25 00:09

马黑黑 发表于 2023-6-24 23:32
沉浸不了

那就不沉，每个人的兴趣爱好都不一样。

马黑黑 发表于 2023-6-25 07:51

红影 发表于 2023-6-25 00:09
那就不沉，每个人的兴趣爱好都不一样。

你也许知道鲁迅和梅兰芳的恩怨。我能理解鲁迅对戏剧的见解。

有声有色 发表于 2023-6-25 08:31

梦缘 发表于 2023-6-24 20:26
欣赏老师的精彩，好听！

谢谢支持

红影 发表于 2023-6-25 16:44

马黑黑 发表于 2023-6-25 07:51
你也许知道鲁迅和梅兰芳的恩怨。我能理解鲁迅对戏剧的见解。

哦，这个真的一点都不知道诶。我去搜搜。

鲁迅在1934年11月5～6日两天，在《中华时报•动向》上又发表猛烈抨击梅兰芳京剧艺术的文章，题名为《略论梅兰芳及其他》。令人费解的是，这是梅兰芳在美国演出成功载誉归国，受到国人空前热烈欢迎与祝贺之后不久的日子里，鲁迅在百忙与疾病缠身中撰写的挖苦、抨击梅兰芳的评论文章。鲁迅在文中说：“梅兰芳不是生，是旦，不是皇家的供奉，是俗人的宠儿，这就使士大夫敢于下手了。士大夫是常要夺取民间的东西的，将竹枝词改为文言，将‘小家碧玉作为姨太太，但一沾他们的手，这东西就要跟着他们灭亡。他们将他从俗众中提出，罩上玻璃罩，做起紫檀架子来。教他用多数人听不懂的话，缓缓的《天女散花》，扭扭的《黛玉葬花》，先前都是他做戏的，这时却成了为他而做，凡有新编的剧本，都只为了梅兰芳，而且是士大夫心目中的梅兰芳。雅是雅了，但多数人看不懂，不要看，还觉得自己不配看了。名声的起灭，也如光的起灭一样，起的时候，从近到远，灭的时候，远处倒还留着余光。梅兰芳游日、游美其实已不是光的发扬，而是光在中国的收敛。他竟然没有想到从玻璃罩里跳出，所以这样的搬出去还是这样的搬回来”，竭力抨击梅兰芳的京剧艺术与人生。

马黑黑 发表于 2023-6-25 18:17

红影 发表于 2023-6-25 16:44
哦，这个真的一点都不知道诶。我去搜搜。

鲁迅在1934年11月5～6日两天，在《中华时报•动向》上 ...
鲁迅抨击梅兰芳是有原因的。主要是：

鲁迅看不惯男人扮女角；
鲁迅看不惯慢节奏、动作没有实际意义的舞台艺术；
鲁迅看不惯以梅先生为主提出的所谓京剧救国的口号；
鲁迅不认同京剧是国粹的观点，麻将也不是；
…………

总之，鲁迅一点也不欣赏梅兰芳，对之是全盘否定的。后来，新中国成立后，一些纪念鲁迅的重大活动，梅兰芳一次都没有参加。

红影 发表于 2023-6-25 20:58

马黑黑 发表于 2023-6-25 18:17
鲁迅抨击梅兰芳是有原因的。主要是：

鲁迅看不惯男人扮女角；


别的不说，京剧救国貌似说不通，没有科技和军事力量，光靠京剧肯定是不行的。

查看完整版本: TO黑黑老师——沪剧大雷雨