论坛 › 动画音画 › 频谱同步歌词播放器代码

亚伦影音工作室 发表于 2026-3-1 06:59

频谱同步歌词播放器代码

本帖最后由 亚伦影音工作室 于 2026-3-1 10:54 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#bj{position: relative;width: 1286px;height: 500px;MARGIN-LEFT:40%;margin-top:0px;transform: translateX(-50%);text-align: center;overflow:hidden;background:url('https://pic1.imgdb.cn/item/68537fb258cb8da5c85a91ce.jpg')no-repeat center / cover;--opt: .2;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
#mytxt { position: absolute;font-size: 1.5em;width: 280px; height: 60px;top: 20px;right:30px;color: #fff; }
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:linear-gradient(90deg, #000078 21%,#Ff0000 36%,#000000 57%,#2980b9 75%,#ff0000 84%);transform: translateX(-50%);text-align: center;position:absolute;font-size: 3em;font-weight: 400;color:#006400;white-space:pre;-webkit-background-clip:text;left: 50%; bottom: 260px; cursor:pointer;z-index:2;filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);}
#geci::before{position:absolute;content:attr(data-geci);width:20%;height:100%;color:transparent;overflow:hidden;white-space:pre;background:var(--bg);filter:inherit;-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%; } }
#canv {display: block; position: absolute;width:100%; height:250px; bottom: 0px; left: 0px;z-index:1; animation: sp 60s linear infinite;}
@keyframes sp {
      0% { filter:hue-rotate(360deg)contrast(250%)brightness(120%); }
}
</style>

<div id="bj">
<div id="mytxt" >点击 歌词音乐暂停/频谱停止</div>
      <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/94/1a/04/c5823a620bde777fc9d42157377b74d3/audio.mp3" crossOrigin="anonymous"loop autoplay></audio>
      <div id="geci"></div>
<canvas id='canv'width="1300" height="250"></canvas>
</div>
<script>
let lrc = `
最远的你是我最近的爱
字幕：亚伦
出品：亚伦影音工作室
演唱：烟嗓大叔
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
夜已沉默
心事向谁说
不肯回头
所有的爱都错过
别笑我懦弱
我始终不能猜透
为何人生淡薄
风雨之后
无所谓拥有
萍水相逢
你却给我那么多
你挡住寒冬
温暖只保留给我
风霜寂寞
凋落在你的怀中
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
风雨之后
无所谓拥有
萍水相逢
你却给我那么多
你挡住寒冬
温暖只保留给我
风霜寂寞
凋落在你的怀中
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
`;
aud.addEventListener("seeked", myFunction)
aud.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
geci.onclick = function(){
aud.paused ? aud.play() : aud.pause();
}
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 (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);
};

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

aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>


<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(aud);

        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.98, '#ffaa00');

        let ppNum = 1300;

        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 / 2+ (j * 1), height, 1, -audiheighteight);

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

                }

                window.requestAnimationFrame(draw);

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

红影 发表于 2026-3-1 13:15

这频谱很漂亮，不知道歌曲是不是需要跨域的才可以。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-3-1 22:13

频谱好漂亮~谢谢亚伦老师再推佳作，祝元宵节快乐{:4_176:}

杨帆 发表于 2026-3-1 22:19

红影 发表于 2026-3-1 13:15
这频谱很漂亮，不知道歌曲是不是需要跨域的才可以。
欣赏亚伦老师好帖

是的，刚试了一下，必须是可跨域音频呢{:4_204:}

查看完整版本: 频谱同步歌词播放器代码