论坛 › 欢乐水吧 › 再别康桥

有声有色 发表于 2026-6-10 11:28

再别康桥

本帖最后由 有声有色 于 2026-7-30 09:51 编辑 <br /><br /><DIV style="LEFT: -440px; WIDTH:500px; POSITION: relative; TOP:-30px">
<div style="background-image:url();width:960px;height:675px;" data-title="">
<DIV style="LEFT: 200px; WIDTH: 1080px; POSITION: relative; TOP:+20px">
<video src="https://v6-dy.ixigua.com/24cfad1f7f788cccd0a4e4904d0b8258/6a6ab81a/video/tos/cn/tos-cn-ve-15c000-ce/ocvLziWEABAkiHcJkzPbpaMLN1QmIsDawBFAL/?a=6383&ch=0&cr=0&dr=0&cd=0%7C0%7C0%7C0&cv=1&br=1784&bt=1784&cs=0&ds=6&ft=WEnoM-DrffPddV~SD12NvAq-fXzdPrK_DRouRkabhcb1ejVhWL6&mime_type=video_mp4 " loop="" autoplay="" width="100%"></video>

梦江南 发表于 2026-6-10 12:07

这么长的诗朗读，口型很准。太赞了！{:4_199:}

梦江南 发表于 2026-6-10 12:09

表情很到位，这是怎么做到的？

有声有色 发表于 2026-6-10 12:31

梦江南 发表于 2026-6-10 12:09
表情很到位，这是怎么做到的？

做一张拿着话筒的美女图片，不是动图，在网上下载一段朗诵，到即梦里有一个数字人功能，在数字人里加美女图片，在音频里加上朗诵，朗诵首先要在剪影里，剪成每段15秒）（因为即梦只能做15秒积分30分）我这段要分10次，因为积分做了三天，数字人里自动会对口型，你先试试用一张图片，做出来看看口型能对是吗

梦江南 发表于 2026-6-10 12:37

有声有色 发表于 2026-6-10 12:31
做一张拿着话筒的美女图片，不是动图，在网上下载一段朗诵，到即梦里有一个数字人功能，在数字人里加美女 ...

这种做法我看过了，很麻烦，我没做。

有声有色 发表于 2026-6-10 12:43

梦江南 发表于 2026-6-10 12:37
这种做法我看过了，很麻烦，我没做。

要么到我上次给你的Dramf软件里 去做，这个比较省力，但是我觉的没有以前好了

梦江南 发表于 2026-6-10 14:12

有声有色 发表于 2026-6-10 12:46
帮我看看这个代码为啥字幕放不出来

<style>
.container0 {
margin: 50px 0;
width: 1024px;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #0bf46d;
overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://pic1.imgdb.cn/item/6a27b491edae85a6284e908b.gif') no-repeat center/cover;
position: relative;
}

.photo {
position: absolute;
top:0px;
left:0px;
width: 100%;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #f1a81a;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
background-size: cover;
box-sizing: border-box;
animation: round 32s infinite;
opacity: 0;
}
@keyframes round {
0% {opacity: 1;transform: translateX(-503px)translateY(-100px) rotate(130deg) rotateY(-50deg) rotateX(100deg) scale(0.2);filter:hue-rotate(360deg)}
8% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
15% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}

