亚伦影音工作室 发表于 2025-2-6 13:09

谁为谁牵挂 - 高春艳

本帖最后由 亚伦影音工作室 于 2025-2-6 13:13 编辑 <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: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://img1.oldkids.cn/upload/2020/10/23/photo_20201023221718179.jpg') no-repeat center/cover;position: relative;}
.progress {display: flex;align-items: center; z-index: 8;
      justify-content: space-between;width: 86%;
      position: absolute;bottom: 20px;
   left: 0%;height:30px;
    }

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

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 75%;
      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;position: absolute;
      left: 5%; }
.end{color: #fff; font: 400 14px sans-serif;position: absolute;
      right: 10%;}

#yinkong{left: 78%;bottom:20px;width: 23%;position:absolute; overflow: hidden; align-items: center;z-index: 9;}
#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:65%;
margin: 12px 38px;
        height:3px;
        border:1px solid;
        background:#ccc linear-gradient(90deg, #F96565, #F96565) no-repeat;
        cursor:pointer;
border-radius: 20px;
}

#bnt{left: 5px;bottom: 10px;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:22px; cursor: pointer;right:1%;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:600 2em sans-serif;
    line-height: 55px;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:#F96565;
    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="https://img2.oldkids.cn/upload/2025/02/06/blog_260848378_20250206101955994.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-2-6 14:30

欣赏佳作，问候亚伦。

红影 发表于 2025-2-6 17:48

漂亮的多行歌词和同步高亮。还有漂亮的进度条和音量控制及全屏按钮。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2025-2-7 14:51

谢谢精彩分享，祝亚伦老师新春快乐{:4_176:}

老谟深虑 发表于 2025-2-7 18:27

本帖最后由 老谟深虑 于 2025-2-7 18:54 编辑

         欣赏老师的佳作，点赞！请问老师，这个代码在离退休论坛发表时linear-gra**nt这组代码就出现两个**,代码里的die就成了敏感词。不知是啥原因？图片就不显示。谢谢！

亚伦影音工作室 发表于 2025-2-7 20:01

老谟深虑 发表于 2025-2-7 18:27
欣赏老师的佳作，点赞！请问老师，这个代码在离退休论坛发表时linear-gra**nt这组代码就出现两 ...

人家就牛，就是不让用！

老谟深虑 发表于 2025-2-8 08:54

亚伦影音工作室 发表于 2025-2-7 20:01
人家就牛，就是不让用！

         哈哈哈，老师可以想想办法，就不叫它牛。我相信老师会有办法的！

小辣椒 发表于 2025-2-8 22:47

啊~~~亚纶几天没有碰到了，今天上来又见新产品{:4_178:}

小辣椒 发表于 2025-2-8 22:51

亚纶，那个音量的喇叭你可以用你以前那个动图的喇叭，停止的用现在的，你看看会不会漂亮一点

小辣椒 发表于 2025-2-8 22:51

欣赏亚纶的精彩制作

亚伦影音工作室 发表于 2025-2-9 09:36

小辣椒 发表于 2025-2-8 22:51
亚纶，那个音量的喇叭你可以用你以前那个动图的喇叭，停止的用现在的，你看看会不会漂亮一点

那样也可以，只是插件多了！

小辣椒 发表于 2025-2-9 21:47

亚伦影音工作室 发表于 2025-2-9 09:36
那样也可以，只是插件多了！

哦，那就不弄，别太辛苦了，现在这样也是挺好看的
页: [1]
查看完整版本: 谁为谁牵挂 - 高春艳