论坛 › 欢乐水吧 › 昨夜有人在流泪- 梦歆冉【东篱闲人图片】

亚伦影音工作室 发表于 2024-5-26 14:06

昨夜有人在流泪- 梦歆冉【东篱闲人图片】

本帖最后由 亚伦影音工作室 于 2024-5-26 14:11 编辑 <br /><br /><style>    #papa { margin:0px 0 20px calc(50% - 680px); width: 1164px; height: 640px; background:#222 url(https://pic.imgdb.cn/item/65fade049f345e8d03820549.jpg%22)no-repeat center/cover;box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;mix-blend-mode: lighten;}
#dt img{ width: 100%;}
#pinpu { position: absolute; width: 200px; height: 80px; z-index: 9; top:90%;left:6%;z-index: 4;}
#pinpu img{ width: 100%;}

#pinpu1 { position: absolute; width: 65%; height: 25px; z-index: 9; top:94%;left:45%;z-index: 4;mix-blend-mode: lighten;}
#pinpu1 img{ width: 65%;height: 25px;}

#bfqbj{margin: 5% 2%;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/66457360d9c307b7e9ffe724.png)no-repeat 0px 10px/320px 50px;z-index: 5;transform: scale(0.7);}
#prog {position: absolute;z-index: 6;
      width: 300px;
      height: 3px;
      cursor: pointer;
         top:10px;

left:0px;background:#F1612A linear-gradient(to right,#F1612A, #F1612Avar(--prg), white 0);
      color: #ffffff;
      --prg: 0%; --state: paused;}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:0px; top: -20px; }
#prog::after { right: 0px; content: attr(data-du); ; top: -20px; }

#mplayer {z-index: 80;position:absolute;top:16px;left:140px;width:30px;height:30px;cursor: pointer;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#lb{ position: absolute;top: 22px;right:35px; width: 20px; height: 18px; }
#lb img{ width: 100%; height: 100%;   opacity: 1; }
@keyframes rot { to { transform: rotate(1turn); } }
.lrc{position: absolute;z-index: 90;transform:rotate(-14deg);
    width: 960px;
    height: 100px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        overflow: hidden;
    display: block;
    margin: 460px -140px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 20px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #000;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 23px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;


</style>
<div id="papa">
<divid="dt"><img id="dtImg" src="https://pic.imgdb.cn/item/64530d620d2dde57771b08ca.gif" alt="" /></div>
<audio id="aud" src="https://s10.krakenfiles.com/uploads/26-05-2024/D1GLppAbbx/music.m4a" autoplay loop></audio>
        <div id="pinpu"> <img id="pinpuImg" src="https://pic.imgdb.cn/item/66484532d9c307b7e9632754.gif" alt="" /></div>
<div id="pinpu1"> <img id="pinpu1Img" src="https://pic.imgdb.cn/item/66506123d9c307b7e973b5c1.gif" alt="" /></div>
        <div id="bfqbj">
<div data-cu="00:00" data-du="00:00" id="prog" title="" style="--state: running; --prg: 48.40552205703211%;"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<div id="lb"> <img id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
</div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

</div>

<script>
aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        /* */
(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://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();



let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);


aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
});

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
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;
      };
/**/

/**/
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            imagelb.style.opacity = ''; imagepinpu.style.opacity = '';imagedt.style.opacity = '';imagepinpu1.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 imagelb= document.getElementById("lbImg");
var imagedt= document.getElementById("dtImg");
var imagepinpu= document.getElementById("pinpuImg");
var imagepinpu1= document.getElementById("pinpu1Img");
mplayer.onclick =function() { aud.paused ?(aud.play(),imagelb.play(),imagepinpu.play(),imagedt.play(),imagepinpu1.play()): (aud.pause(),imagelb.stop(),imagepinpu.stop(),imagedt.stop(),imagepinpu1.stop())};
</script>
<script >
var lrc = `昨夜有人在流泪 - 梦歆冉
词：余云飞
曲：孙侠
忽略就像阵阵冷风吹
让心凉了人也更憔悴
感情似落叶在空中纷飞
落地之时心也跟着碎
距离就算天天产生美
生疏久了也就被诋毁
寂寞已让我厌倦了疲惫
怎么还不见你来安慰
昨夜有人在偷偷流泪
你想不想知道他是谁
为等一句晚安一宿没睡
这种滋味不想再续杯
昨夜有人在偷偷流泪
你想不想知道他是谁
拼命在你心里找个定位
却找不到感情的真伪
距离就算天天产生美
生疏久了也就被诋毁
寂寞已让我厌倦了疲惫
怎么还不见你来安慰
昨夜有人在偷偷流泪
你想不想知道他是谁
只为一句晚安一宿没睡
这种滋味不想再续杯
昨夜有人在偷偷流泪
你想不想知道他是谁
拼命在你心里找个定位
却找不到感情的真伪
昨夜有人在偷偷流泪
你想不想知道他是谁
为等一句晚安一宿没睡
这种滋味不想再续杯
昨夜有人在偷偷流泪
你想不想知道他是谁
拼命在你心里找个定位
却找不到感情的真伪
却找不到感情的真伪
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便

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 = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

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

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 50, lrc_ul_height = 50;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

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

$("aud").ontimeupdate = setPosition;

</script >

愤怒的葡萄 发表于 2024-5-26 14:15

主题帖制作得挺漂亮的。

老谟深虑 发表于 2024-5-26 14:32

         欣赏老师的精美制作，下午好！

马黑黑 发表于 2024-5-26 15:12

精美的制作

红影 发表于 2024-5-26 15:20

这歌词同步设计很奇妙，还是倾斜的。
播放器和频谱的设计也没漂亮，欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-5-26 15:20

@东篱闲人 东篱大哥快来看看你的图图被做成的音画{:4_187:}

亦是金 发表于 2024-5-26 21:06

好制作！点赞学习！{:4_199:}

小辣椒 发表于 2024-5-26 21:09

亚伦好棒，开始深加工了{:4_170:}

小辣椒 发表于 2024-5-26 21:10

几个频谱和播放器效果加进去，图图也是活起来了{:4_199:}

小辣椒 发表于 2024-5-26 21:11

@东篱闲人

老头看看你的图图不止我一个人喜欢哦{:4_173:}

梦油 发表于 2024-5-26 22:42

欣赏精美音画，问候亚伦朋友。

东篱闲人 发表于 2024-5-27 15:57

字幕还能倾斜，厉害厉害。。。{:4_204:}{:4_187:}

东篱闲人 发表于 2024-5-27 15:57

小辣椒 发表于 2024-5-26 21:11
@东篱闲人

老头看看你的图图不止我一个人喜欢哦

都是大家抬举。。。{:4_189:}

小辣椒 发表于 2024-5-27 20:06

东篱闲人 发表于 2024-5-27 15:57
都是大家抬举。。。

老头你太谦虚了，会长胖的

查看完整版本: 昨夜有人在流泪- 梦歆冉【东篱闲人图片】