论坛 › 欢乐水吧 › 陪你渡红尘 - 陈玉建

亚伦影音工作室 发表于 2025-1-21 18:20

陪你渡红尘 - 陈玉建

本帖最后由 亚伦影音工作室 于 2025-2-6 12:11 编辑 <br /><br /><style>
#papa{left: -38%; top: 30%; width:1286px;position: relative; height:750px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:linear-gradient(0deg, #000000 2%,#000000    8%,rgba(2, 2, 2, 0) 20%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url('https://pic1.imgdb.cn/item/67715fc5d0e0a243d4ec3384.png') no-repeat center/cover;position: relative;}
.progress {display: flex;align-items: center; z-index: 8;
      justify-content: space-between;width: 98%;
      position: absolute;bottom: 5px;
   left: 1%;height:30px;
    }

    .progress-bar {
      position:relative;
      width: 92%;
      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: #F96565;
    }

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

#yinkong{left: 76%;top:93%;width: 300px;position:relative; overflow: hidden; align-items: center}
#lb{margin: 3px 15px ; width: 20px; height: 20px; position: absolute; cursor: pointer; }
#cndpt{position: absolute; width: 20px; height: 20px;
opacity:1; }
#enopg{ position: absolute;width: 20px; height: 20px;
opacity:0; }

#auVol {position: position: absolute;
        width:200px;
margin: 12px 38px;
        height:3px;
        border:1px solid;
        background:#ccc linear-gradient(90deg, #F96565, #F96565) no-repeat;
        cursor:pointer;
border-radius: 20px;
}

#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: 40px; 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 1.8em sans-serif;
    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:#32CD32;
    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>

   <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 id="yinkong" >
<div id="lb" >
<div id="cndpt"><svg width="20" height="20" viewBox="0 0 24 20">
      <path fill="#fff" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" />
      </svg></div>
<div id="enopg" ><svgwidth="20" height="20" viewBox="0 0 24 20">
      <path fill="#fff" fill-rule="evenodd" d="M0 7.667v8h5.333L12 22.333V1L5.333 7.667" />
      </svg></div>
</div>

<div id="auVol"></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="http://img1.oldkids.cn/upload/2024/07/01/blog_260848378_20240701172701490.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') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0');

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>



<script>
var auVol = document.getElementById('auVol'); //音量模拟条标识
var aud = document.getElementById('aud'); //audio元素标识
var canDo = false; //拖动布尔标识
auVol.style.backgroundSize = aud.volume *80 + "%"; //音量条初始状态
auVol.onmousemove = function(){ //音量控制
        if(canDo) { // 如果鼠标已经按下
                let w = offset(auVol,"left");
                let x = (event.clientX - w) * 100 / this.clientWidth;
                this.style.backgroundSize = x + "%";
                //console.log(x);
                aud.volume = x / 100;

        }
}
//几个鼠标动作事件：控制 canDu 布尔值
auVol.onmousedown = function(){ canDo = true; }
auVol.onmouseout = function(){ canDo = false; }
auVol.onmouseup = function(){ canDo = false; }

function offset(obj,direction){//位移总量
        let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
        let realNum = obj;
        let positionParent = obj.offsetParent;
        while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
        }
        return realNum;
}

lb.onclick = () => aud.paused ? (aud.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1',auVol.style.backgroundSize = aud.volume *80 + "%") : (aud.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0',auVol.style.backgroundSize = aud.volume *0 + "%");
</script>

红影 发表于 2025-1-21 20:39

这个有进度条，还能调音量高低呢。制作也很漂亮，歌词同步也好。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-1-21 20:40

帖子好像没有完全居中呢{:4_173:}

小辣椒 发表于 2025-1-21 21:54

亚纶这个播放器做的漂亮，增加了音量的设置，赞的~~{:4_199:}

小辣椒 发表于 2025-1-21 21:56

亚纶继续啊，最好动态图可以一键停止{:4_178:}

小辣椒 发表于 2025-1-21 21:56

感谢亚纶的精彩分享

山里人 发表于 2025-1-22 09:17

好帖，字迹清楚，动感歌词还能放大。

老谟深虑 发表于 2025-1-22 18:48

         好作品，点赞！

查看完整版本: 陪你渡红尘 - 陈玉建