zlpi@163.com 发表于 2025-3-11 16:20:44

旧时光的追问

本帖最后由 zlpi@163.com 于 2025-3-12 17:59 编辑 <br /><br />
<style type="text/css">
#papa{ margin: 32px 0 2px calc(50% - 721px);width:1280px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:linear-gradient(0deg, #000 2%,#0004%,rgba(2, 2, 2, 0) 10%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/hbj.jpg') no-repeat center/cover;position: relative;}


#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/xbj.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/xbj2.png)no-repeat center/100% 100%;}
#bnt{left: 0px;bottom: 6px;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:16px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#退出{ width: 25px; height: 25px; position: absolute;background:url(tc.png)no-repeat center/cover;
}
#全屏{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(qp.png)no-repeat center/cover; }


#sjd {left: 4%;z-index: 8;width: 70%; height: 25px; transform:scale(1);bottom: 12px;
             position: absolute;overflow: hidden; align-items: center;border-radius: 10px;}
#percentage{margin: 6px 35px;
            position: relative;
         width: 85%; height: 5px;border-radius: 20px;
filter:invert(20%)hue-rotate(290deg);
             }
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;
             }
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;
            }
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(1);
             position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}

#volumeSlider{margin: 22px 42px;
             position: absolute;z-index: 40;
         width: 55%; height: 5px;border-radius: 20px;
filter:invert(20%)hue-rotate(290deg);
}

#swithimg{margin: 8px 10px;filter:invert(90%)hue-rotate(0deg);z-index: 41;
             position: absolute;}
#canvas {left: 0%;bottom: 4px;width: 100%;height: 250px;z-index: 1; filter:invert(90%)drop-shadow(#00ff00 0px 2px 25px)drop-shadow(#00ff00 0px 2px 25px);
             position: absolute;align-items: center; }
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg:#800000;
        position: absolute;z-index: 4;
        left: 32%;
        transform: translate(-50%);
        top: 65%;
        font:normal 2.4em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#bfq{top:50%; left:50%;z-index: 1000;
position: absolute;
width:100%;
cursor: pointer;
mix-blend-mode: lighten;filter:invert(100%)
}
</style>

<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="sjd">
    <span id="duration"></span> <input type="range" min="0" max6="100" step="0.01" value="0" onchange="seek(this.value)"id="percentage"><span id="currentTime"></span>
</div>
<div id="yink">

<inputtype="range" min="0" max="1" step="0.1" value="0.6" id="volumeSlider">
</div>
<canvas id="canvas" width="800" height="250"></canvas>
<div id="lrc"data-lrc="同步lrc歌词欣赏"</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>

<audio src="https://aod.cos.tx.xmcdn.com/storages/0cec-audiofreehighqps/86/2F/GKwRIW4LpVaqABZiTgN7Jg56.m4a" id="aud" loop autoplay crossOrigin="anonymous"></audio>
<p align="center"><iframe width="100%" height="650px" frameborder="0" scrolling="no" allowfullscreen="true" allowtransparency="true" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/ydtp.html?url=20250212&tx=https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/t.png&yy=https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/xf.gif&bj=https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/m1.jpg&fit=cover" /></iframe></p>

<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
var aud= document.getElementById("aud");
   function muteAudio() {
            aud.muted= true;
      }
   function unmuteAudio() {
            aud.muted= false;
      }
   window.onload = function(){
      var swithimg = document.getElementById("swithimg");
      var mm = true;
      swithimg.onclick= function(){
            if (mm == true) { muteAudio();volumeSlider.value=0;
                swithimg.src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/jy.png";
                return mm=false;
            }else{unmuteAudio(); volumeSlider.value=0.6;
                swithimg.src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/xtpp/xt/yl.png";
                return mm=true;
            }   
      };      
    };
class AudioPlayer {
      constructor(audioElement) {
      this.audio = audioElement;
      }
   getTime() {
      const currentTime = this.audio.currentTime; // 当前时长
      const duration = this.audio.duration; // 总时长
      const percentage = duration ? (currentTime / duration) * 100 : 0;
      return {
          currentTime: currentTime,
          duration: duration,
          percentage: percentage
      };
      }
    }
let audio = document.getElementById('aud');
    let player = new AudioPlayer(audio);
// 回显播放时间
    function updateTime() {
      const time = player.getTime();
      document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
      document.getElementById('duration').innerHTML = formatTime(time.duration);
      document.querySelector('input').value = time.percentage;
    }
// 格式化播放时间
    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
// 步进器控制播放进度
    function seek(percentage) {
      const duration = player.getTime().duration;
      player.audio.currentTime = duration * (percentage / 100);
    }
   setInterval(updateTime, 1000);
