磁带专辑播放器
本帖最后由 亚伦影音工作室 于 2025-11-4 18:15 编辑 <br /><br /><style>#bj{position: relative;width: 1286px;height: 680px;LEFT:-320px;top:10px;overflow:hidden;background:#800 url(https://pic1.imgdb.cn/item/6397a78fb1fccdcd365e4aa9.jpg)no-repeat center / cover;}
.k-container-body {top: 15%;
left: 45%;
position: absolute;transform:rotatey(0deg);
background:radial-gradient(ellipse farthest-corner at center center, transparent 0%,#555 80%),linear-gradient(45deg,
#00AA66 , #555, #00aa00, #00aa7f ,#00bb00 , #333 ),url(https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg)no-repeat center / cover;
border: 3px solid #d0d0d0;
border-radius: 15px;
width: 550px;
height: 320px;
perspective: 10000;
padding: 10px;overflow: hidden;
}
.k-container-body:before,
.k-container-body:after {
content: '';
position: absolute;
bottom: 20px;
height: 90px;
width: 35px;
border-radius: 10px;
z-index: -1;
}
.k-container-body:before {
border-left: 3px solid #d0d0d0;
left: -12px;
}
.k-container-body:after {
border-right: 3px solid #d0d0d0;
right: -12px;
}
.k-screw {
position: absolute;
display: inline-block;
border: 1px solid #d0d0d0;
border-radius: 50%;
width: 14px;
height: 14px;
}
.k-screw:before,
.k-screw:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center;
background-color: #d0d0d0;
height: 70%;
width: 2px;
}
.k-screw:before {
transform: translate(-50%, -50%) rotate(90deg);
}
.body .k-screw:after {
transform: translate(-50%, -50%) rotate(-90deg);
}
.k-screw.top-left {transform:rotateZ(12deg);
top: 7px;
left: 7px;
}
.k-screw.top-right {transform:rotateZ(-5deg);
top: 7px;
right: 7px;
}
.k-screw.bottom-left {transform:rotateZ(8deg);
bottom: 7px;
left: 7px;
}
.k-screw.bottom-right {transform:rotateZ(-10deg);
bottom: 7px;
right: 7px;
}
.k-centerreel {box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid #d0d0d0;
border-radius: 45px;
width: 300px;
height: 90px;background: linear-gradient(125deg,
#000078, #000, #ff0000, #ffd700, #00aa7f, #111111, #999999, #000080);
padding: 10px;
}
.k-centerreel .reel {
position: relative;
display: inline-block;
border: 2px solid #d0d0d0;
width: 65px;
height: 100%;
border-radius: 50%;
}
.k-centerreel .reel:before {
content: '';
display: inline-block;
width: 82%;
height: 82%;
border: 6px dashed #d0d0d0;
border-radius: 50%;
transform-origin: center;
animation: spin 3s linear infinite var(--state);
}
.k-centerreel .reel.left {
float: left;
}
.k-centerreel .reel.right {
float: right;
}
.k-centerreel .center-tape {
border: 2px solid #d0d0d0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70%;
width: 100px;
border-radius: 10px;
overflow: hidden;
}
.k-centerreel .center-tape:before {
content: '';
border: 3px solid #d0d0d0;
border-radius: 50%;
width: 80px;
height: 80px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -50%;
animation: shiftLeft 1.3s ease-in-out alternate infinite var(--state);
}
.k-centerreel .center-tape:after {
content: '';
border: 3px solid #d0d0d0;
border-radius: 50%;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -95%;
animation: shiftRight 1s ease-in-out alternate infinite var(--state);
}
.k-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #d0d0d0;
top: 25%;
max-width: 400px;
width: 100%;
padding: 0px 20px;
overflow: hidden;
}
.k-label:before {
content: '';
position: absolute;
bottom: 1.85ex;
left: 0;
right: 0;
height: 2.5ex;
border-top: 1px dashed #d0d0d0;
border-bottom: 3px dashed #d0d0d0;
z-index: -1;
}
.k-chin {
position: absolute;
left: 10%;
bottom: -6px;
transform:perspective(1em) rotateX(3deg);
transform-origin: bottom center;
max-width: 450px;
width: 100%;
height: 80px;background:ellipse farthest-corner at center center, transparent 0%,#555 100%), linear-gradient(45deg,
#00AA66, #555, #00aa00, #00aa7f,#00bb00, #333);
border-radius: 5px;
font-size: 60px;
border: 2px solid #d0d0d0;
}
.k-chin:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 30%;
background: #555;
width: 10px;
height: 10px;
border-radius: 50%;
}
.k-chin .holes {transform:rotateX(-65deg);
position: absolute;
display: inline-block;
border: 3px solid #d0d0d0;
border-radius: 20%;
}
.k-chin .holes:nth-child(1) {
width: 15px;
height: 20px;
bottom: 15px;
left: 40px;
}
.k-chin .holes:nth-child(2) {
width: 10px;
height: 20px;
bottom: 30px;
left: 90px;
}
.k-chin .holes:nth-child(3) {
width: 10px;
height: 20px;
bottom: 30px;
right: 90px;
}
.k-chin .holes:nth-child(4) {
width: 15px;
height: 20px;
bottom: 15px;
right: 40px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes shiftLeft {
0% {
left: -50%;
}
100% {
left: -53%;
}
}
@keyframes shiftRight {
0% {
right: -95%;
}
100% {
right: -93%;
}
}
.song-list-containe {position: absolute;
margin-top: 3%;
margin-left: 10%;
color:#fff000;
}
.song-list {column-count: 2;
list-style: none;
padding: 0;
color: #fff;font:300 0.9em 仿宋;
overflow-x: hidden;
}
.song-item {list-style: none;
padding: 0.2rem 1rem;
cursor: pointer;
}
.song-item:hover {
color: #00ff00;
}
.song-item.active {
color: #fff000;
font-weight: 500;
}
.lyrics-container {
position: absolute;
max-height: 120px;
overflow-y: hidden;
overflow-x: hidden;
cursor: pointer;
text-align: center;
MARGIN-LEFT:20%;
margin-top:35%;
font: 400 20px 'FZYaoti', sans-serif;
line-height: 40px;
color: #aaa;
}
.highlight {
color: #fff;
padding-left: 0.5rem;
font-size:25px;
}
#bt{ --w: 60%; width: var(--w); overflow: hidden; color: #fff; position: absolute; left:26%; bottom: 90px;font:normal 16px 仿宋;cursor:pointer;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 0s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
#loog{position: absolute; left:72%; bottom: 190px; width: 150px;height: 60px;background:url(https://pic1.imgdb.cn/item/6904aee23203f7be00ba9d72.png)no-repeat center /80%;animation: loog 3s linear infinite var(--state);}
@keyframes loog {50% { filter: hue-rotate(360deg);}}
#player {
position: absolute;z-index: 40;
left:5%;
bottom: 100px;
width: 100px;
height: 40px;
opacity: 1;
transition: .4s;
display: grid;
place-items: center;
--sp1: 0; --sp2: 1;
}
#player::before, #player::after {
position: absolute;
content: '';
cursor: pointer;
transition: .4s;
}
#player::before {width: 100%;height: 100%;background:url(https://pic1.imgdb.cn/item/68ff14983203f7be00a5fd1b.png)no-repeat center/cover;
opacity: var(--sp1);}
#player::after {width: 100%;height: 100%;background:url(https://pic1.imgdb.cn/item/68ff14983203f7be00a5fd1c.png)no-repeat center/cover;
opacity: var(--sp2);}
#tmsg {position: absolute;z-index: 1;
font: normal 14px sans-serif;
color: #fff;
bottom: 20px;
left:245px;}
#fullscreen {border-radius: 4px;position: relative;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 8%;
}
</style>
<divid="bj">
<div class="k-container-body">
<span class="k-screw top-left"></span>
<span class="k-screw top-right"></span>
<span class="k-screw bottom-left"></span>
<span class="k-screw bottom-right"></span>
<div class="k-centerreel">
<div class="reel left"></div>
<div class="center-tape"></div>
<div class="reel right"></div>
</div>
<div class="k-chin">
<span class="holes"></span>
<span class="holes"></span>
<span class="holes"></span>
<span class="holes"></span>
</div>
<div id="bt"></div><div id="loog"></div>
<div id="player" title="暂停/播放" ></div>
<div id="tmsg">00:00|00:00</div>
<div class="song-list-containe">
<p id="song-list" class="song-list">
</p>
</div>
</div>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
<div id="lyrics" class="lyrics-container w-full max-w-4xl">
</div>
</div>
<script>
var xmhy = [
["https://s2.ananas.chaoxing.com/sv-w8/audio/f7/85/4c/7e962ccbc7ab00f1a7683d2760cb7385/audio.mp3","你是我昨夜的梦-王一佳",`你是我昨夜的梦-王一佳
词曲：王敬苹
编曲：王亚东
混音：王亚东
吉他：LeoD
和声：小荷
制作人：陈金文
OP：星汉马文化
什么爱
可以让人越等心越冷
什么愁
可以孤单在雨中
什么酒
可以让人越醉情就越浓
什么恨
转身就已无影踪
你就像是我昨夜的梦点点落在我心中
繁星却照不到泪湿的面孔
为何偏偏而你就是不懂我为你有多心痛
可你却不愿再为我停留一秒钟
你终究已如往事随风负我山水等相逢
可是我却不能再让你感动
情到深处我该怎么从容回首时泪眼朦胧
只求你还能够让我别醒的太匆匆
什么爱
可以让人越等心越冷
什么愁
可以孤单在雨中
什么酒
可以让人越醉情就越浓
什么恨
转身就已无影踪
你就像是我昨夜的梦点点落在我心中
繁星却照不到泪湿的面孔
为何偏偏而你就是不懂我为你有多心痛
可你却不愿再为我停留一秒钟
你终究已如往事随风负我山水等相逢
可是我却不能再让你感动
情到深处我该怎么从容回首时泪眼朦胧
只求你还能够让我别醒的太匆匆
`],
["https://s2.ananas.chaoxing.com/sv-w8/audio/70/92/87/b6565e50b0552829ac9f2be2bc4ae8fa/audio.mp3","撞入我心怀 - 黄文文",`黄文文-撞入我心怀
作词：喻笙音社
作曲：黄文文
编曲：喻笙音社@漠心藤
混音：毅然音乐
和声、和声编写：黄文文
封面：喻笙音社
制作人；黄文文@喻笙音社
合唱团：毅然合唱团
牧野之上青草香
百花盛开迷人芬芳
月光之下的帐篷外
马琴送来了吉祥
雄鹰在天空翱翔
想起你健壮的臂膀
还有你像草原一样
无比宽广的胸膛
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴远方的客人欢迎你到来
歌词同步编辑：小辣椒
牧野之上青草香
百花盛开迷人芬芳
月光之下的帐篷外
马琴送来了吉祥
雄鹰在天空翱翔
想起你健壮的臂膀
还有你像草原一样
无比宽广的胸膛
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴的远方客人
欢迎你到来
你唱草原天籁
被风撞入我心怀
心儿随着满天的歌声
飞出云边外
看无垠的草原
骏马追逐着云彩
情郎你的心上人永远
为你而等待
你唱草原天籁
滚烫了我的心怀
小脸红的鲜艳的花儿
等着你来采
这无垠的草原
美如画卷的风采
所有奔赴的远方客人
欢迎你到来
谢谢欣赏
`],
["https://aod.cos.tx.xmcdn.com/storages/491b-audiofreehighqps/CA/8C/GArMwRIKj7RbACAAAAL-87e9.m4a","情罪 - 陈瑞",`情罪 - 陈瑞
作词：高寒
作曲：高寒
演唱：陈瑞
编曲：薛云贻
和声：南妮
混音：乐艺文化
监制：陈瑞/飞翔
营销推广：何大为
出品：飞翔文化传媒
发行：漫吞吞文化
一个人跳着孤单的舞步
让寂寞就像流泪的红烛
任我心反反复复为谁而倾诉
端起孟婆汤心里无助
曾经欢乐有过无数
遗憾爱还是凄美的谢幕
我和你之间能有谁赢谁输
只有奈何桥分别一幕
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
谁是谁非谁错谁对
谁又是为谁犯下情罪
红尘再没有今生轮回
今世豪情又该为谁醉
今世豪情又该为谁醉
`],
["https://upfile.mp3.wf/view.php/519c16c5a51082bcbabe0f0e9ee4cfff.mp3","我心所愿-马健涛",`我心所愿
作词：马健南
作曲：马健南
编曲：马健涛
录音：马健涛
混音：马健涛
母带：马健涛
发行：曲风文化
感谢生命中有你
有你人生更有意义
也许这都是天意
感恩在我的歌声里
多少快乐的回忆
是你温暖这份情意
在未来的日子里
我把祝福送给你
愿你笑容像花儿美丽
愿你生活都充满惊喜
愿您凡事都一切如意
愿你余生都晴空万里
愿你好运似浪潮不息
愿你爱人白首不相离
愿你身体永青春活力
愿你永远有福报相依
感谢生命中有你
有你人生更有意义
也许这都是天意
感恩在我的歌声里
多少快乐的回忆
是你温暖这份情意
在未来的日子里
我把祝福送给你
愿你笑容像花儿美丽
愿你生活都充满惊喜
愿您凡事都一切如意
愿你余生都晴空万里
愿你好运似浪潮不息
愿你爱人白首不相离
愿你身体永青春活力
愿你永远有福报相依`],
["https://upfile.mp3.wf/view.php/411c9148f99b0432a060ea5e1160dbd8.mp3","枕着光的她 - 任素汐",`枕着光的她 - 任素汐
词：易家扬/临渡/赵棠舟
曲：任素汐
编曲：刘鑫磊
制作人：刘鑫磊
透过窗看一幕童话
枕着光芒的云下
晚风轻轻地吹过她的银发
他笑着等她一起慢慢走回家
幸福有时候不说话
总在平凡里发着芽
就算日子偶尔有伤疤
也能从里面长出新枝桠 对吗
枕着光的她往前走
路上难免风吹雨打
叫上一声老伴啊 便有人应答
她就晓得 到了家
等到岁月把皱纹缝成一朵花
他们挽着手把生活过成一幅画
可能她一千帧的芳华
都绣在了心里吧
陪伴是回答
他婚礼上对她说别哭
他病中对她说别哭
爱是两个小人儿遇上
都在努力给对方 照个亮
等到岁月把皱纹缝成一朵花
他们挽着手把生活过成一幅画
可能她一千帧的芳华
都绣在了心里吧
枕着光的路上有个他 不怕
`],
["https://www.joy127.com/url/136306.mp3","流云知我否-恰恰恰恰恰",`流云知我否-恰恰恰恰恰
词：十二兄
曲：赵RR
编曲：王亚东
混音：王亚东
吉他：LeoD
和声：小佑子
宣发：诺诺
策划：锦鲤鲤
制作人：米奇
厂牌：大白羊工作室
OP：星汉马文化
流云
你若懂我就停进他眼眸
看看他眼中别样的温柔
oh 每逢斜阳悠悠
又是独自想你的时候
晚风
你若懂我就抚平他眉头
吹散路上他所有的心忧
oh 深情说不出口
就让我徘徊旧门等候
还没爱够如何罢休
半生未过如何罢手
恐你弃我独自远走
梦深都在泪流 想共你到尽头
不分手
故城
陪我等着远方的人
春去秋来风阵阵雨纷纷
oh 若你知我情深
该在黄昏时分扣我门
还没爱够如何罢休
半生未过如何罢手
恐你弃我独自远走
梦深都在泪流 想共你到尽头
不分手
故城
陪我等着远方的人
春去秋来风阵阵雨纷纷
oh 若你知我情深
该在黄昏时分扣我门
`],
["https://www.joy127.com/url/135575.mp3","想你一次落一粒沙-吕口口",`想你一次落一粒沙-吕口口
词：未子夫
曲：徐嘉良
编曲：王亚东
和声：吕口口后期
混音：吕口口后期
OP：星汉马文化
晚风沙沙 吹起了泪花
我的伤口 密密麻麻
前尘往事 被岁月风化
句句情话 都变了卦
就像白鸽 不会爱乌鸦
你像野马不会为我停下
我们走过了一段最美年华
最后变成了 最痛伤疤
想你一次 就落一粒沙
世上从此 有了撒哈拉
我曾为你犯错为你犯傻
如今依然为你痴痴牵挂
想你一次 就落一粒沙
可惜我们早已各安天涯
山盟海誓刻在 三生石下
若有来生 再爱好吗
人世间匆匆又几个冬夏
再也听不见 你的回答
就像白鸽 不会爱乌鸦
你像野马不会为我停下
我们走过了一段最美年华
最后变成了 最痛伤疤
想你一次 就落一粒沙
世上从此 有了撒哈拉
我曾为你犯错为你犯傻
如今依然为你痴痴牵挂
想你一次 就落一粒沙
可惜我们早已各安天涯
山盟海誓刻在 三生石下
若有来生 再爱好吗
人世间匆匆又几个冬夏
再也听不见 你的回答
`],
["https://s2.cldisk.com/sv-w9/audio/95/42/6e/5b3883ad96c1f9a2b0a2fe86b36e5713/audio.mp3","周公难解红楼的梦",`周公难解那红楼的梦
想去陶渊明种豆的南山
种下理想和期盼
路过那片诗里的桃花源
放下满身的疲倦
再听李清照写的声声慢
再把生活缓一缓
望着天上星河不停的转
我也该醒过来为了生活再往前
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
想去陶渊明种豆的南山
种下理想和期盼
路过那片诗里的桃花源
放下满身的疲倦
再听李清照写的声声慢
再把生活缓一缓
望着天上星河不停的转
我也该醒过来为了生活再往前
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
周公难解那红楼的梦
世人也不懂唐朝取经的僧
怎样才能够活好红尘这一生
过来人的话也听不懂
周公难解那红楼的梦
扁鹊医不好人间疾苦的痛
往后还会有多少的磕磕碰碰
脚下的路该何去何从
`]
];
const songList = document.getElementById('song-list');
const audio = document.createElement('audio');
const lyricsDiv = document.getElementById('lyrics');
let currentSongIndex = 0;
let currentLyricIndex = -1;
// 生成曲目列表
xmhy.forEach((song, index) => {
const li = document.createElement('li');
li.className = 'song-item';
li.textContent = (index + 1) + "." + song;
li.dataset.index = index;
li.addEventListener('click', () => selectSong(index));
songList.appendChild(li);
});
function selectSong(index) {
document.querySelectorAll('.song-item').forEach(li => li.classList.remove('active'));
document.querySelectorAll('.lyric-line').forEach(line => line.classList.remove('highlight'));
currentLyricIndex = -1;
bt.innerHTML = '正在播放：' + xmhy.length + '首' + "/" + (index + 1) + "." + xmhy;
const selectedLi = document.querySelector(``);
selectedLi.classList.add('active');
currentSongIndex = index;
audio.src = xmhy;
displayLyrics(xmhy);
audio.play();
window.scrollTo({ top: window.scrollY });
}
function displayLyrics(lyricsText) {
lyricsDiv.innerHTML = '';
const lines = lyricsText.split('\n').map(line => line.trim());
const lyricList = [];
lines.forEach(line => {
const timeMatch = line.match(/\[(\d{2}):(\d{2})\.(\d{3})\]/);
if (timeMatch) {
const time = parseFloat(timeMatch) * 60 + parseFloat(timeMatch) + parseFloat(timeMatch) / 1000;
const text = line.replace(timeMatch, '').trim();
lyricList.push({ time, text });
} else {
const timeMatchTwo = line.match(/\[(\d{2}):(\d{2})\.(\d{2})\]/);
if (timeMatchTwo) {
const time = parseFloat(timeMatchTwo) * 60 + parseFloat(timeMatchTwo) + parseFloat(timeMatchTwo) / 1000;
const text = line.replace(timeMatchTwo, '').trim();
lyricList.push({ time, text });
}
}
});
lyricList.forEach(({ time, text }, index) => {
const p = document.createElement('p');
p.className = 'lyric-line';
p.textContent = text;
p.dataset.time = time;
p.dataset.index = index;
p.addEventListener('click', () => jumpToLyric(index));
lyricsDiv.appendChild(p);
});
audio.removeEventListener('timeupdate', updateLyrics);
audio.addEventListener('timeupdate', updateLyrics);
}
function updateLyrics() {
const currentTime = audio.currentTime;
const lyricLines = Array.from(lyricsDiv.querySelectorAll('.lyric-line'));
const newIndex = lyricLines.findIndex((line, index) => {
const lineTime = parseFloat(line.dataset.time);
return lineTime <= currentTime && (lyricLines ? parseFloat(lyricLines.dataset.time) > currentTime : true);
});
if (newIndex !== currentLyricIndex && newIndex !== -1) {
lyricLines?.classList.remove('highlight');
lyricLines.classList.add('highlight');
currentLyricIndex = newIndex;
// 确保高亮行始终位于第3行
const lineHeight = 20; // 每行歌词的高度
const containerHeight = 120; // 歌词容器的高度
const visibleLines = 3; // 可见的行数
const highlightLine = 2; // 高亮行的索引（从0开始计数）
lyricsDiv.scrollTo({
top: lyricLines.offsetTop - lineHeight * highlightLine,
behavior: 'smooth'
});
}
}
function jumpToLyric(index) {
const targetTime = parseFloat(lyricsDiv.children.dataset.time);
audio.currentTime = targetTime;
updateLyrics();
}
audio.addEventListener('ended', () => {
currentSongIndex = (currentSongIndex + 1) % xmhy.length;
selectSong(currentSongIndex);
});
selectSong(currentSongIndex);
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
bj.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
const kcenterreel = document.querySelector('.k-centerreel');
const kcontainerbody= document.querySelector('.k-container-body');
player.onclick = () => audio.paused ? audio.play() : audio.pause();
mState = () => bj.style.setProperty('--state',audio.paused ? (player.style.setProperty('--sp1','1' ), player.style.setProperty('--sp2','0'),'paused') : (player.style.setProperty('--sp1','0'), player.style.setProperty('--sp2','1'),'running'));
audio.onplaying = audio.onpause = () => mState();
audio.addEventListener('timeupdate', () => {
tmsg.innerText = toMin(audio.currentTime) + ' | ' + toMin(audio.duration);
});
function toMin(val) {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
先惊了再来听看！ 播放器美！歌声带和声的，美！集子带歌词同步的，更美！{:4_178:} 创作辛苦了，我估计这代码怕是有好页面呢！{:4_190:} 欣赏佳作，问候亚伦。 创新之作，效果顺畅，谢谢亚伦老师经典示范{:4_191:} 这个太赞了，这么多好歌，还都是带歌词同步的。
这些歌曲的信息很丰富啊，有播放时间进度，还有第几首歌的标注{:4_187:} 这个制作特别好，还借机听了很多好歌。
感谢亚伦老师的好帖{:4_199:} 亚纶这个磁带播放器做了专辑分享了，越来越厉害了{:4_199:} 小辣椒欣赏加学习{:4_187:} 老师的这个播放器制作的真好，欣赏学习了。
页:
[1]