论坛 › 欢乐水吧 › 活就要活个潇洒

亚伦影音工作室 发表于 2024-5-22 18:05

活就要活个潇洒

本帖最后由 亚伦影音工作室 于 2024-5-24 18:22 编辑 <br /><br /><style>    #papa { margin:0px 0 20px calc(50% - 600px); width: 1164px; height: 640px; background:#222 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/776259172b211e314fb30727174ee460.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160)no-repeat center/cover;box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}
#dt{position: absolute;top:0%; left:30%;width: 80%;height: 80%;z-index:3;clip-path:circle(30% at 50%50%);}
#dt img{ width: 100%;}
#pinpu { position: absolute; width: 200px; height: 80px; z-index: 9; top:85%;left:72%;z-index: 4;}
#pinpu img{ width: 100%;}

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

#bfqbj{margin: 50% 10%;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/66457360d9c307b7e9ffe724.png)no-repeat 0px 10px/320px 50px;z-index: 5;}
#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;
    width: 960px;
    height: 500px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
        overflow: hidden;
    display: block;
    margin: 60px -200px;/*歌词调整：上下 左右*/
}
.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: 22px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #ffffff;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: 30px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;


</style>
<div id="papa">
<divid="dt"><img id="dtImg" src="https://s9.krakenfiles.com/uploads/22-05-2024/LvnI8qdtwK/image.gif" alt="" /></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/91/17/e1/b9c2d1acfeafef336cb1c88849231ae3/audio.mp3" 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 = 450;/*动态歌词显示的位置：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-22 18:09

         欣赏老师的精美音画，点赞！

马黑黑 发表于 2024-5-22 19:46

帖子偏右了

红影 发表于 2024-5-22 20:40

漂亮的制作，滚动的长歌词真好，播放器和小频谱及视频都很漂亮。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-5-22 20:41

这个暂停后视频就看不到了？

小辣椒 发表于 2024-5-22 21:14

亚伦这二个动图做的漂亮{:4_199:}

人物这个可能文件大，我开始没有看见这个效果，后来出来了

小频谱自己做的透明效果吗

开始我还以为你做了昨天我上传的那个小频谱播放器的

小辣椒 发表于 2024-5-22 21:14

欣赏亚伦的精彩制作

亚伦影音工作室 发表于 2024-5-24 12:52

<link rel="stylesheet" href="https://file.uhsea.com/2405/7422d5f4913eda4d3d95244d2e03e9fcUR.css">

查看完整版本: 活就要活个潇洒