img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) { animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
    </style>

<div class="container0">
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b275edae85a6284e728e.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b49cedae85a6284e9098.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b489edae85a6284e9082.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b47dedae85a6284e906f.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b472edae85a6284e906a.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b467edae85a6284e9063.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b45cedae85a6284e9058.gif" alt="" />
<img class='photo'src="https://pic1.imgdb.cn/item/6a27b44bedae85a6284e904a.gif" alt="" />

<div class="container">
<audio autoplay class="audio" id="MusicPlayer" src="https://upfile.mp3.wf/view.php/83fd4e9c6734c19c2855f23f53bfb3dc.mp3" controls loop style="width:1px;height:1px;z-index:1;"></audio>

<div class="items1" style="transform: scale(.55);position: absolute;top:-130px; left:750px;z-index: 70;">
<div class="img_border" id="aplay" style="width:150px;height:150px;background:url(https://pic1.imgdb.cn/item/66c44286d9c307b7e95b5f57.gif)-30px 0px/160% 100%;position:absolute;top:70px;left:40px;z-index:20;border-radius:50%;border:85px solid #800000; box-shadow:0px 0px 5px #ffffff;"></div>
<p id="picBtn" style="width:450px;height:450px;position:absolute;top:-30px;left:0px;background:'';z-index:20;"></p>
</div>

<div class="items" >
<div class="lrc">
<ul id="ullrc"></ul>
</div>
</div>
</div>

<style>
.container{
    width:960px;
    height:180px;
    margin:0;
    position:absolute;
    top:420px;
    left:30px;
    z-index:550;
}
.container .lrc{
    width:100%;
    height:100%;
    overflow:hidden;
    filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0)drop-shadow(#ffffff 0 -1px 0);
    position:relative;
    top:0;
    left:0;
}
.container .lrc #ullrc{
    width:100%;
    padding:0;
    list-style:none;
    transition:0.3s all ease;
    margin:0;
}
/* 歌词普通样式 */
.container .lrc #ullrc li{
    height:80px;
    line-height:90px;
    font-family:悟空大字库;
    font-size:24px; /* 这里从0改成24，能看见了 */
    color:#ffff00; /* 黄色更显眼 */
    font-weight:normal;
    transition:.3s all ease;
    text-align:center;
}
/* 高亮歌词 */
.container .lrc #ullrc li.active{
    font-size:46px;
    color:#ff0000;
    font-weight:bold;
}
/* 光碟旋转 */
.container .img_border{
    display:inline-block;
    width:400px;
    height:400px;
    position:absolute;
    text-align:center;
}
.z360z{
    width:400px;
    height:400px;
    animation:rot 10s linear infinite;
}
@keyframes rot{
    0% {transform: rotateZ(0deg);}
    100% {transform: rotateZ(360deg);}
}
.audio{
    z-index:1;
    opacity:0;
    width:1px;
    height:1px;
    position:absolute;
}
</style>

<style>
.items{
    z-index:1540;
    animation:slider 0.26s linear infinite;
}
@keyframes slider{
    from {filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
    50% {filter:hue-rotate(180deg)contrast(140%)brightness(150%);}
    to {filter:hue-rotate(0deg)contrast(140%)brightness(100%);}
}
</style>

<style>
.items1{
    animation:slider1 1s linear infinite;
}
@keyframes slider1{
    from {filter:hue-rotate(360deg);}
    to {filter:hue-rotate(0deg);}
}
</style>

<script>
var lrc = `
栽梅
种竹近深闺
代代相交竹与梅
梅在竹边竹作伴
竹在梅边梅奉陪
梅欲去时难留竹
竹要相留难脱梅
梅爱竹 竹贪梅
相亲相近竹与梅
思君泪湿湘妃竹
孟浩然踏雪去寻梅
炮竹一声催腊去
忽闻梅到报春回
把接风酒摆在梅亭上
与君同饮酒三杯
今朝同赏竹与梅
`;

function $(id) {
    return document.getElementById(id);
}

function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = parseFloat(timeParts) || 0;
      var min = parseInt(timeParts) || 0;
      seconds = min * 60 + seconds;
      var words = twoParts || "";
      return {
            seconds: seconds,
            words: words.trim()
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    var ul = $("ullrc");
    ul.innerHTML = "";
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      ul.appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index < 0) return;

    var liHeight = 80;
    var ulHeight = 180;
    var top = index * liHeight - ulHeight / 2 + liHeight / 2;
    if (top < 0) top = 0;
    $("ullrc").style.marginTop = -top + "px";

    var allLi = $("ullrc").getElementsByTagName("li");
    for (var i = 0; i < allLi.length; i++) {
      allLi.classList.remove("active");
    }
    if (allLi) allLi.classList.add("active");
}

