播放多个本地音频文件的响应式频谱播放器（2.5更新）

马黑黑 · 发表于 2025-1-28 18:28

花飞飞发表于 2025-1-28 16:30
响应式把音频可视化了，越是美妙的音乐，看着越好看

你可以试试播放多一点音乐

马黑黑 · 发表于 2025-1-28 18:39

本帖最后由马黑黑于 2025-1-28 18:42 编辑

1月28日更新：播放器界面可加入来自网络资源的图片背景，若加入成功，下次打开本帖第一页播放器UI会自动使用所添加的背景图片。

说明：图片应使用来自网络的URL地址。若需要使用本地图片，需要将代码存为本地HTML文档并运行它，然后地址这么处理——

假设图片是 d:\图片\2025\3.jpg

需要写成：

d:\\图片\\2025\\3.jpg

就是，每一个反斜杠 \ 都成双出现即可

红影 · 发表于 2025-1-28 22:32

马黑黑发表于 2025-1-28 12:34
我们的态度不仅仅出自私情，更重要的是为了世界和平。战争不能解决问题，只会带来混乱

让他们折腾吧，等着捡漏的人不少呢。

红影 · 发表于 2025-1-28 22:33

马黑黑发表于 2025-1-28 12:39
这个主打简单方便，下一步是可以更换背景并记忆下来

黑黑太厉害了

马黑黑 · 发表于 2025-1-28 22:54

红影发表于 2025-1-28 22:33
黑黑太厉害了

现在可以设置背景图了

马黑黑 · 发表于 2025-1-28 22:54

红影发表于 2025-1-28 22:32
让他们折腾吧，等着捡漏的人不少呢。

马黑黑 · 发表于 2025-1-28 23:01

代码：1月28日更新

