论坛首页 › 单图音画 › 活就要活个潇洒

zlpi@163.com 发表于 2025-2-1 16:14:18

活就要活个潇洒

本帖最后由 zlpi@163.com 于 2025-2-1 16:16 编辑 <br /><br /><style>
#papa{left: -22%; top: 30%; width:1286px;position: relative; height:700px; 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://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/kaih.jpg') 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: 0.5%;height:30px;
    }

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

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

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

#yinkong {overflow: hidden; z-index: 6; position: absolute;background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/lba.png) no-repeat 0 0/32px 32px ; width: 350px; height: 32px;right: -85px;top: 92%; }
#auVol {position: absolute;
        width:150px; left: 34px;
top: 16px; z-index: 8;
        height:3px;
        border:1px solid;
        background:#ccc linear-gradient(90deg, #32CD32, #32CD32) 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;}
#canvas { left: 50%; transform:translateY(-30%);}
   
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/qp.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/tc.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: 30%;
    margin-right: auto;
    margin-top:10%;
    }
.lrcList{font:500 1.7em 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="auVol"></div></div>
<div class="containe" id="containe">
<ul class="lrcList" id="lrcList">
            <li class="current"></li>
      </ul>
</div>
<canvas    id="canvas"></canvas>
</div>

<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/3441-audiofreehighqps/6C/80/GKwRIRwLc5YnABcIJgNeOzE2.m4a" autoplay loopcontrols crossOrigin="anonymous"></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 = `活就要活个潇洒
作词：轻云望月
作曲：轻云望月
编曲：望海高歌
混音：望海高歌
制作：轻云望月
出品: 月之歌文化传媒
演唱：望海高歌
“多行歌词，在线音乐”
风华是一纸流沙
苍老是一段年华
人生短短几十冬夏
要学会从容优雅
把过往全都放下
让脸上笑容常挂
虽然生活有苦有辣
其实都算不了啥
活就要活个潇洒
多给自己解解压
朝看看云暮看看霞
别为名利苦挣扎
活就要活个潇洒
轻煮时光慢煮茶
秋赏赏月春赏赏花
一切烦恼都蒸发
把过往全都放下
让脸上笑容常挂
虽然生活有苦有辣
其实都算不了啥
活就要活个潇洒
多给自己解解压
朝看看云暮看看霞
别为名利苦挣扎
活就要活个潇洒
轻煮时光慢煮茶
秋赏赏月春赏赏花
一切烦恼都蒸发
活就要活个潇洒
多给自己解解压
朝看看云暮看看霞
别为名利苦挣扎
活就要活个潇洒
轻煮时光慢煮茶
秋赏赏月春赏赏花
一切烦恼都蒸发
一切烦恼都蒸发`;

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;
}
   
window.onload = function () {
      var oAudio = document.getElementById('aud');
   
      // 创建音频上下文对象
      var oCtx = new AudioContext();
      // console.log(oCtx);
      // 创建媒体源,除了audio本身可以获取，也可以通过oCtx对象提供的api进行媒体源操作
      var audioSrc = oCtx.createMediaElementSource(oAudio);
      // 创建分析机
      var analyser = oCtx.createAnalyser();
      // 媒体源与分析机连接
      audioSrc.connect(analyser);
      // 输出的目标：将分析机分析出来的处理结果与目标点（耳机/扬声器）连接
      analyser.connect(oCtx.destination);

      // 利用cancas渐变进行音频绘制
      var ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      var oW = canvas.width;
      var oH = canvas.height;
      var color1 = ctx.createLinearGradient(oW / 2, oH / 2- 2, oW / 2, oH / 2- 95);
      var color2 = ctx.createLinearGradient(oW / 2, oH / 2+2, oW / 2, oH / 2+95);
      color1.addColorStop(1, '#ffffff');
      color1.addColorStop(0, '#fff000');
      color1.addColorStop(0, '#00ff00');
      color2.addColorStop(0, '#ffffff');
      color2.addColorStop(0, '#fff000');
      color2.addColorStop(1, '#00ff00');
      // 音频图的条数
      var count = 90;
      // 缓冲区:进行数据的缓冲处理，转换成二进制数据
      var voiceHeight = new Uint8Array(analyser.frequencyBinCount);
      // console.log(voiceHeight);

      function draw() {
      // 将当前的频率数据复制到传入的无符号字节数组中，做到实时连接
      analyser.getByteFrequencyData(voiceHeight);
      // console.log(voiceHeight);
      // 自定义获取数组里边数据的频步
      var step = Math.round(voiceHeight.length / count);
      ctx.clearRect(0, 0, oW, oH);
      for (var i = 0; i < count; i++) {
          var audioHeight = voiceHeight;
          ctx.fillStyle = color1;// 绘制向上的线条
          ctx.fillRect(oW / 2 + (i * 5), oH / 2, 2, -audioHeight);
          ctx.fillRect(oW / 2 - (i * 5), oH / 2, 2, -audioHeight);
          ctx.fillStyle = color2;// 绘制向下的线条
          ctx.fillRect(oW / 2 + (i * 0), oH / 2, 0, audioHeight);
          ctx.fillRect(oW / 2 - (i * 0), oH / 2, 0, audioHeight);
      }
      window.requestAnimationFrame(draw);
      }
      draw();

    }   

</script>

醉美水芙蓉 发表于 2025-2-3 17:23:46

欣赏山里人老师精彩音画！

醉美水芙蓉 发表于 2025-2-3 17:25:15

精彩的画面,让人耳目一新,非常有创意作品,上茶,祝好.

查看完整版本: 活就要活个潇洒