花飞飞 发表于 2025-1-28 16:30
响应式把音频可视化了，越是美妙的音乐，看着越好看
你可以试试播放多一点音乐
本帖最后由 马黑黑 于 2025-1-28 18:42 编辑
1月28日更新：播放器界面可加入来自网络资源的图片背景，若加入成功，下次打开本帖第一页播放器UI会自动使用所添加的背景图片。
说明：图片应使用来自网络的URL地址。若需要使用本地图片，需要将代码存为本地HTML文档并运行它，然后地址这么处理——
假设图片是d:\图片\2025\3.jpg
需要写成：
d:\\图片\\2025\\3.jpg
就是，每一个反斜杠 \ 都成双出现即可
马黑黑 发表于 2025-1-28 12:34
我们的态度不仅仅出自私情，更重要的是为了世界和平。战争不能解决问题，只会带来混乱
让他们折腾吧，等着捡漏 的人不少呢。
马黑黑 发表于 2025-1-28 12:39
这个主打简单方便，下一步是可以更换背景并记忆下来
黑黑太厉害了{:4_187:}
红影 发表于 2025-1-28 22:33
黑黑太厉害了
现在可以设置背景图了
红影 发表于 2025-1-28 22:32
让他们折腾吧，等着捡漏 的人不少呢。
{:4_181:}
代码：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.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.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.name}</span>` :
`<span class="list1" 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;
//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 ? '点击播放' : '点击暂停');
};
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 18:28
随机播放是主调。播放器的生命周期内，可以手动播放列表中的任意音频资源
还有个生命周期。。。只要代码可以运行它就可以的吧。。
马黑黑 发表于 2025-1-28 18:28
你可以试试播放多一点音乐
选了十四首，我存的音乐的全部。。{:4_173:}没有翻页。。
下回多下点
马黑黑 发表于 2025-1-28 18:39
1月28日更新：播放器界面可加入来自网络资源的图片背景，若加入成功，下次打开本帖第一页播放器UI会自动使 ...
这个双层反斜杠到是不陌生。等会试试{:4_173:}
马黑黑 发表于 2025-1-28 23:01
代码：1月28日更新
这个代码好详细，每一部分都有说明，一目了然。。
关键的关键，我用一张刚完成的作品当背景，它成了一个作品。。而且可以改为我的图片大小。。{:4_170:}
惊艳了。。。
这个背景添加，效果太棒了。。
添加背景只要鼠标点在画面上，就有框出来可以粘贴地址。。。
根本不需要到代码里更改。。
这个操作小白给点三十二个赞{:4_205:}
花飞飞 发表于 2025-1-28 23:32
添加背景只要鼠标点在画面上，就有框出来可以粘贴地址。。。
根本不需要到代码里更改。。
这个操作小白给 ...
{:4_191:}
花飞飞 发表于 2025-1-28 23:31
这个代码好详细，每一部分都有说明，一目了然。。
关键的关键，我用一张刚完成的作品当背景，它成了一个 ...
这个是简单的功能，类似于换肤但没有换肤的全面，只是设置个背景图片
花飞飞 发表于 2025-1-28 23:24
这个双层反斜杠到是不陌生。等会试试
整站是三层
花飞飞 发表于 2025-1-28 23:22
还有个生命周期。。。只要代码可以运行它就可以的吧。。
就是指打开后直到关闭
花飞飞 发表于 2025-1-28 23:22
选了十四首，我存的音乐的全部。。没有翻页。。
下回多下点
喜欢做音画帖的应该在本地磁盘存多一些歌曲
马黑黑 发表于 2025-1-29 00:02
{:4_191:}喝白的，碰一个
马黑黑 发表于 2025-1-29 00:03
这个是简单的功能，类似于换肤但没有换肤的全面，只是设置个背景图片
{:4_173:}有音画有画面，它就是个完美的贴子。我把它转走了哈。
马黑黑 发表于 2025-1-29 00:04
整站是三层
我说我怎么没用到这个双层斜杠，原来我用的是网络图片。。
本地图片才需要添加双杠{:4_173:}