<style>
/* 父元素 */
#papa {
margin: 30px auto 0;
padding: 10px;
width: 740px;
height: 400px;
font-size: 16px;
background: linear-gradient(to bottom right, #000, #ffc);
box-shadow: 3px 6px 20px #000;
border-radius: 6px;
display: grid;
place-items: center;
position: relative;
}
/* 选择本地音乐父元素 */
#openFile {
position: absolute;
left: 15px;
top: 15px;
width: calc(100% - 30px);
}
/* 选择音乐控件 */
#mfile { display: none; }
/* 选择音乐按钮 */
#selectSong {
margin-right: 8px;
border: 2px solid #ccc;
border-radius: 6px;
outline: none;
background: none;
color: snow;
cursor: pointer;
}
/* 背景图片地址栏 */
#bgurl {
position: absolute;
right: 0;
display: none;
}
#openFile:hover #bgurl {
display: inline;
}
/* 选择音乐按钮指针经过 */
#selectSong:hover { background: darkred; }
/* 当前播放曲目 */
#curSong { color: #eee; }
/* 播放器 */
#mplayer {
--bg1: teal;
--bg2: snow;
--ppLen: 4px;
--prog: white;
--track: silver;
--prg: 0%;
--ppCap: white;
position: absolute;
right: 180px;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(
to right,
var(--prog) var(--prg),
var(--track) var(--prg),
var(--track) 0
) no-repeat 0 50% / 100% 2px;
cursor: pointer;
display: grid;
place-items: center;
}
/* 播放器指针经过 */
#mplayer:hover {
filter: hue-rotate(90deg) drop-shadow(0 0 26px black);
}
/* 播放器伪元素：音频时间信息 */
#mplayer::before, #mplayer::after {
position: absolute;
color: snow;
}
/* 播放器伪元素一：当前播放时间 */
#mplayer::before {
content: attr(data-cu);
top: 20%;
}
/* 播放器伪元素二：音频时长 */
#mplayer::after {
content: attr(data-du);
top: 56%;
}
/* 频谱条 */
.pp {
position: absolute;
left: calc(50% - 2px);
bottom: 50%;
width: var(--ppLen);
height: 20px;
background: linear-gradient(to top, var(--bg1), var(--bg2));
transform-origin: 50% 100%;
transform: rotate(var(--deg)) translate(-50px, 0);
display: grid;
place-items: center;
}
/* 频谱条伪元素：频谱帽 */
.pp::after {
position: absolute;
content: '';
width: calc(var(--ppLen) + 4px);
height: calc(var(--ppLen) + 4px);
top: 0px;
background: var(--bg2);
border-radius: 50%;
}
/* 音乐列表 */
#mlist {
position: absolute;
left: 20px;
top: 60px;
min-width: 40%;
max-width: 50%;
min-height: 20%;
max-height: calc(100% - 80px);
color: silver;
font-size: 14px;
line-height: 20px;
overflow: auto;
}
/* 音乐列表项目一：待播放曲目 */
.list1 { cursor: pointer; }
/* 音乐列表项目二：正在播放曲目 */
.list2 {
color: cyan;
cursor:default;
}
/* 音乐列表项目一指针经过 */
.list1:hover { color: white; }
</style>
<div id="papa">
<div id="openFile">
<input id="selectSong" type="button" value="选择音乐" />
<input type="file" id="mfile" accept=".mp3,.ogg,.wav,.acc,.webm" multiple />
<span id="curSong"></span>
<input id="bgurl" type="text" placeholder="背景 : 网络图片地址" value="" />
</div>
<div id="mplayer" class="mplayer"></div>
<div id="mlist"></div>
<audio id="aud"></audio>
</div>
<p style="text-align:right"><br>更新：2025年1月28日    <br></p>
<script>
//选择的文件, 播放列表, 波形数据, 频谱
let files=[], playAr = [], output = [], pps = [];
//打开文件次数, 频谱条总数
let openIdx = 0, total = 30;
//获取波形数据
const getDatas = () => {
if(openIdx > 0) return;
openIdx ++;
Ac = new AudioContext;
source = Ac.createMediaElementSource(aud);
analyser = Ac.createAnalyser();
source.connect(analyser);
analyser.connect(Ac.destination);
output = new Uint8Array(total);
};
//生成频谱条
Array(total).fill(0).forEach((_, k) => {
let pp = document.createElement('span');
pp.className = 'pp';
pp.style.cssText += `--deg: ${360 / total * k}deg`;
mplayer.appendChild(pp);
pps.push(pp);
});
//波形数据刷新
(function update() {
if(aud.src) analyser.getByteFrequencyData(output);
for(let j = 0; j < total ; j++) {
pps[j].style.height = output[j] / 2 + 'px';
}
window.requestAnimationFrame(update);
})();
//播放：idx为空时随机播放
const mplay = (idx = null) => {
if(files.length === 0) return;
let isScrolling = false;
if(idx === null) {
if(playAr.length === 0) playAr = ranNum(files.length);
let tmpIdx = Math.floor(Math.random() * playAr.length);
idx = playAr[tmpIdx];
playAr.splice(tmpIdx, 1);
isScrolling = true;
}
aud.src = URL.createObjectURL(files[idx]);
let name = files[idx].name;
curSong.innerText = name.substring(0, name.lastIndexOf('.')) + `（${files.length}/${idx+1}）`;
aud.play();
mlist.innerHTML = showList(files, idx);
if(isScrolling) mlist.scrollTop = 20 * idx; //scrolling(20, idx);
};
//显示音乐列表
const showList = (ar, idx) => {
let res = '';
for(let j = 0; j < ar.length; j ++) {
let item = (j + 1) + '. ';
item += j === idx ?
`<span class="list2">${ar[j].name}</span>` :
`<span class="list1" onclick="mplay(${j})">${ar[j].name}</span>`;
res += item + '<br>';
}
return res;
};
//生成不重复随机数组
const ranNum = (total) => {
let ar = Array(total).fill().map((_,key) => key);
ar.sort(() => 0.5 - Math.random());
return ar;
};
//秒转分
const s2m = (seconds) => {
if (!seconds) return '00:00';
let min = parseInt(seconds / 60), sec = parseFloat(Math.floor(seconds) % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
//判断进度条区域
const innerH = (e, h) => e.offsetY > h / 2 - 5 && e.offsetY < h / 2 + 5;
//audio timeupdate监听事件
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
mplayer.dataset.cu = s2m(aud.currentTime);
mplayer.dataset.du = s2m(aud.duration);
});
//单曲播放结束
aud.addEventListener('ended',() => mplay());
//选择歌曲
selectSong.onclick = () => mfile.click();
//文件选择器改变
mfile.onchange = () => {
let filelist = mfile.files;
if(filelist.length === 0) return;
files.length = 0;
for(let j = 0; j < filelist.length; j ++) {
files.push(filelist[j]);
}
playAr = ranNum(files.length);
mplay();
getDatas();
}
//播放器点击
mplayer.onclick = (e) => {
if(files.length < 1) return;
if(innerH(e,mplayer.clientHeight)) {
aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
}else{
aud.paused ? aud.play() : aud.pause();
}
};
//播放器鼠标移过
mplayer.onmousemove = (e) => {
mplayer.title = innerH(e,mplayer.clientHeight) ?
s2m(aud.duration * e.offsetX / mplayer.offsetWidth) :
(aud.paused ? '点击播放' : '点击暂停');
};
bgurl.oninput = () => {
let img = new Image(), src = bgurl.value.trim();
img.src = src;
img.onload = () => {
papa.style.cssText += `background: url(${src}) no-repeat center/cover;`;
localStorage.setItem('player_url', src)
};
};
const player_url = bgurl.value = localStorage.getItem('player_url');
if(player_url) papa.style.cssText += `background: url(${player_url}) no-repeat center/cover;`;
</script>