function getLrcIndex() {
    var time = $("MusicPlayer").currentTime;
    for (var i = 0; i < lrcArray.length; i++) {
      if (lrcArray.seconds > time) {
            return i - 1;
      }
    }
    return lrcArray.length - 1;
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>

<script>
var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
    if(mu.paused){
      mu.play();
      btn.style.background = "url('http://pan.yinhuabbs.cn/view.php/6849264b2d30ed1a053a208960fd4217.png') 0 0 / 100% 100%";
    }else{
      mu.pause();
      btn.style.background = "url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png') 0 0 / 100% 100%";
    }
}

mu.addEventListener("ended", function(){
    btn.style.background = "url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png') 0 0 / 100% 100%";
});
</script>

<script>
var my_audio = document.getElementById("MusicPlayer");
my_audio.onended = function(){
    document.getElementById("aplay").className = "img_border";
};
my_audio.onplaying = function(){
    document.getElementById("aplay").className = "img_border z360z";
};
my_audio.onpause = function(){
    document.getElementById("aplay").className = "img_border";
};
</script>

梦江南 发表于 2026-6-10 14:14

有声有色 发表于 2026-6-10 12:46
帮我看看这个代码为啥字幕放不出来

你复制这代码，歌词就会出来了，动画非常好。就是评弹曲啊！

有声有色 发表于 2026-6-10 14:21

梦江南 发表于 2026-6-10 14:14
你复制这代码，歌词就会出来了，动画非常好。就是评弹曲啊！

我发上去了 好像有条白框

梦江南 发表于 2026-6-10 14:27

有声有色 发表于 2026-6-10 14:21
我发上去了 好像有条白框

测试很好的。

有声有色 发表于 2026-6-10 14:40

梦江南 发表于 2026-6-10 14:27
本帖最后由 梦江南 于 2026-6-10 14:36 编辑
.container0 {
margin: 50px 0;

https://s3.bmp.ovh/2026/06/10/ngkoZl50.png

有声有色 发表于 2026-6-10 14:41

梦江南 发表于 2026-6-10 14:27
本帖最后由 梦江南 于 2026-6-10 14:36 编辑
.container0 {
margin: 50px 0;


下面有框框

梦江南 发表于 2026-6-10 15:00

有声有色 发表于 2026-6-10 14:41
下面有框框

是的，测试好好的，发到论坛就有黄框了{:4_201:}越改越改不好

有声有色 发表于 2026-6-10 15:03

梦江南 发表于 2026-6-10 15:00
是的，测试好好的，发到论坛就有黄框了越改越改不好

算了我另外再做一个 谢谢了，删了吧

梦江南 发表于 2026-6-10 15:33

有声有色 发表于 2026-6-10 15:03
算了我另外再做一个 谢谢了，删了吧

你这代码是从哪里搞来的？别人的帖子就是这代码吗？

梦江南 发表于 2026-6-10 15:35

有声有色 发表于 2026-6-10 15:03
算了我另外再做一个 谢谢了，删了吧
对不起，水平太有限。

有声有色 发表于 2026-6-10 15:44

梦江南 发表于 2026-6-10 15:33
你这代码是从哪里搞来的？别人的帖子就是这代码吗？

这也是花潮里的已经7到8年了 我是今天没事翻花潮以前的音画。

有声有色 发表于 2026-6-10 15:47

梦江南 发表于 2026-6-10 15:35
对不起，水平太有限。

你那么客气干嘛你比我强多了，我对音画真是一窍不通，我是）（动画 音画）的大概70到80层里去翻出来的

梦油 发表于 2026-6-10 19:45

口型对的真好，不容易啊。

红影 发表于 2026-6-10 21:22

做这么长的对口型真的不容易，欣赏有声有色老师好帖{:4_187:}

查看完整版本: 再别康桥