论坛 › 欢乐水吧 › 还是她最美

亚伦影音工作室 发表于 2025-1-13 10:49

还是她最美

本帖最后由 亚伦影音工作室 于 2025-1-14 16:37 编辑 <br /><br /><style>
#papa{left: -40%; top: 30%; width:1286px;position: relative; height:750px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url('https://img3.oldkids.cn/upload/2020/10/26/photo_20201026181006270.jpg') no-repeat center/cover;position: relative;box-shadow: 0px 0px 0px 8px #800000 inset,0px 0px 0px 10px #cccccc inset, 0px 0px 80px 80px #000 inset;}
.progress {display: flex;align-items: center;
      justify-content: space-between;width: 98%;
      position: absolute;bottom: 5px;
   left: 1%;height:30px;
    }

    .progress-bar {
      position:relative;
      width: 94%;
      height: 3px;
      background-color: #fff;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 12px sans-serif; }
.end{color: #fff; font: 400 12px sans-serif;}

#mypic { bottom: 32px; right: 65px;z-index: 4;
display: block;position: absolute;
    width: 20px; height: 20px;
    background: url(https://pic.imgdb.cn/item/674f8e7ed0e0a243d4dce5ed.png) no-repeat center/100px 20px;
animation: burst steps(5) 1s infinite;
}
@keyframes burst {
0% {background-position: 0px 0;}
100% {background-position: -100px 0;}
}
#bnt{left: 20px;bottom: 24px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
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:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 32px; cursor: pointer;right: 25px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
ul,li,ol{list-style: none;}
.containe{width: 800px;
    height: 380px;list-style:none;
    overflow: hidden;
   position: relative;
margin-left: 0%;
    margin-right: auto;
    margin-top:10%;
    }
.lrcList{font:500 2em 华文隶书;
    line-height: 50px;filter:drop-shadow(#000 1px 1px 0px)drop-shadow(#000 1px 1px 0px) ;
    color: #fff; overflow: hidden;
    text-align: center;
    transition:all 0.2s;/* 过渡动画。实现歌词上下移动的动画 */
}
.lrcList li{list-style-type: none;
   display: block;
    transition:all 0.2s;
    height: 52px;
    opacity: 0.8;
}
.lrcList .current{
    transform: scale(1.4);
    color: #ff0000;
    opacity: 1;
}
</style>

<div id="papa">
<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>

<div id="mypic" ></div>
   <span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div class="containe" id="containe">
<ul class="lrcList" id="lrcList">
            <li class="current"></li>
      </ul>
</div>
</div>

   <audio id="aud" class="audio" src="https://www.oldkids.cn/upload/2024/12/28/blog_260848378_20241228212605665.mp3" autoplay loop></audio>

<script >
const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

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)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',mypic.style.animationPlayState = 'running') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',mypic.style.animationPlayState = 'paused');

aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
</script >
<script>
letlrc = `《还是她最美》
作词：悟义
作曲：小春
演唱:月光畅想
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
我喜欢那朵未开的花蕾
时常勾起了我初恋的回味
心动的感觉无法表达
以心传心有滋有味
我喜欢那朵未开的花蕾
微微的笑脸藏着含蓄美
默默眼中情心领神会
以情传情醉了心扉
红尘滚滚满天飞
千里有缘来相会
花未全开月未圆
山河也陶醉
心地清清似春水
一生相守也无悔
花未全开月未圆
还是她最美
(Music)
我喜欢那朵未开的花蕾
时常勾起了我初恋的回味
心动的感觉无法表达
以心传心有滋有味
我喜欢那朵未开的花蕾
微微的笑脸藏着含蓄美
默默眼中情心领神会
以情传情醉了心扉
红尘滚滚满天飞
千里有缘来相会
花未全开月未圆
山河也陶醉
心地清清似春水
一生相守也无悔
花未全开月未圆
还是她最美
红尘滚滚满天飞
千里有缘来相会
花未全开月未圆
山河也陶醉
心地清清似春水
一生相守也无悔
花未全开月未圆
还是她最美
(Music)
☆★梅竹谢谢欣赏★☆
=End=`;

function parseLRC(LRC){
    let lines = LRC.split('\n'); // 把歌词转为数组
    let LRCArr = [];// 歌词数组
    // 遍历数组
    lines.forEach(item => {
       let parts = item.split("]"); //
      let timer =parts.slice(1).trim();//
      let obj = {
            time: parseTime(timer),
            word: parts.trim()==""?"":parts
      }
      // console.info( obj );
      LRCArr.push(obj);   
    });
    return LRCArr;
}
function parseTime(timer){
   let t = timer.split(":");
   let result = Number(t)*60 + Number(t);
   return result ;
}
function findIndex(){
    // 播放器当前时间
    let index = -1;
    let curTime = doms.audio.currentTime;
    for(let i=0; i<=LRCData.length-1 ; i++){
      if( curTime < LRCData.time ){
            index = i - 1;
            returnindex;
      }
    }
    // 找遍了，都没有歌词，说明播放完毕里，显示最后一句歌词。
    index = LRCData.length-1
    return index;
}

function createLrcList(lrc){
    // 避免多次操作 DOM。创建一个 DOM 片段，它不会显示，但是可以集中处理 DOM。
    let frag = document.createDocumentFragment();
    doms.lrcList.innerHTML = "";
    lrc.forEach(item=>{
      let li = document.createElement("li");
      li.innerHTML = item.word ;
      frag.appendChild(li);
    });
    doms.lrcList.appendChild(frag);
}

/*
设置歌词 ul 的偏移量
*/
function setOffset(index){
    let dis =-1*( index * liH + liH/2- conH/2 );// 位移距离
    doms.lrcList.style.transform = `translateY(${dis}px)`;
    console.info( dis );
}
/*
设置歌词高亮
*/
function setLight(index){
    let ul = doms.lrcList;
    let lis = ul.children;
    let cur = document.querySelector(".current");
    if( cur ){ // 如果存在
      cur.classList.remove("current");
    }
    lis.classList.add("current");
}


let doms = {
    audio:document.querySelector("audio"),
    lrcList:document.querySelector("#lrcList"),
    container:document.querySelector("#containe")
}
let LRCData = parseLRC(lrc);
createLrcList(LRCData);// 创造歌词 li
let conH = doms.container.clientHeight;// 容器高度
let liH = doms.lrcList.children.clientHeight;// li 高度
// 初始化歌词位置，让第一句歌词在歌词区中间
doms.lrcList.style.transform = `translateY(${-1*( liH/2- conH/2)}px)`;

doms.audio.addEventListener("timeupdate",function(){
    let index = findIndex();
    setLight(index);// 歌词位移
    setOffset(index); // 歌词高亮
});


</script>

梦油 发表于 2025-1-13 10:56

欣赏佳作，问候亚伦。

红影 发表于 2025-1-13 13:58

这个歌词同步和全屏按钮都很有特色。
欣赏亚伦老师好帖{:4_199:}

查看完整版本: 还是她最美