特效歌词列表播放器【精修】
本帖最后由 亚伦影音工作室 于 2026-3-17 12:51 编辑 <br /><br /> <style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#bj {
position: relative;
width: 1300px;
height: 700px;
margin: 80px -350px;
overflow: hidden;
z-index: 1;
background: #55aa55 url(https://pic1.imgdb.cn/item/68634d9958cb8da5c8811cd6.jpg) no-repeat center/cover; /* 背景图片,可替换成你自己喜欢的 */
border-radius: 0px;
box-shadow: 0 15px 0px rgba(0, 0, 0, 0);
font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
}
.song-info {animation: flash 2s linear infinite ;
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
z-index: 5;
padding: 10px;
}
.song-title {
font-size: 38px;
font-weight: 300;
color: #00ff00; /* 歌曲信息文字颜色，可修改 */
text-shadow: 0 2px 10px rgba(233, 69, 96, 1);
margin-bottom: 5px;
}
.song-artist {
font-size: 28px;
color: #00ff00; /* 歌手信息文字颜色 ，可修改 */
}
canvas {animation: flash 2s linear infinite ;
position: absolute;
z-index: 2;
width: 120%;
height: 100%;
display: block;
cursor: pointer;
transition: transform 0.3s ease;
margin-top: -100px; /* 修改这里的数字调整动画歌词定位 */
margin-left: -66px;/* 修改这里的数字调整动画歌词定位 */
pointer-events: none;
}
canvas:hover {
transform: scale(1.05);
}
.lyric-preview {
display: none;/* 隐藏文本歌词 */
opacity: 1;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
color: #00ff00;
font-size: 16px;
text-align: center;
width: 70%;
z-index: 3;
cursor: pointer;
padding: 12px;
border-radius: 10px;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
@keyframes flash {
to { filter: hue-rotate(360deg)brightness(260%); }
}
.lyric-preview:hover {
display: none;
background: rgba(0, 0, 0, 0);
transform: translateX(-50%) scale(1.02);
}
.prev-lyric {
opacity: 1;
margin-bottom: 6px;
transition: opacity 0.2s ease;
color: #00ff00;
font-size: 14px;
}
.current-lyric {
font-size: 18px;
font-weight: bold;
color: #00ff00;
transition: opacity 0.2s ease;
}
.next-lyric {
opacity: 1;
margin-top: 6px;
transition: opacity 0.2s ease;
color: #00ff00;
font-size: 14px;
}
.lyric-preview:active .current-lyric {
opacity: 1;
}
/* 播放按钮样式 - 单图控制 */
#player {animation: flash 3s linear infinite ;
position: absolute;
z-index: 10;
left: 5%;
bottom: 120px;
width: 120px;
height: 120px;
opacity: 1;
transition: .4s;
display: grid;
place-items: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.);/* 播放按钮背景色，可修改 */
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 播放按钮背景投影，可修改 */
}
/* 单张图片作为按钮*/
#player::before {
position: absolute;
z-index: 1;
content: '';
width: 120px;
height: 120px;
background: url(https://pic1.imgdb.cn/item/68ecb824c5157e1a886c5150.png) no-repeat center/cover;/* 播放按钮图片 */
border-radius: 50%;
transition: transform 0.3s ease;
}
/* 旋转动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 播放状态下旋转 */
#player.playing::before {
animation: rotate 5s linear infinite;
}
/* 悬停时加速旋转 */
#player.playing:hover::before {
animation-duration: 5s;
}
#player:hover {
transform: scale(1.01);
background: rgba(255, 255, 255, 0);
}
#bgVideo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%; /* 如果要隐藏视频水印，可修改这里的参数 */
height: 100%; /* 如果要隐藏视频水印，可修改这里的参数 */
filter: brightness(0.7);
object-fit: cover;
opacity: 1; /* 视频透明度，视情况修改 */
}
/* 进度条容器 */
.progress-container {
position: absolute;
bottom: 40px;/* 进度条定位参数，可自由定位 */
left: 5%;/* 进度条定位参数，可修改，或设为固定值 */
width: 90%;/* 进度条长度，可修改，或设为固定值 */
z-index: 10;
background: #444;
height: 6px;/* 进度条高度，可修改，此为控制进度条粗细的关键参数 */
border-radius: 3px;
cursor: pointer;
}
.progress-bar {
height: 100%;
width: 0%;
background:#eee;
border-radius: 3px;
transition: width 0.1s linear;
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(233, 69, 96, 0.8);
opacity: 0;
transition: opacity 0.2s;
}
.progress-container:hover .progress-bar::after {
opacity: 1;
}
.time-display {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 14px;
color: #b8b8b8;
}
.controls {
position: absolute;
bottom: 70px;
right: 5%;
display: flex;
align-items: center;
gap: 15px;
z-index: 10;
}
.control-btn {
background:rgba(255, 255, 255, 0) ;
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
font-size: 12px;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0);
transform: scale(1);
}
.volume-container {
display: flex;
align-items: center;
gap: 10px;
}
.volume-slider {
width: 0px;
height: 0px;
background: rgba(255, 255, 255, 0);
border-radius: 0px;
position: relative;
}
.volume-level {
height: 100%;
width: 80%;
background: #e94560;
border-radius: 2px;
}
/* 加载进度显示 */
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
color: #fff;
z-index: 20;
background: rgba(0, 0, 0, 0.7);
padding: 20px 40px;
border-radius: 10px;
display: none;
}
/* 播放列表样式 */
.playlist-container {
position: absolute;
top: 20px;/* 播放列表按钮定位参数，可自由修改定位 */
right: 30px;/* 播放列表按钮定位参数，可自由修改定位 */
z-index: 10;
width: 40px;
height: 40px;
transition: all 0.3s ease;
}
.playlist-trigger {
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
backdrop-filter: blur(1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.playlist-trigger:hover {
background: rgba(233, 69, 96, 1);
transform: scale(1.1);
}
.playlist-trigger::before {
content: "≡";
color: white;
font: 200 20px/15px ;
}
.playlist {
position: absolute;
top: 50px;
right: 0;
background: rgba(0, 0, 0, 0);
border-radius: 10px;
padding: 10px;
height: 300px; /* 固定高度300px，可适当修改*/
overflow: hidden;
width: 200px;/* 播放列表宽度参数，可修改 */
transition: all 0.3s ease;
backdrop-filter: blur(0px);
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
}
.playlist-container:hover .playlist {
opacity: 1;
visibility: visible;
}
.playlist-header {
margin-bottom: 10px;
color: #00ff00;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 8px;
flex-shrink: 0; /* 防止标题被压缩 */
}
.playlist-items {
flex: 1; /* 占据剩余空间 */
overflow-y: auto; /* 垂直滚动 */
padding-right: 5px; /* 为滚动条留出空间 */
/* Webkit浏览器滚动条样式 (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: rgba(233, 69, 96, 0.8);
border-radius: 3px;
transition: background 0.3s;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(233, 69, 96, 0.8);
}
/* 火狐浏览器滚动条样式 */
scrollbar-width: thin;
scrollbar-color: rgba(233, 69, 96, 0.5) rgba(255, 255, 255, 0.1);
}
.playlist-item {
padding: 8px 12px;
margin: 5px 0;/* 列表内间距参数，可修改 */
line-height: 0.7; /* 列表行间距参数，可修改 */
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
font-size: 14px;
flex-shrink: 0; /* 防止项目被压缩 */
}
.playlist-item:hover {
background: rgba(233, 69, 96, 0.3);
}
.playlist-item.active {
background: rgba(233, 69, 96, 0.5);
color: white;
}
/* 兼容性处理：针对不支持嵌套CSS的浏览器 */
.playlist-items::-webkit-scrollbar {
width: 6px;
}
.playlist-items::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.playlist-items::-webkit-scrollbar-thumb {
background: rgba(233, 69, 96, 0.8);
border-radius: 3px;
transition: background 0.3s;
}
.playlist-items::-webkit-scrollbar-thumb:hover {
background: rgba(233, 69, 96, 0.8);
}
#canv {display: block; position: absolute;width:100%; height:300px; bottom: 0px; left: 40px;z-index:4; animation: sp 1s linear infinite;}
@keyframes sp {
0% { filter:hue-rotate(360deg)contrast(150%)brightness(80%); }
}
</style>
<div id="bj">
<!-- 默认显示的歌曲信息 可视情况隐藏或显示-->
<div class="song-info">
<div class="song-title">给不了真情别碰我真心 </div>
<div class="song-artist">演唱：恰恰恰恰恰</div>
</div>
<div class="lyric-preview" id="lyricPreview">
<div class="prev-lyric" id="prevLyric"></div>
<div class="current-lyric" id="currentLyric"></div>
<div class="next-lyric" id="nextLyric"></div>
</div>
<div id="player" title="暂停/播放"></div>
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
<div class="time-display">
<span id="currentTime">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
<!-- 播放按钮上下首功能， 可视情况隐藏或显示-->
<div class="controls">
<button class="control-btn" id="prevBtn" title="上一曲">◀◀</button>
<button class="control-btn" id="nextBtn" title="下一曲">▶▶</button>
<div class="volume-container">
<button class="control-btn" id="volumeBtn" title="静音"></button>
<div class="volume-slider" id="volumeSlider">
<div class="volume-level" id="volumeLevel"></div>
</div>
</div>
</div>
<!-- 播放列表容器，顺序不要随意修改-->
<div class="playlist-container">
<div class="playlist-trigger" title="播放列表"></div>
<div class="playlist" id="playlist">
<h3 class="playlist-header">歌曲列表</h3>
<div class="playlist-items">
<div class="playlist-item active" data-index="0">给不了真情别碰我真心</div>
<div class="playlist-item" data-index="1">假如世界没有你/搀扶</div>
<div class="playlist-item" data-index="2">倒杯雪花问问雪花- 睦焱</div>
<div class="playlist-item" data-index="3">偏偏我熬不过这场思念</div>
<div class="playlist-item" data-index="4">想你一次落一粒沙-大潞</div>
<div class="playlist-item" data-index="5">别在这个冬天把我丢下 </div>
<div class="playlist-item" data-index="6">泪的小雨-石川小町</div>
<div class="playlist-item" data-index="7">最远的你是我最近的爱</div>
</div>
</div>
</div>
<div class="loading" id="loading">加载中...</div>
<canvas id='canv'width="1300" height="300"></canvas>
<canvas id="glcanvas" width="900" height="420"></canvas>
<video id="bgVideo" src="" muted loop></video><!-- 这里视频可以留空白，也可以设置一个自定义视频 -->
<!-- 播放器将从播放列表加载 -->
<audio id="audio" crossOrigin="anonymous"></audio>
</div>
<script>
// 歌曲数据
const songs = [
{
title: "给不了真情别碰我真心",
artist: "恰恰恰恰恰",
audioUrl: "https://s2.ananas.chaoxing.com/sv-w7/audio/a2/80/0c/e8d7c43f58949acadb2fe641a6b48362/audio.mp3",
videoUrl: "", // 每首歌可以配置不同的视频链接
lyrics: `
给不了真情别碰我真心-恰恰恰恰恰
词：宋友诚
曲：李文龙
编曲：贺祺音乐
混音：王亚东
制作人：亚伦
OP 亚伦影音工作室
当初主动靠近我的人是你
说要陪我到老的人也是你
发誓永远不离不弃的是你
怎么转身离去的还是你
答应为我遮风挡雨的是你
把我丢在风里哭泣的是你
发誓不会让我受伤的是你
偏偏伤我最深的就是你
给不了真情就别碰我的真心
给不了幸福就别拿未来画饼
做不到的承诺就别说给我听
完不成的约定就别再让我相信
给不了真情就别碰我的真心
给不了结局就别再纠缠不清
我从来不后悔今生爱上了你
只是遗憾最爱的人没能让我赢
答应为我遮风挡雨的是你
把我丢在风里哭泣的是你
发誓不会让我受伤的是你
偏偏伤我最深的就是你
给不了真情就别碰我的真心
给不了幸福就别拿未来画饼
做不到的承诺就别说给我听
完不成的约定就别再让我相信
给不了真情就别碰我的真心
给不了结局就别再纠缠不清
我从来不后悔今生爱上了你
只是遗憾最爱的人没能让我赢
给不了真情就别碰我的真心
给不了幸福就别拿未来画饼
做不到的承诺就别说给我听
完不成的约定就别再让我相信
给不了真情就别碰我的真心
给不了结局就别再纠缠不清
我从来不后悔今生爱上了你
只是遗憾最爱的人没能让我赢
`
},
{
title: "假如世界没有你/搀扶",
artist: "影子、马健涛",
audioUrl: "https://s2.cldisk.com/sv-w8/audio/13/cd/f0/7cc35fa3146b936b827f00e9b26da9da/audio.mp3",
videoUrl: "",
lyrics: `
歌名：假如世界没有你remix搀扶
演唱：影子、马健涛
亚伦影音工作室出品
假如你厌倦了别离
我等着你的归期
假如生命中没有了你
我的心情不会美丽
假如这世界没有你
什么都提不起兴趣
假如有一天又见到了你
幸福的会把眼泪滴
假如你爱情不如意
我该不该靠近你
假如你生活不如意
欢迎回到我这里
假如这世界没有你
什么都提不起兴趣
假如有一天又见到了你
幸福的会把眼泪滴
假如你爱情不如意
我该不该靠近你
假如你生活不如意
欢迎回到我这里
欢迎回到我这里
Years ago I took your hand
And from that day we face the storm as one
When rain fell I held the umbrella close
When clothes were torn you stitched them back with love
一转眼就过了许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
In the blink of time
So many years have passed
My eyes now carry traces of the past
Your eyes are written with gentle lines
Yet your beauty lives unchanging in my heart
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死了也要葬在一个山头
I'll hold your hand as time keeps flowing on
Don't cry I'm here still guarding you
And when one day we can no longer walk
We'll meet again
We'll meet again
Hand in hand
Hand in hand
另外一个时空再相见
`
},
{
title: "倒杯雪花问问雪花",
artist: "睦焱",
audioUrl: "https://s2.cldisk.com/sv-w7/audio/27/8d/2f/c39220458b95cb4de35f4d8b7adb8b74/audio.mp3",
videoUrl: "",
lyrics: `
歌名：倒杯雪花问问雪花
倒杯雪花问问雪花-睦焱
词：伊一
曲：孙鸣灿
编曲：大头
混音：冯鑫阳
OP：海纳音子
睦焱演唱
倒杯雪花问问雪花
爱我的她去了哪
为何要在这冬把我给丢下
倒杯雪花再问问雪花
她现在和谁白发
为何承诺啊那么快就融化
一次相遇一生牵挂
只有我还放你不下
所有的回忆都在冬夜看我笑话
一想你就泪如雨下
我的心都为你挣扎
若是有来生能否换你对我牵挂
倒杯雪花问问雪花
爱我的她去了哪
为何要在这冬把我给丢下
倒杯雪花再问问雪花
她现在和谁白发
为何承诺啊那么快就融化
一次相遇一生牵挂
只有我还放你不下
所有的回忆都在冬夜看我笑话
一想你就泪如雨下
我的心都为你挣扎
若是有来生能否换你对我牵挂
倒杯雪花问问雪花
爱我的她去了哪
为何要在这冬把我给丢下
一次相遇一生牵挂
只有我还放你不下
所有的回忆都在冬夜看我笑话
一想你就泪如雨下
我的心都为你挣扎
若是有来生能否换你对我牵挂
倒杯雪花问问雪花
爱我的她去了哪
为何要在这冬把我给丢下
`
},
{
title: "偏偏我熬不过这场思念",
artist: "六小乐",
audioUrl: "https://s2.ananas.chaoxing.com/sv-w9/audio/f4/94/94/457aa119125d3cd19e6a6a97fea57330/audio.mp3",
videoUrl: "",
lyrics: `
偏偏我熬不过这场思念
演唱：六小乐
作曲：五条悟
填词：未子夫
编曲：阿诺瓦
混音：阿诺瓦
监制：余云飞
出品：亚伦音乐传媒
爱你太满忘你太慢
结局太难堪
没你的陪伴长夜太漫漫
遇见太晚 故事太短
戒掉你太难
再也等不到你一句晚安
说爱就爱说散就散
说断就了断
怪我看不穿你虚伪表演
爱写一段爱到一半
就天各一端
我心有不甘你不顾不管
想你是心酸提你是遗憾
爱你一次让我进退两难
熬过冷雨夜 熬过风雪天
偏偏我熬不过这场思念
说爱就爱说散就散
说断就了断
怪我看不穿你虚伪表演
爱写一段爱到一半
就天各一端
我心有不甘你不顾不管
想你是心酸提你是遗憾
爱你一次让我进退两难
熬过冷雨夜 熬过风雪天
偏偏我熬不过这场思念
想你是心酸提你是遗憾
爱你一次让我进退两难
熬过冷雨夜 熬过风雪天
偏偏我熬不过这场思念
想你是心酸提你是遗憾
爱你一次让我进退两难
熬过冷雨夜 熬过风雪天
偏偏我熬不过这场思念`
},
{ title: "想你一次落一粒沙",
artist: "大潞",
audioUrl: "https://s2.cldisk.com/sv-w7/audio/ae/63/e4/8ebea87d2bf61d84643264e6a0d511f4/audio.mp3",
videoUrl: "",
lyrics: `
想你一次落一粒沙
词：未子夫
曲：徐嘉良
编曲：王亚东
和声：扁桃体不发言
混音：王亚东
推广：汉马文化@瓜子/七月
制作人：亚伦
OP：亚伦音乐传媒
授权填词作品禁止盗版翻唱！
演唱 大潞
晚风沙沙 吹起了泪花
我的伤口 密密麻麻
前尘往事 被岁月风化
句句情话 都变了卦
就像白鸽 不会爱乌鸦
你像野马不会为我停下
我们走过了一段最美年华
最后变成了 最痛伤疤
想你一次 就落一粒沙
世上从此 有了撒哈拉
我曾为你犯错为你犯傻
如今依然为你痴痴牵挂
想你一次 就落一粒沙
可惜我们早已各安天涯
山盟海誓刻在 三生石下
若有来生 再爱好吗
人世间匆匆又几个冬夏
再也听不见 你的回答
就像白鸽 不会爱乌鸦
你像野马不会为我停下
我们走过了一段最美年华
最后变成了 最痛伤疤
想你一次 就落一粒沙
世上从此 有了撒哈拉
我曾为你犯错为你犯傻
如今依然为你痴痴牵挂
想你一次 就落一粒沙
可惜我们早已各安天涯
山盟海誓刻在 三生石下
若有来生 再爱好吗
人世间匆匆又几个冬夏
再也听不见 你的回答
`
},
{
title: "别在这个冬天把我丢下",
artist: "陈小葵",
audioUrl: "https://s2.cldisk.com/sv-w8/audio/b3/44/79/b85ff78fb1b0f72cfedb86ade67baef3/audio.mp3",
videoUrl: "",
lyrics: `
歌名：别在这个冬天把我丢下
演唱：陈小葵
这冬夜太冷像刀子刮脸
我心里空空只剩你那边
你一句不回我就乱了线
越想越发疯眼泪往下咽
我不是不硬我是真没辙
你一走就像把我扔在这
我怕你转身就把我忘了
我越忍越痛越痛越想说
每夜疯狂的想你想到心发烫
怕你说散就散把我留在雪上
我一遍遍喊你喊到嗓子伤
别在这个冬天把我丢下别让我流浪
每夜疯狂的想你想到天发亮
怕你转身就走不管我多慌
我一遍遍等你等到风更凉
别在这个冬天把我丢下我真的扛不住寒
我不是不硬我是真没辙
你一走就像把我扔在这
我怕你转身就把我忘了
我越忍越痛越痛越想说
每夜疯狂的想你想到心发烫
怕你说散就散把我留在雪上
我一遍遍喊你喊到嗓子伤
别在这个冬天把我丢下别让我流浪
每夜疯狂的想你想到天发亮
怕你转身就走不管我多慌
我一遍遍等你等到风更凉
别在这个冬天把我丢下我真的扛不住寒
每夜疯狂的想你想到心发烫
怕你说散就散把我留在雪上
我一遍遍喊你喊到嗓子伤
别在这个冬天把我丢下别让我流浪
每夜疯狂的想你想到天发亮
怕你转身就走不管我多慌
我一遍遍等你等到风更凉
别在这个冬天把我丢下我真的扛不住寒
未经许可,不得翻唱或使用
`
},
{title: "泪的小雨",
artist: "石川小町",
audioUrl: "https://s2.cldisk.com/sv-w9/audio/e4/e4/7c/8ce9e465857bc4bee35a79d36197baee/audio.mp3",
videoUrl: "",
lyrics: `
石川小町 - 泪的小雨
演唱：石川小町
亚伦影音工作室
分不出是泪是雨
泪和雨忆起了你
忆起你雨中分离
泪珠儿洒满地
哭泣你哭泣为了分离
分离分离后再相见不易
我重把你的爱情藏在我心底
藏在我心底
就好像藏起回忆
我喜欢绵绵细雨
细雨里忆起了你
忆起你在我怀里
泪珠儿洒满地
哭泣你哭泣为了分离
分离分离后再相见不易
我重把你的影子藏在睡梦里
啊藏在睡梦里
就好像藏起回忆
`
},
{
title: "最远的你是我最近的爱",
artist: "烟嗓大叔",
audioUrl: "https://s2.ananas.chaoxing.com/sv-w9/audio/94/1a/04/c5823a620bde777fc9d42157377b74d3/audio.mp3",
videoUrl: "",
lyrics: `
最远的你是我最近的爱
字幕：亚伦
出品：亚伦影音工作室
演唱：烟嗓大叔
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
夜已沉默
心事向谁说
不肯回头
所有的爱都错过
别笑我懦弱
我始终不能猜透
为何人生淡薄
风雨之后
无所谓拥有
萍水相逢
你却给我那么多
你挡住寒冬
温暖只保留给我
风霜寂寞
凋落在你的怀中
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
风雨之后
无所谓拥有
萍水相逢
你却给我那么多
你挡住寒冬
温暖只保留给我
风霜寂寞
凋落在你的怀中
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
人生风景在游走
每当孤独我回首
你的爱总在不远地方等着我
岁月如流在穿梭
喜怒哀乐我深锁
只因有你在天涯尽头等着我
`
}// 最后一首歌括号后面不要逗号
];
const state = {
currentSongIndex: 0,
currentLyricIndex: 0,
isAudioEnabled: true,
isPlaying: false,
mouseX: 0,
mouseY: 0,
isHovering: false,
lyrics: [],
hoverValue: 0,
hoverSpeed: 0.005,
lastMouseMoveTime: 0,
throttleDelay: 100,
userInteracted: false,
animationId: null,
isAnimating: false,
isDragging: false,
volume: 0.8,
isMuted: false
};
const elements = {
canvas: document.getElementById('glcanvas'),
audio: document.getElementById('audio'),
lyricPreview: document.getElementById('lyricPreview'),
prevLyric: document.getElementById('prevLyric'),
currentLyric: document.getElementById('currentLyric'),
nextLyric: document.getElementById('nextLyric'),
player: document.getElementById('player'),
bgVideo: document.getElementById('bgVideo'),
progressContainer: document.getElementById('progressContainer'),
progressBar: document.getElementById('progressBar'),
currentTime: document.getElementById('currentTime'),
duration: document.getElementById('duration'),
prevBtn: document.getElementById('prevBtn'),
nextBtn: document.getElementById('nextBtn'),
volumeBtn: document.getElementById('volumeBtn'),
volumeSlider: document.getElementById('volumeSlider'),
volumeLevel: document.getElementById('volumeLevel'),
loading: document.getElementById('loading'),
songTitle: document.querySelector('.song-title'),
songArtist: document.querySelector('.song-artist'),
playlist: document.getElementById('playlist'),
playlistItems: document.querySelectorAll('.playlist-item')
};
// ===================== 初始化检测 =====================
function initCheck() {
const gl = elements.canvas.getContext('webgl') || elements.canvas.getContext('experimental-webgl');
if (!gl) {
state.isAudioEnabled = false;
return null;
}
return gl;
}
// ===================== LRC歌词解析 =====================
function parsePureLRC(lrcText) {
const lines = [];
const lrcLines = lrcText.split('\n')
.map(line => line.trim())
.filter(line => line && !line.includes('●') && !line.includes('谢谢欣赏'));
for (const line of lrcLines) {
const timeRegex = /\[(\d{2}):(\d{2})(?:\.(\d{1,3}))?\]/g;
const text = line.replace(timeRegex, '').trim();
let timeMatch;
while ((timeMatch = timeRegex.exec(line)) !== null) {
const minutes = parseInt(timeMatch);
const seconds = parseInt(timeMatch);
const ms = timeMatch ? parseInt(timeMatch.padEnd(3, '0')) : 0;
const time = minutes * 60 + seconds + ms / 1000;
if (text) {
lines.push({ time, text });
}
}
}
return lines.sort((a, b) => a.time - b.time);
}
// ===================== 歌词跳转 =====================
function jumpToLyricByText(clickText) {
if (!clickText.trim()) return;
const targetLyric = state.lyrics.find(lyric => lyric.text === clickText.trim());
if (!targetLyric) return;
elements.audio.currentTime = targetLyric.time;
const targetIndex = state.lyrics.findIndex(lyric => lyric.text === clickText.trim());
if (targetIndex !== -1) {
state.currentLyricIndex = targetIndex;
elements.prevLyric.textContent = state.lyrics?.text || '';
elements.currentLyric.textContent = state.lyrics.text;
elements.nextLyric.textContent = state.lyrics?.text || '';
if (window.render && window.render.updateTextTexture) {
window.render.updateTextTexture(state.lyrics.text);
}
}
}
// ===================== WebGL渲染 =====================
function initWebGL(gl) {
function compileShader(src, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
const vertexShaderSource = `
attribute vec2 a_pos;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
v_uv = a_uv;
gl_Position = vec4(a_pos, 0.9, 1.0);
}
`;
const fragmentShaderSource = `
precision highp float;
varying vec2 v_uv;
uniform sampler2D u_text;
uniform float u_time;
uniform vec2 u_mouse;
uniform float u_hover;
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}
float noise(vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);
float a = random(i);
float b = random(i + vec2(1.0,0.0));
float c = random(i + vec2(0.0,1.0));
float d = random(i + vec2(1.0,1.0));
vec2 u = f*f*(3.0-2.0*f);
return mix(a,b,u.x) + (c-a)*u.y*(1.0-u.x) + (d-b)*u.x*u.y;
}
void main() {
vec2 correctedUV = vec2(v_uv.x, 1.0-v_uv.y);
float strength = smoothstep(0.2,1.0,correctedUV.y);
float noiseTime = u_time * 0.3;
float n = noise(vec2(correctedUV.x*5.0, (correctedUV.y*2.0 - noiseTime)*2.0));
float melt = n * 0.4 * (correctedUV.y);
float dist = distance(correctedUV, u_mouse);
float hoverWave = 0.0;
if (u_hover > 0.1) {
hoverWave = sin(dist*12.0 - u_time*6.0)*0.08*u_hover*exp(-dist*3.5) +
sin(dist*20.0 - u_time*10.0)*0.04*u_hover*exp(-dist*5.0);
}
vec2 hoverDistort = normalize(correctedUV - u_mouse) * hoverWave * (1.0 + sin(u_time*2.0)*0.1);
vec2 finalUV = vec2(
correctedUV.x + melt*0.3 + hoverDistort.x,
correctedUV.y - melt*0.8 + hoverDistort.y
);
vec4 col = texture2D(u_text, finalUV);
if (col.a > 0.1) {
float glow = smoothstep(0.8,1.0,col.a);
vec3 spectrumColor = vec3(correctedUV.y, abs(sin(u_time + correctedUV.x*5.0)), 1.0-correctedUV.y);
if (u_hover > 0.1) {
float hoverIntensity = 1.0 - smoothstep(0.0,0.1,dist);
float pulseEffect = 0.99 + 0.1*sin(u_time*4.0 + dist*8.0);
vec3 goldColor = vec3(0.99, 0.99+0.8*pulseEffect, 0.2+0.2*sin(u_time*3.0));
vec3 blueColor = vec3(0.99+0.99*sin(u_time*2.0 + dist*6.0), 0.99+0.8*pulseEffect, 0.5);
spectrumColor = mix(spectrumColor, mix(goldColor, blueColor, 0.99), hoverIntensity*u_hover*0.99);
glow += hoverIntensity*u_hover*0.99;
}
col.rgb = mix(col.rgb, spectrumColor, 0.99*glow);
// 优化粒子效果
if (u_hover > 0.1 && dist < 0.2) {
float particles = noise(correctedUV*15.0 + u_time*2.0);
if (particles > 0.85) col.rgb += vec3(1.0,0.8,0.4)*(particles-0.85)*8.0*u_hover;
float sparkles = noise(correctedUV*30.0 + u_time*4.0);
if (sparkles > 0.92 && dist < 0.15) col.rgb += vec3(0.9,0.9,1.0)*(sparkles-0.92)*6.0*u_hover;
}
}
if (u_hover > 0.1) {
float ambientGlow = 1.0 - smoothstep(0.0,0.4,dist);
float auraEffect = sin(dist*6.0 - u_time*3.0)*0.2 + 0.8;
vec3 auraColor = vec3(
0.15+0.1*sin(u_time*1.5),
0.1+0.1*sin(u_time*2.0+1.0),
0.2+0.15*sin(u_time*1.2+2.0)
);
col.rgb += auraColor*ambientGlow*u_hover*auraEffect;
float outerHalo = 1.0 - smoothstep(0.2,0.5,dist);
col.rgb += vec3(0.08,0.04,0.12)*outerHalo*u_hover*0.3;
}
gl_FragColor = col;
}
`;
const vs = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
const fs = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
const quad = new Float32Array([
-1, -1, 0, 0,
1, -1, 1, 0,
-1, 1, 0, 1,
1, 1, 1, 1
]);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
const a_pos = gl.getAttribLocation(program, 'a_pos');
const a_uv = gl.getAttribLocation(program, 'a_uv');
gl.enableVertexAttribArray(a_pos);
gl.vertexAttribPointer(a_pos, 2, gl.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(a_uv);
gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 16, 8);
const uniforms = {
u_time: gl.getUniformLocation(program, 'u_time'),
u_text: gl.getUniformLocation(program, 'u_text'),
u_mouse: gl.getUniformLocation(program, 'u_mouse'),
u_hover: gl.getUniformLocation(program, 'u_hover')
};
const textCanvas = document.createElement('canvas');
const tctx = textCanvas.getContext('2d');
textCanvas.width = elements.canvas.width;
textCanvas.height = elements.canvas.height;
const textTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, textTex);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
function updateTextTexture(text) {
tctx.clearRect(0, 0, textCanvas.width, textCanvas.height);
tctx.fillStyle = '#000000';
// 修改：缩小WebGL渲染的字体大小，与预览歌词保持一致
tctx.font = 'bold 35px "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"'; // 原为36px
tctx.textAlign = 'center';
tctx.textBaseline = '';
tctx.fillText(text || '', textCanvas.width / 2, textCanvas.height / 2);
gl.bindTexture(gl.TEXTURE_2D, textTex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textCanvas);
}
// 绘制函数
function draw(t) {
if (!state.isAudioEnabled || !state.isAnimating) return;
if (state.isHovering && state.hoverValue < 1.0) {
state.hoverValue = Math.min(1.0, state.hoverValue + state.hoverSpeed);
} else if (!state.isHovering && state.hoverValue > 0.0) {
state.hoverValue = Math.max(0.0, state.hoverValue - state.hoverSpeed);
}
gl.viewport(0, 0, elements.canvas.width, elements.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
const time = t * 0.0005;
gl.uniform1f(uniforms.u_time, time);
gl.uniform2f(uniforms.u_mouse, state.mouseX, state.mouseY);
gl.uniform1f(uniforms.u_hover, state.hoverValue);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textTex);
gl.uniform1i(uniforms.u_text, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
state.animationId = requestAnimationFrame(draw);
}
return { updateTextTexture, draw};
}
// ===================== 歌词同步 =====================
function updateLyric() {
if (!state.isAudioEnabled || !state.lyrics.length || !state.isPlaying) return;
const currentTime = elements.audio.currentTime;
const { lyrics } = state;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime && currentTime < nextLyricTime && state.currentLyricIndex !== i) {
state.currentLyricIndex = i;
if (window.render && window.render.updateTextTexture) {
window.render.updateTextTexture(lyrics.text);
}
// 更新歌词预览
elements.prevLyric.textContent = lyrics?.text || '';
elements.currentLyric.textContent = lyrics.text;
elements.nextLyric.textContent = lyrics?.text || '';
break;
}
}
if (state.isPlaying) {
requestAnimationFrame(updateLyric);
}
}
// ===================== 进度条更新 =====================
function updateProgress() {
if (!state.isAudioEnabled || !state.isPlaying) return;
const currentTime = elements.audio.currentTime;
const duration = elements.audio.duration;
if (duration) {
const progressPercent = (currentTime / duration) * 100;
elements.progressBar.style.width = `${progressPercent}%`;
// 更新时间显示
elements.currentTime.textContent = formatTime(currentTime);
elements.duration.textContent = formatTime(duration);
}
if (state.isPlaying) {
requestAnimationFrame(updateProgress);
}
}
// ===================== 时间格式化 =====================
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
// ===================== 音量控制 =====================
function updateVolume() {
elements.audio.volume = state.volume;
elements.volumeLevel.style.width = `${state.volume * 100}%`;
if (state.volume === 0 || state.isMuted) {
elements.volumeBtn.textContent = '';
} else if (state.volume < 0.5) {
elements.volumeBtn.textContent = '';
} else {
elements.volumeBtn.textContent = '';
}
}
// ===================== 切换歌曲 =====================
function switchSong(index) {
if (index === state.currentSongIndex) return;
// 停止当前播放
if (state.isPlaying) {
elements.audio.pause();
}
// 更新当前歌曲索引
state.currentSongIndex = index;
// 更新播放列表高亮
elements.playlistItems.forEach((item, i) => {
if (i === index) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
// 更新歌曲信息
const currentSong = songs;
elements.songTitle.textContent = currentSong.title;
elements.songArtist.textContent = `演唱：${currentSong.artist}`;
// 重要修改：从播放列表加载音频和视频源
elements.audio.src = currentSong.audioUrl;
elements.bgVideo.src = currentSong.videoUrl;
// 解析歌词
state.lyrics = parsePureLRC(currentSong.lyrics);
state.currentLyricIndex = 0;
// 更新歌词显示
if (state.lyrics.length > 0) {
window.render.updateTextTexture(state.lyrics.text);
elements.prevLyric.textContent = '';
elements.currentLyric.textContent = state.lyrics.text;
elements.nextLyric.textContent = state.lyrics?.text || '';
}
// 重置进度条
elements.progressBar.style.width = '0%';
elements.currentTime.textContent = '0:00';
elements.duration.textContent = '0:00';
// 加载并播放新歌曲
elements.audio.load();
attemptAutoPlay();
}
// ===================== 事件绑定 =====================
function bindEvents(gl) {
window.addEventListener('resize', () => {
if (!gl) return;
const width = elements.canvas.parentElement.clientWidth * 0.95;
const height = elements.canvas.parentElement.clientHeight * 0.6;
elements.canvas.width = width;
elements.canvas.height = height;
});
elements.canvas.addEventListener('mousemove', (e) => {
const now = Date.now();
if (now - state.lastMouseMoveTime < state.throttleDelay) return;
state.lastMouseMoveTime = now;
if (state.isAudioEnabled) {
const rect = elements.canvas.getBoundingClientRect();
state.mouseX = (e.clientX - rect.left) / rect.width;
state.mouseY = 1.0 - (e.clientY - rect.top) / rect.height;
state.isHovering = true;
}
});
elements.canvas.addEventListener('mouseleave', () => {
state.isHovering = false;
});
elements.lyricPreview.addEventListener('click', (e) => {
const target = e.target;
if (target.classList.contains('prev-lyric') ||
target.classList.contains('current-lyric') ||
target.classList.contains('next-lyric')) {
const clickText = target.textContent;
jumpToLyricByText(clickText);
}
});
elements.player.addEventListener('click', function(e) {
console.log('播放按钮被点击');
e.stopPropagation();
togglePlayback();
});
// 进度条点击事件
elements.progressContainer.addEventListener('click', (e) => {
if (!state.isAudioEnabled) return;
const rect = elements.progressContainer.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
elements.audio.currentTime = percent * elements.audio.duration;
});
// 进度条拖动事件
elements.progressContainer.addEventListener('mousedown', (e) => {
state.isDragging = true;
const rect = elements.progressContainer.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
elements.audio.currentTime = percent * elements.audio.duration;
});
document.addEventListener('mousemove', (e) => {
if (state.isDragging) {
const rect = elements.progressContainer.getBoundingClientRect();
const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
elements.audio.currentTime = percent * elements.audio.duration;
}
});
document.addEventListener('mouseup', () => {
state.isDragging = false;
});
// 音量控制
// 上一曲按钮
elements.prevBtn.addEventListener('click', () => {
const prevIndex = state.currentSongIndex > 0 ? state.currentSongIndex - 1 : songs.length - 1;
switchSong(prevIndex);
});
// 下一曲按钮
elements.nextBtn.addEventListener('click', () => {
const nextIndex = state.currentSongIndex < songs.length - 1 ? state.currentSongIndex + 1 : 0;
switchSong(nextIndex);
});
// 播放列表点击事件
elements.playlistItems.forEach((item, index) => {
item.addEventListener('click', () => {
switchSong(index);
});
});
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
togglePlayback();
} else if (e.code === 'ArrowLeft') {
elements.audio.currentTime = Math.max(0, elements.audio.currentTime - 5);
} else if (e.code === 'ArrowRight') {
elements.audio.currentTime = Math.min(elements.audio.duration, elements.audio.currentTime + 5);
} else if (e.code === 'ArrowUp') {
state.volume = Math.min(1, state.volume + 0.1);
updateVolume();
} else if (e.code === 'ArrowDown') {
state.volume = Math.max(0, state.volume - 0.1);
updateVolume();
}
});
document.addEventListener('click', () => {
state.userInteracted = true;
});
}
// ===================== 播放控制函数 =====================
function togglePlayback() {
console.log('togglePlayback 被调用，当前状态:', elements.audio.paused ? '暂停' : '播放');
if (elements.audio.paused) {
elements.audio.play().catch(error => {
console.error('播放失败:', error);
});
} else {
elements.audio.pause();
}
updatePlayerState();
}
function updatePlayerState() {
if (elements.audio.paused) {
// 暂停状态 - 移除旋转类
elements.player.classList.remove('playing');
state.isPlaying = false;
state.isAnimating = false;
// 暂停背景视频
elements.bgVideo.pause();
// 停止WebGL动画
if (state.animationId) {
cancelAnimationFrame(state.animationId);
state.animationId = null;
}
} else {
// 播放状态 - 添加旋转类
elements.player.classList.add('playing');
state.isPlaying = true;
state.isAnimating = true;
// 播放背景视频
elements.bgVideo.play().catch(e => {
console.log('背景视频播放失败:', e);
});
// 启动WebGL动画
if (window.render && window.render.draw) {
state.animationId = requestAnimationFrame(window.render.draw);
}
// 启动歌词同步
updateLyric();
// 启动进度条更新
updateProgress();
}
console.log('播放状态更新:', state.isPlaying ? '播放中' : '已暂停');
}
// ===================== 自动播放 =====================
function attemptAutoPlay() {
elements.loading.style.display = 'block';
// 尝试自动播放
const playPromise = elements.audio.play();
if (playPromise !== undefined) {
playPromise.then(() => {
// 自动播放成功
elements.loading.style.display = 'none';
updatePlayerState();
}).catch(error => {
// 自动播放失败，等待用户交互
console.log('自动播放被阻止，等待用户交互');
elements.loading.style.display = 'none';
// 显示提示
const hint = document.createElement('div');
hint.textContent = '无法播放，请更换链接或稍后再试';
hint.style.position = 'absolute';
hint.style.top = '50%';
hint.style.left = '50%';
hint.style.transform = 'translate(-50%, -50%)';
hint.style.background = 'rgba(0,0,0,1)';
hint.style.padding = '15px 30px';
hint.style.borderRadius = '10px';
hint.style.zIndex = '20';
hint.style.cursor = 'pointer';
document.getElementById('bj').appendChild(hint);
const startPlayback = () => {
elements.audio.play().then(() => {
updatePlayerState();
hint.remove();
document.removeEventListener('click', startPlayback);
});
};
hint.addEventListener('click', startPlayback);
document.addEventListener('click', startPlayback);
});
}
}
// ===================== 初始化 =====================
async function init() {
// 重要修改：从播放列表加载第一首歌
const currentSong = songs;
// 设置音频源为第一首歌
elements.audio.src = currentSong.audioUrl;
elements.bgVideo.src = currentSong.videoUrl;
state.lyrics = parsePureLRC(currentSong.lyrics);
const gl = initCheck();
if (!gl) {
console.error('WebGL不支持，播放器将无法正常工作');
elements.loading.textContent = 'WebGL不支持，播放器无法正常工作';
return;
}
window.render = initWebGL(gl);
bindEvents(gl);
// 初始化显示第一句歌词
if (state.lyrics.length > 0) {
window.render.updateTextTexture(state.lyrics.text);
elements.prevLyric.textContent = '';
elements.currentLyric.textContent = state.lyrics.text;
elements.nextLyric.textContent = state.lyrics?.text || '';
}
// 设置初始音量
updateVolume();
// 添加音频事件监听
elements.audio.addEventListener('play', updatePlayerState);
elements.audio.addEventListener('pause', updatePlayerState);
// 重要修改：修复歌曲结束时的自动切换
elements.audio.addEventListener('ended', () => {
// 歌曲结束时自动播放下一首
const nextIndex = state.currentSongIndex < songs.length - 1 ? state.currentSongIndex + 1 : 0;
switchSong(nextIndex);
});
// 尝试自动播放
attemptAutoPlay();
console.log('播放器初始化完成');
}
// 等待DOM完全加载后初始化
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
let mState = () => audio.paused ? (bj.style.animationPlayState = 'paused',glcanvas.style.animationPlayState = 'paused',player.style.animationPlayState = 'paused') : (bj.style.animationPlayState = 'running',glcanvas.style.animationPlayState = 'running',player.style.animationPlayState = 'running');
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());
</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(300,200,300,0);
ppColor.addColorStop(0.8, '#fff000');
ppColor.addColorStop(1, '#00ff00');
ppColor.addColorStop(0.8, '#fff000');
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, 2, -audiheighteight);
ctx.fillRect(width / 2- (j * 1), height, 2, -audiheighteight);
}
window.requestAnimationFrame(draw);
})();
})();
</script> 欣赏老师的特效歌词列表播放器，很新颖，点赞！
果然是特效，非常好看！做这么多歌，辛苦了！{:4_190:} 很奇妙的歌词效果，列表里这么多歌啊，歌曲切换很快。很好帖的一组歌曲。
欣赏亚伦老师好帖{:4_199:} 亚纶这个字体小辣椒没有玩过，明天学习做一次 欣赏亚纶的精彩制作{:4_187:} 精品工程，匠心之作，大师风范，给亚伦老师拜个晚年，祝马年大吉大利{:4_180:}
页:
[1]