论坛 › 音乐沙龙 › 《点燃一根烟》 - 老范儿 （感谢亚伦老师代码！）

亦是金 发表于 2025-4-23 22:28

《点燃一根烟》 - 老范儿 （感谢亚伦老师代码！）

《点燃一根烟》 - 老范儿


<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2296868">

<style>
#bj{
        position: relative;
        width: 1286px;
        height: 720px;
        MARGIN-LEFT:-350px;
        margin-top:0px;;
        overflow:hidden;
        background:#337700 url(https://s4.ax1x.com/2022/03/01/blgWMq.jpg)no-repeat center /         cover;
        border-radius: 22px;
        border: thick double#88abfa;
        --state:paused;
}

#papa{
        position: absolute;
        width: 100%;
        height: 100%;
        MARGIN-LEFT:0px;
        margin-top:0px;
        background:#500000 url(https://s4.ax1x.com/2022/03/01/blg7i4.jpg)no-repeat center / cover;
}



         /*频谱*/
#canv {
        display: block;
        position: absolute;
        width:100%;
        bottom: 0px;
        left: 0px;
        z-index:4;
        animation: sp 1s linear infinite;
}
@keyframes sp {
      0% { filter:hue-rotate(360deg)contrast(150%)brightness(80%); }
}





#tu{
        position: absolute;
        top:0%;
        left:30%;
        width: 100%;
        opacity:0;
        animation: round 80s linear infinite var(--state);
        height: 100%;
}

#tu img{
        width: 90%;
        -webkit-mask-image: radial-gradient(black 35% ,transparent 75%);
}

@keyframes round{
0%{-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);opacity:0}
5% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
10% {-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);opacity:1}
15% {-webkit-transform:rotate(0deg)scale(0)translate(-50%,50%);opacity:0}
}

#tu:nth-child(10) {animation-delay: 72s;}
#tu:nth-child(9) {animation-delay: 64s;}
#tu:nth-child(8) {animation-delay: 56s;}
#tu:nth-child(7) {animation-delay: 48s;}
#tu:nth-child(6) {animation-delay: 40s;}
#tu:nth-child(5) {animation-delay: 32s;}
#tu:nth-child(4) {animation-delay: 24s;}
#tu:nth-child(3) {animation-delay: 16s;}
#tu:nth-child(2) {animation-delay: 8s;}
#tu:nth-child(1) {animation-delay: 0s;}







#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 75%;font:300 3.2em 华文隶书;color:#227700;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer { position: absolute; text-align: center; top: 95%;transform: translate(-50%); left: 50%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {position: relative;width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state);margin: -90px 0px;border-radius: 50px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 4px #227700;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs,#bjqh{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 66%;
}

</style>

<style>
#dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 8% 10px;
}

.lrc {position:absolute;width: 100%;
    height: 100%;
   border: 0px solid white;
    margin: 0px 0px;
}

.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
font:300 1.2em 微软雅黑;
    color: #a6f9f2;
   
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}

.lrc #ulli.active{   font:450 1.6em 微软雅黑;
    color: #fff000;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>


<div id="bj">
<div id="papa"></div>
<div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/HwHP4s.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7xu8.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7jjf.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7HNd.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/HwHFCn.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/HwH9EQ.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7zDS.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7XgP.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/Hw7O3t.jpg" alt=""></div>
<div id="tu"><imgsrc="https://z4a.net/images/2023/08/27/HwHSHg.jpg" alt=""></div>

</div>







<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://img1.kuwo.cn/star/albumcover/500/s4s96/60/2874680195.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>



<canvas id='canv' width="1286" height="250"></canvas>



      <audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w9/audio/f5/ee/dd/9782a8c2dd71131dbaa4ae43aba9e2e0/audio.mp3" loop autoplay crossOrigin="anonymous"></audio>
   <div id="geci"></div>
<div id="dhgc"><div class="lrc" >
      <ul id="ul">
      </ul>
    </div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">播放器隐藏</button>
<button id="bjqh" onclick="btn4()"title="背景模式">背景TWO</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>

<script>
let lrc = `《点燃一根烟》 - 老范儿
作词：庄琳荌
作曲：佚名
出品：广州小草文化传媒
歌词编辑：亦是金
。。。。。。
点燃一根烟
我的心像吐出的烟圈
倒满一杯酒
你的脸像苹果般娇艳
我多么希望
你不曾离去
我多么希望
爱情再继续
我多么希望
我们能再相聚
我多么希望
我多么希望
能再遇见你
每当走过每一条街道
我在找寻你
。。。。。。
点燃一根烟
我的心像吐出的烟圈
倒满一杯酒
你的脸像苹果般娇艳
我多么希望
你不曾离去
我多么希望
爱情再继续
我多么希望
我们能再相聚
我多么希望
我多么希望
能再遇见你
每当走过每一条街道
我在找寻你
。。。。。。
我多么希望
你不曾离去
我多么希望
爱情再继续
我多么希望
我们能再相聚
我多么希望
我多么希望
能再遇见你
每当走过每一条街道
我在找寻你
-- 谢谢欣赏 --

`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}

audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),btnplay.title = '点击暂停' );

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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());</script>

<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#audio"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>


<script>
      function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('dhgc').style.display = 'block';
      }

function btn3(){
                        var img=document.getElementById("mplayer");

                        if(document.getElementById("world").innerHTML=="播放器隐藏"){
                                mplayer.className="hide";
                                document.getElementById("world").innerHTML="显示播放器";
                        }else{
                                mplayer.className="";
                                document.getElementById("world").innerHTML="播放器隐藏";
                        }
                }

   function btn4(){
                        var img=document.getElementById("papa");

                        if(document.getElementById("bjqh").innerHTML=="背景TWO"){
                                papa.className="hide";
                                document.getElementById("bjqh").innerHTML="背景ONE";
                        }else{
                                papa.className="";
                                document.getElementById("bjqh").innerHTML="背景TWO";
                        }
                }

function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";
zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               bj.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                bj.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }

            }
      }
      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }
      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }

</script>

<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(audio);

        let analyser = Act.createAnalyser();

        audSrc.connect(analyser);

        analyser.connect(Act.destination);

        let ctx = canv.getContext('2d');

        let width = canv.width;

        let height = canv.height;

        let ppColor = ctx.createLinearGradient(250,200,250,0);

        ppColor.addColorStop(0.8, '#fff000');

        ppColor.addColorStop(1, '#00ff00');

        ppColor.addColorStop(0.8, '#fff000');

        let ppNum = 1286;

        let voiceHeight = new Uint8Array(analyser.frequencyBinCount);



        (function draw() {

                analyser.getByteFrequencyData(voiceHeight);

                let step = Math.round(voiceHeight.length / ppNum);

                ctx.clearRect(0, 0, width, height);

                for (let j = 0; j < ppNum; j++) {

                        let audiheighteight = voiceHeight;

                        ctx.fillStyle = ppColor;

                        ctx.fillRect(width / 1+ (j * 3), height, 1, -audiheighteight);

                        ctx.fillRect(width / 1- (j * 3), height, 1, -audiheighteight);

                }

                window.requestAnimationFrame(draw);

        })();
})();
</script>

</td></tr></table>

杨帆 发表于 2025-4-23 22:52

本帖最后由 杨帆 于 2025-4-23 22:54 编辑

多模式整合精彩，谢谢亦是金老师分享{:4_191:}

亦是金 发表于 2025-4-23 23:15

杨帆 发表于 2025-4-23 22:52
多模式整合精彩，谢谢亦是金老师分享

问好杨帆老师！谢谢欣赏点评！{:4_190:}

红影 发表于 2025-4-23 23:49

这制作很漂亮，还有那么多功能，轮播图也漂亮。
欣赏亦是金老师好帖{:4_199:}

梦江南 发表于 2025-4-24 08:36

欣赏老师精彩音画。{:4_199:}

小文 发表于 2025-4-24 09:21

精彩，欣赏！

亦是金 发表于 2025-4-24 09:28

红影 发表于 2025-4-23 23:49
这制作很漂亮，还有那么多功能，轮播图也漂亮。
欣赏亦是金老师好帖

问好红影管理，谢谢欣赏点赞！{:4_187:}

亦是金 发表于 2025-4-24 09:30

梦江南 发表于 2025-4-24 08:36
欣赏老师精彩音画。

问好梦江南老师，谢谢欣赏点赞！{:4_190:}

亦是金 发表于 2025-4-24 09:31

小文 发表于 2025-4-24 09:21
精彩，欣赏！

问好小文老师，谢谢欣赏点赞！{:4_187:}

小文 发表于 2025-4-24 11:01

亦是金 发表于 2025-4-24 09:31
问好小文老师，谢谢欣赏点赞！

甭客气，问好！{:4_191:}

亦是金 发表于 2025-4-24 11:10

小文 发表于 2025-4-24 11:01
甭客气，问好！

问好！{:4_187:}

红影 发表于 2025-4-24 22:21

亦是金 发表于 2025-4-24 09:28
问好红影管理，谢谢欣赏点赞！

叫我影子吧，这里都玩的，没什么管理呢{:4_173:}

冬天的雨 发表于 2025-4-27 13:44

欣赏亦是金老师精美的制作，一首老歌，好听

冬天的雨 发表于 2025-4-27 13:45

这歌曲有几种风格，发现这曲有配几种歌词，现在强人真多

查看完整版本: 《点燃一根烟》 - 老范儿 （感谢亚伦老师代码！）