论坛 › 欢乐水吧 › 清风吹散林中雾-黄文文

亚伦影音工作室 发表于 2024-5-29 04:14

清风吹散林中雾-黄文文

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

#pinpu1 { position: absolute; width: 0%; height: 0px; z-index: 9; top:0%;left:0%;z-index: 4;mix-blend-mode: lighten;}
#pinpu1 img{ width: 100%;height: 640px;}

#bfqbj{margin: 5% 3%;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:-40px; top: -7px; }
#prog::after { right: -40px; content: attr(data-du); ; top: -7px; }

#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(0deg);
    width: 960px; left:-140px;
    height: 160px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 420px 0px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family:悟空大字库;
    font-size: 30px;/*歌词字体大小：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{ filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;


</style>
<div id="papa">
<divid="dt"><img id="dtImg" src="https://s2.krakenfiles.com/uploads/28-05-2024/mX5OfGCakN/image.gif" alt="" /></div>
<audio id="aud" src="https://s2.krakenfiles.com/uploads/28-05-2024/HXvSsp14uO/music.m4a" autoplay loop></audio>
      <div id="pinpu"> <img id="pinpuImg" src="https://pic.imgdb.cn/item/6642c4430ea9cb1403001185.gif" alt="" /></div>
<div id="pinpu1"> <img id="pinpu1Img" src="https://s3.krakenfiles.com/uploads/28-05-2024/R3bHeThMxw/image.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 = `清风吹散林中雾
作词：宋普照
作曲：灵魂KK
编曲：毅然音乐
混音：毅然音乐
和声：黄文文
清风吹散林中雾
雾散不见来时路
无人知道我的苦
无人懂我的孤独
命运对我的摆布
找不到人去倾诉
一步一步的劫数
全靠一人去自渡
我知道越想幸福越痛苦
也知道富贵在天难倾覆
我知道就算踏破这江湖
也没有平平坦坦的征途
我知道越想拥有越虚无
也知道世人庸俗难知足
我知道我的辛苦我清楚
再多的付出没有人在乎
清风吹散林中雾
雾散不见来时路
无人知道我的苦
无人懂我的孤独
命运对我的摆布
找不到人去倾诉
一步一步的劫数
全靠一人去自渡
我知道越想幸福越痛苦
也知道富贵在天难倾覆
我知道就算踏破这江湖
也没有平平坦坦的征途
我知道越想拥有越虚无
也知道世人庸俗难知足
我知道我的辛苦我清楚
再多的付出没有人在乎
我知道越想幸福越痛苦
也知道富贵在天难倾覆
我知道就算踏破这江湖
也没有平平坦坦的征途
我知道越想拥有越虚无
也知道世人庸俗难知足
我知道我的辛苦我清楚
再多的付出没有人在乎`;
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 = 160;/*动态歌词显示的位置：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-29 18:28

好漂亮的制作。欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-5-30 11:52

         欣赏老师精美制作，点赞！

查看完整版本: 清风吹散林中雾-黄文文