// 按钮全控
bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '1') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
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;
}
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//创建节点

var media=context.createMediaElementSource(aud);
var filter=context.createBiquadFilter();
var analyser=context.createAnalyser();
//只允许小于800的频率通过
filter.type=filter.LOWPASS;
filter.frequency.value=2800;
//Canvas初始化
var width=canvas.width,height=canvas.height;
var g=canvas.getContext("2d");
g.translate(0.5,height/2+0.5);
//连接：media → filter → analyser → destination
media.connect(filter);
filter.connect(analyser);
analyser.connect(context.destination);
//以fftSize为长度创建一个字节数组作为数据缓冲区
var output=new Uint8Array(analyser.fftSize);
//播放帧
(function callee(e){
analyser.getByteTimeDomainData(output);
//将缓冲区的数据绘制到Canvas上
g.clearRect(-0.5,-height/2-0.5,width,height);
g.beginPath();
for(var i=0;i<width;i++)
    g.lineTo(i,height*(output/256-0.5));
g.stroke();
//请求下一帧
requestAnimationFrame(callee);
})();

</script>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `
旧时光的追问
作词：王月
作曲：金光赫
编曲：闫石
母带：张川-mstudio
混音：张川-mstudio
和声：韩仪
制作人：张松雪-Tina
出品人：张松雪-Tina
发行：齐通音乐
（旧时光的追问）
一个人一座城
怀念当年的景忆当时的情
看流年花落尽
挥手岁月蹉跎消散了黄昏
这些年一个人
追着往事如烟回忆中沉沦
难分清假与真
告别纯白念想失意了灵魂
你好我的旧时光你别再追问
过往如沙细碎的残存
如今敢爱也敢恨对错已难分
支离破碎只好去默认
你好我的旧时光你别再追问
夜风路过吹散悔与恨
打开久闭的心门听花的声音
一起趟过岁月的年轮
这些年一个人
追着往事如烟回忆中沉沦
难分清假与真
告别纯白念想失意了灵魂
你好我的旧时光你别再追问
过往如沙细碎的残存
如今敢爱也敢恨对错已难分
支离破碎只好去默认
你好我的旧时光你别再追问
夜风路过吹散悔与恨
打开久闭的心门听花的声音
一起趟过岁月的年轮
一起趟过岁月的年轮
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60),
        sec = parseFloat(val % 60);
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/

})();

/*波浪线*/
var ctx = canv.getContext('2d', {willReadFrequently: true});
var ww = canv.width, hh = canv.height, pixels = [];

for (var x = -400; x < 400; x += 5) {
    for (var z = -250; z < 250; z += 5) {
      pixels.push({ x: x, y: 100, z: z });
    }
}

let render = (ts) => {
    var imageData = ctx.getImageData(0, 0, ww, hh), len = pixels.length, fov = 250;
    var pixel, scale, x2d, y2d, c;
    for (var i = 0; i < len; i++) {
      pixel = pixels[ i ];
      scale = fov / (fov + pixel.z);
      x2d = pixel.x * scale + ww / 2;
      y2d = pixel.y * scale + hh / 2;
      if (x2d >= 0 && x2d <= ww && y2d >= 0 && y2d <= hh) {
            c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
            imageData.data = 20;
            imageData.data = 200;
            imageData.data = 200;
            imageData.data = 245;
      }
      pixel.z -= 0.4;
      pixel.y = hh / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
      if (pixel.z < -fov) pixel.z += 2 * fov;
    }
    ctx.putImageData(imageData, 0, 0);
};

(function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    if(!aud.paused) {
      ctx.clearRect(0, 0, ww, hh);
      render(ts);
    }
})();
aud.onplaying = aud.onpause = () => aud.paused ? vid.pause() : vid.play();
papa.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

klxf 发表于 2025-3-11 16:33:47

漂亮！谢谢精彩分享:)

醉美水芙蓉 发表于 2025-3-11 17:36:14

欣赏山里人老师精彩播放器！

红尘过客 发表于 2025-3-19 16:56:16

赞，顶帖真的超有魅力

luxianshi 发表于 2025-3-20 09:13:06

支持佳作，期待佳作不断哟哟

RobertWAh 发表于 2025-3-24 14:33:11

支持分享，内容超有创意

Robertlault 发表于 2025-3-25 11:56:27

支持博主

fanjieshao 发表于 2025-3-26 21:01:15

支持分享，文章十分出彩

tianjingui 发表于 2025-3-29 09:52:57

感谢分享，让我收获快乐

冲动 发表于 2025-3-30 21:10:09

感谢分享，充满生活智慧
页: [1] 2
查看完整版本: 旧时光的追问