复制代码

花飞飞 · 发表于 2025-1-28 23:22

马黑黑发表于 2025-1-28 18:28
随机播放是主调。播放器的生命周期内，可以手动播放列表中的任意音频资源

还有个生命周期。。。只要代码可以运行它就可以的吧。。

花飞飞 · 发表于 2025-1-28 23:22

马黑黑发表于 2025-1-28 18:28
你可以试试播放多一点音乐

选了十四首，我存的音乐的全部。。

没有翻页。。
下回多下点

花飞飞 · 发表于 2025-1-28 23:24

马黑黑发表于 2025-1-28 18:39
1月28日更新：播放器界面可加入来自网络资源的图片背景，若加入成功，下次打开本帖第一页播放器UI会自动使 ...

这个双层反斜杠到是不陌生。等会试试

花飞飞 · 发表于 2025-1-28 23:31

马黑黑发表于 2025-1-28 23:01
代码：1月28日更新

这个代码好详细，每一部分都有说明，一目了然。。
关键的关键，我用一张刚完成的作品当背景，它成了一个作品。。而且可以改为我的图片大小。。

惊艳了。。。
这个背景添加，效果太棒了。。

花飞飞 · 发表于 2025-1-28 23:32

添加背景只要鼠标点在画面上，就有框出来可以粘贴地址。。。
根本不需要到代码里更改。。
这个操作小白给点三十二个赞

马黑黑 · 发表于 2025-1-29 00:02

花飞飞发表于 2025-1-28 23:32
添加背景只要鼠标点在画面上，就有框出来可以粘贴地址。。。
根本不需要到代码里更改。。
这个操作小白给 ...

马黑黑 · 发表于 2025-1-29 00:03

花飞飞发表于 2025-1-28 23:31
这个代码好详细，每一部分都有说明，一目了然。。
关键的关键，我用一张刚完成的作品当背景，它成了一个 ...

这个是简单的功能，类似于换肤但没有换肤的全面，只是设置个背景图片

马黑黑 · 发表于 2025-1-29 00:04

花飞飞发表于 2025-1-28 23:24
这个双层反斜杠到是不陌生。等会试试

整站是三层

马黑黑 · 发表于 2025-1-29 00:04

花飞飞发表于 2025-1-28 23:22
还有个生命周期。。。只要代码可以运行它就可以的吧。。

就是指打开后直到关闭

马黑黑 · 发表于 2025-1-29 00:06

花飞飞发表于 2025-1-28 23:22
选了十四首，我存的音乐的全部。。没有翻页。。
下回多下点

喜欢做音画帖的应该在本地磁盘存多一些歌曲

花飞飞 · 发表于 2025-1-29 10:47

马黑黑发表于 2025-1-29 00:02

喝白的，碰一个

花飞飞 · 发表于 2025-1-29 10:48

马黑黑发表于 2025-1-29 00:03
这个是简单的功能，类似于换肤但没有换肤的全面，只是设置个背景图片

有音画有画面，它就是个完美的贴子。我把它转走了哈。

花飞飞 · 发表于 2025-1-29 10:49

马黑黑发表于 2025-1-29 00:04
整站是三层

我说我怎么没用到这个双层斜杠，原来我用的是网络图片。。
本地图片才需要添加双杠

播放多个本地音频文件的响应式频谱播放器（2.5更新）

评分

评分

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

心香一瓣

金剪刀

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

流光溢彩

优雅神秘

花潮贵宾