本地音频响应式频谱播放器第二版
<style>/* 父元素 */
#papa { --bg1: #00ffff; --bg2: #fffafa; margin: 30px auto 0; width: 740px; height: 400px; font-size: 16px; color: var(--bg2); 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; padding: 8px; top: 0; width: 100%; height: 40px; box-sizing: border-box; }
#mfile { display: none; }
#selectSong, #btnSet { position: absolute; border: 2px solid #ccc; border-radius: 6px; outline: none; color: var(--bg2); background: none; cursor: pointer; }
#btnSet { right: 10px; display: none; }
#openFile:hover #btnSet { display: inline-block; }
#selectSong:hover, #btnSet:hover { background: darkred; }
#curSong { position: absolute; left: 100px; color: var(--bg2); }
/* 设置栏 */
#setting { position: absolute; padding: 10px; width: 400px; right: 0; top: 0; color: var(--bg2); background: rgba(0,0,0,.5); display: none; }
/* 背景图地址栏 */
#bgurl { width: 300px; padding: 6px; }
/* 播放器 */
#mplayer { --ppLen: 4px; --prg: 0%; --ppCap: white; position: absolute; right: 180px; width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(to right, var(--bg2) var(--prg), var(--bg2) var(--prg), var(--bg1) 0) no-repeat 0 50% / 100% 2px; cursor: pointer; display: grid; place-items: center; }
#mplayer:hover { filter: hue-rotate(180deg) drop-shadow(0 0 26px black); }
#mplayer::before, #mplayer::after { position: absolute; }
#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); font-size: 14px; opacity: .7; overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--bg1) rgba(255,255,255,.2); }
#mlist:hover { overflow: auto; opacity: 1; }
/* 音乐列表子项目 */
.list1, .list2, .list3 { display: inline-block; max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list1 { cursor: pointer; }
.list2 { color: var(--bg1); cursor:default; }
.list3 { width: fit-content; }
.list1:hover { color: var(--bg1); }
.tRight { text-align: right; }
</style>
<div id="papa">
<div id="openFile">
<input id="selectSong" type="button" value="选择音乐" />
<input type="file" id="mfile" accept=".mp3,.ogg,.wav,.acc,.webm,.flac" multiple />
<span id="curSong"></span>
<input id="btnSet" type="button" value="设置" />
</div>
<div id="setting">
<p>
<label for="bgurl">背景图：</label>
<input id="bgurl" type="text" placeholder="输入图片地址" value="" />
</p>
<p>
<label for="tColor">配色一 ：</label>
<input type="color" id="tColor1" name="tc" value="#00ffff" />
</p>
<p>
<label for="tColor">配色二 ：</label>
<input type="color" id="tColor2" name="tc" value="#ffffff" />
</p>
<p class="tRight">
<input id="btnQuit" type="button" value="退出" />
<input id="btnSave" type="button" value="保存" />
</p>
</div>
<div id="mplayer" class="mplayer"></div>
<div id="mlist"></div>
<audio id="aud"></audio>
</div>
<p style="text-align:center"><br>更新 ：2025年2月10日 <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.style.height = output / 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;
playAr.splice(tmpIdx, 1);
isScrolling = true;
}
aud.src = URL.createObjectURL(files);
let name = files.name;
curSong.innerText = name.substring(0, name.lastIndexOf('.')) + `（${files.length}/${idx+1}）`;
aud.play();
mlist.innerHTML = showList(files, idx);
if(isScrolling) mlist.scroll({left:0, top: idx*mlist.scrollHeight/files.length, behavior: 'smooth'});
};
//显示音乐列表
const showList = (ar, idx) => {
let res = '';
for(let j = 0; j < ar.length; j ++) {
let item = `<span class="list3">${j+1}. </span>`; //(j + 1) + '. ';
item += j === idx ?
`<span class="list2" title="${ar.name}">${ar.name}</span>` :
`<span class="list1" title="${ar.name}" onclick="mplay(${j})">${ar.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;
//保存设置
const saveSetting = (url,color1,color2) => localStorage.setItem('player_url', `${url},${color1},${color2}`);
//读取设置
const getSetting = () => {
let ar = localStorage.getItem('player_url').split(',');
if(!ar) ar = '';
if(!ar) ar = '#00ffff';
if(!ar) ar = '#fffafa';
return ar;
};
//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);
}
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 ? '点击播放' : '点击暂停');
};
//启动设置窗口
btnSet.onclick = () => setting.style.display = 'block';
//保存设置窗口
btnSave.onclick = () => {
saveSetting(bgurl.value.trim(),tColor1.value,tColor2.value);
setting.style.display = 'none';
};
//背景图地址栏输入事件
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;`;
};
img.onerror = () => bgurl.value = '';
};
//背景图地址栏鼠标经过事件
bgurl.onmouseover = () => {
bgurl.focus();
bgurl.setSelectionRange(0,bgurl.value.length);
};
//颜色输入事件
tColor1.oninput = () => papa.style.setProperty('--bg1', tColor1.value);
tColor2.oninput = () => papa.style.setProperty('--bg2', tColor2.value);
//保存设置按钮
btnSave.onclick = () => {
saveSetting(bgurl.value.trim(),tColor1.value,tColor2.value);
tColor1.input;
tColor2.input;
setting.style.display = 'none';
}
//退出设置
btnQuit.onclick = () => setting.style.display = 'none';
//加载风格
const setVals = getSetting();
if(setVals) bgurl.value = setVals;
tColor1.value = setVals;
tColor2.value = setVals;
const bgStr = setVals ? `background: url(${setVals}) no-repeat center/cover` : '';
papa.style.cssText += `${bgStr};--bg1: ${setVals};--bg2: ${setVals};`;
</script>
感谢分享，收获满满感悟 支持博主，分享太精彩了 感谢分享，让我眼前一新 支持佳作，期待更多分享 赞，顶帖角度十分独特 分享超有趣，点赞送鼓励啦 分享很精彩，点赞表喜爱 支持博主，分享太精彩了 分享超给力，点赞没商量