论坛 › 欢乐水吧 › 亚伦影音《尘缘如梦》演 唱：酒儿

亚伦影音工作室 发表于 2025-2-4 15:27

亚伦影音《尘缘如梦》演 唱：酒儿

本帖最后由 亚伦影音工作室 于 2025-2-4 17:05 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 621px);width:1086px; height: 1360px; background: #800000;position: relative;overflow: hidden; }

#dt{ width:100%; height: 100%;position: absolute;top:0%; left:0%;}
#dt img{ width:100%; height: 100%;}

#mypic {top:8%; left:68%;z-index: 2;
display: block;position: absolute;
    width: 150px; height: 150px;
    background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/1950px 150px;
animation: heart-burst steps(13) 2s infinite;mix-blend-mode: difference;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -1950px 0;}
}

#pa{margin: 660px 0px ;position:absolute;width: 200px; height: 150px; overflow: hidden;right: 142px;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
.gc{position: absolute;width:1086px;
          top: 2%;
            left: 0%;
            text-align: center;
            list-style-type: none;
            height: 200px;
            line-height: 30px;
            }
.lrc{
    width: 500px;
    height: 140px;
    overflow: hidden;bottom: 80px;
    display: block; position:absolute;;z-index: 5;
    margin: 0px 80px;}
.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="mypic" ></div>
<div id="dt" title="亚伦动图"><img id="Img" src="https://pic1.imgdb.cn/item/67a1b663d0e0a243d4fbc4cc.gif" alt="" /></div>
<div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>

</div>

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

<div class="gc">
<marquee id="marquee"scrollAmount=10 width=1086 height=100 > <font face="heiti" size="4" color="#eee"><p style="text-align: left;">亚伦影音《尘缘如梦》作词：汇丰作曲：晴琪演 唱：酒儿   歌词整理：梅竹出品：亚伦影音工作室         </p></font></marquee>
   </div>
</div>
<audio id="aud" src="https://img1.oldkids.cn/upload/2025/01/27/blog_260848378_20250127233233454.mp3" autoplay loop></audio>
<br>


<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.display= 'none',cndpt.style.display= 'block',marquee.start(),mypic.style.animationPlayState = 'running',image.play()) : (aud.pause(),enopg.style.display= 'block',cndpt.style.display='none', marquee.stop(),mypic.style.animationPlayState = 'paused',image.stop());
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
                });
      </script >
<script >
var lrc = `尘缘如梦-酒儿
作词：汇丰
作曲：晴琪
演唱：酒儿
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
代码创意：亚伦
走过茫茫人海感叹岁月无情
有多少相遇离别谁能说清
用最真的心换来一身伤痛
却无悔和你在一起的那段曾经
看尽世事无常还在期待重逢
那句来日方长也曾让我感动
只是后来我们谁都无法掌控
流着泪说的话也已言不由衷
我以为那尘缘如风如云如梦
不曾想与你相遇在这红尘之中
明知道彼此不能托付终生
也要陪你走过漫漫风雨一程
我以为这尘缘如烟如雨如梦
不曾想和你坠入情网海誓山盟
也许这一切都是命中注定
注定你我相爱一场纠缠不清
(Music)
看尽世事无常还在期待重逢
那句来日方长也曾让我感动
只是后来我们谁都无法掌控
流着泪说的话也已言不由衷
我以为那尘缘如风如云如梦
不曾想与你相遇在这红尘之中
明知道彼此不能托付终生
也要陪你走过漫漫风雨一程
我以为这尘缘如烟如雨如梦
不曾想和你坠入情网海誓山盟
也许这一切都是命中注定
注定你我相爱一场纠缠不清
注定你我相爱一场纠缠不清
(Music)
☆★谢谢欣赏★☆
=亚伦影音=
`;
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 >
<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("Img");
</script>

红影 发表于 2025-2-4 18:26

这倒影真漂亮。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 亚伦影音《尘缘如梦》演 唱：酒儿