论坛 › 欢乐水吧 › 寂寞红尘寂寞人-晓月

亚伦影音工作室 发表于 2025-3-2 17:51

寂寞红尘寂寞人-晓月

本帖最后由 亚伦影音工作室 于 2025-3-2 17:51 编辑 <br /><br /><style>
#papa {
      margin: 10px 0 20px calc(50% - 680px);
      width:1186px;
      height: 720px;
      background:radial-gradient(circle,transparent, rgba(6,25,198,var(--opa))100%), url('https://pic1.imgdb.cn/item/67c4289cd0e0a243d40a1450.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 8px gray;overflow: hidden; z-index: 1; position: relative;
      --opa: .6;
}

#dt{
      position:absolute;
      width: 25px;
      height: 24px;
      bottom: 23px;border-radius: 0px;
   left: 72%;filter:invert(100%)hue-rotate(0deg);
      cursor: pointer;
    }
#mutedbnt{
   width: 25px;
      height: 24px;
      
   left: 0%;
      cursor: pointer;
    }

#volumeSlider{bottom: 42px;left: 75%;
             position:absolute;
         width: 200px; height: 3px;border-radius: 20px;

}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 5 8 5 0 / 0px 0px 0 2000px;
}

#loopbnt{
      position:absolute;
      width: 30px;
      height: 25px;background:#0000;
      bottom: 25px;border-radius: 0px;
   right: 45px;filter:invert(100%);
      cursor: pointer;
    }
#bnt{left: 10px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#eee;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#eee; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px}
#tmsg {position:absolute;
      font: normal 13px sans-serif;
      color: #fff;
         bottom: 28px;
      left:64%;}
#prog {position:absolute;
      width: 58%;
      height: 4px;background:#eee;
      cursor: pointer;
         bottom: 32px;border-radius: 20px;
left:5%;
}
#prog-bar {
            height: 100%;
            background: #ff6500;
            width: 0%;border-radius: 20px;
      }
.lrc{
    width: 500px;
    height: 140px;
    overflow: hidden;bottom: 80px;
    display: block; position:absolute;;z-index: 5;
    margin: 0px 480px;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 30px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>

<div id="papa"><div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<br><div id="tmsg"></div>
<div id="prog" title="播放进度条"><div id="prog-bar"><div class="now"></div></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67c40212d0e0a243d409cc2c.png"id="mutedbnt" onClick="pc()"/>
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />

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

   </div>
<audio id="aud" src="https://img1.oldkids.cn/upload/2025/03/01/blog_260848378_20250301154547926.mp3" autoplay ></audio>

<script>

setInterval (function() { if(!aud.paused) papa.style.setProperty('--opa', Math.random()); },800);


var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
      function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67c40212d0e0a243d409cc2c.png") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/67c40213d0e0a243d409cc2e.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/67c40212d0e0a243d409cc2c.png";}
}


function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
/*进度条 进度时间*/
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');


aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
let p = (coordEnd - coordStart) / this.offsetWidth
   
      });

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});


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;
      };
/*结束*/

bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',image.play()) : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',image.stop() );

</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.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 image= document.getElementById("mutedbnt");
</script>
<script >
var lrc = `寂寞红尘寂寞人-晓月
作词：罗会战/翟拥军
作曲：江波
演唱：晓月
☆★Lrc编辑 梅竹★☆
☆★协编 兰菊★☆
亚伦影音工作室
竹影摇曳枝又新
泪眼朦胧忆佳人
春风再度轻拂鬓
满怀思念拨乱琴
月影婆娑水流银
薄雾青衫素罗裙
馨香远去回渡晚
依稀烟雨没红尘
寂寞红尘寂寞人
独卧青山叹浮云
欲停思绪心还乱
等到日落等星辰
寂寞红尘寂寞人
花前月下独自吟
缘分未了情未尽
不忘承诺守初心
(Music)
月影婆娑水流银
薄雾青衫素罗裙
馨香远去回渡晚
依稀烟雨没红尘
寂寞红尘寂寞人
独卧青山叹浮云
欲停思绪心还乱
等到日落等星辰
寂寞红尘寂寞人
花前月下独自吟
缘分未了情未尽
不忘承诺守初心
寂寞红尘寂寞人
独卧青山叹浮云
欲停思绪心还乱
等到日落等星辰
寂寞红尘寂寞人
花前月下独自吟
缘分未了情未尽
不忘承诺守初心
不忘承诺守初心
(Music)
☆★梅竹谢谢欣赏★☆
=End=
`;
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 = 70, lrc_ul_height = 60;/*动态歌词显示的位置：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 >

红影 发表于 2025-3-2 18:47

好听的歌儿，漂亮的制作。欣赏亚伦老师好帖{:4_187:}

红影 发表于 2025-3-2 18:50

画面清爽淡雅，歌词同步漂亮，这个帖子真好{:4_187:}

杨帆 发表于 2025-3-2 20:26

漂亮！谢谢亚伦老师精彩分享{:4_191:}

小辣椒 发表于 2025-3-2 21:37

现在的浅色效果比深的漂亮多了{:4_199:}

小辣椒 发表于 2025-3-2 21:39

欣赏亚纶精彩的制作{:4_187:}

老谟深虑 发表于 2025-3-3 15:53

         欣赏亚伦老师的佳作，点赞！

查看完整版本: 寂寞红尘寂寞人-晓月