论坛 › 马黑黑教程专版 › 测试：圆内频谱播放器

马黑黑 发表于 2022-12-7 19:27

测试：圆内频谱播放器

先贴代码

<style>
#papa { margin: auto; width: 1024px; height: 640px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 20px; left: calc(50% - 60px); width: 120px; height: 120px; border-radius: 50%; border: 6px solid darkgreen; display: grid; place-items: center center; user-select: none; cursor: pointer; }
#tmsg { font: normal 14px sans-serif; color: snow; z-index: 450; }
.mline { --hh: 0px; position: absolute; width: 2px; height: 6px; background: green; }
.mline::before {position: absolute;content: '';width: 100%;height: var(--hh);bottom: 0;left: 0;background: linear-gradient(to top, green, lightgreen); }
</style>

<div id="papa">
        <div id="mplayer"><span id="tmsg">play</span></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28221434.mp3" autoplay loop></audio>
</div>

<script>
let ppsize = 4, gap = 2; /* 频谱条宽度和间距 */
let total = Math.floor(mplayer.clientWidth * Math.PI / (ppsize + gap)); /* 频谱总数 */
//创建频谱
for(j=0; j< total; j++) {
        let ele = document.createElement('span');
        ele.className = 'mline';
        ele.style.width = ppsize + 'px';
        ele.style.transform = `rotate(${j*360/total}deg) translateY(60px)`; /* 分布频谱 */
        mplayer.appendChild(ele);
}
let lines = document.querySelectorAll('.mline'); /* 频谱操作句柄 */
/* 频谱变换 : 伪元素加长 */
let update = () => {
        /* 遍历频谱元素并改变其高度值 */
        lines.forEach((item) => item.style.setProperty('--hh',Math.random() * 60 + 'px'));
        /* 播放器不是停止状态下请求下一帧 */
        if(!aud.paused) window.requestAnimationFrame(update);
};
/* 格式化输出时间 */
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
/* 播放器单击事件 */
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
/* audio 监听事件 */
aud.addEventListener('timeupdate', () => {
        update(); /* 运行频谱变化函数 */
        tmsg.innerText = '-' + toMin(aud.duration - aud.currentTime); /* 输出时间信息 */
});
</script>

马黑黑 发表于 2022-12-7 19:27

<style>
#papa { margin: auto; width: 760px; height: 500px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 20px; left: calc(50% - 60px); width: 120px; height: 120px; border-radius: 50%; border: 6px solid darkgreen; display: grid; place-items: center center; user-select: none; cursor: pointer; }
#tmsg { font: normal 14px sans-serif; color: snow; z-index: 450; }
.mline { --hh: 0px; position: absolute; width: 2px; height: 6px; background: green; }
.mline::before {position: absolute;content: '';width: 100%;height: var(--hh);bottom: 0;left: 0;background: linear-gradient(to top, green, lightgreen); }
</style>

<div id="papa">
        <div id="mplayer"><span id="tmsg">play</span></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=28221434.mp3" autoplay loop></audio>
</div>

<script>
let ppsize = 4, gap = 2; /* 频谱条宽度和间距 */
let total = Math.floor(mplayer.clientWidth * Math.PI / (ppsize + gap)); /* 频谱总数 */
//创建频谱
for(j=0; j< total; j++) {
        let ele = document.createElement('span');
        ele.className = 'mline';
        ele.style.width = ppsize + 'px';
        ele.style.transform = `rotate(${j*360/total}deg) translateY(60px)`; /* 分布频谱 */
        mplayer.appendChild(ele);
}
let lines = document.querySelectorAll('.mline'); /* 频谱操作句柄 */
/* 频谱变换 : 伪元素加长 */
let update = () => {
        /* 遍历频谱元素并改变其高度值 */
        lines.forEach((item) => item.style.setProperty('--hh',Math.random() * 60 + 'px'));
        /* 播放器不是停止状态下请求下一帧 */
        if(!aud.paused) window.requestAnimationFrame(update);
};
/* 格式化输出时间 */
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
/* 播放器单击事件 */
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
/* audio 监听事件 */
aud.addEventListener('timeupdate', () => {
        update(); /* 运行频谱变化函数 */
        tmsg.innerText = '-' + toMin(aud.duration - aud.currentTime); /* 输出时间信息 */
});
</script>

马黑黑 发表于 2022-12-7 19:28

这个频谱不是实时频谱

小辣椒 发表于 2022-12-7 20:01

黑黑是频谱一个连着一个的出来，太好了{:4_178:}

小辣椒 发表于 2022-12-7 20:01

黑黑威武{:4_170:}

马黑黑 发表于 2022-12-7 20:05

小辣椒 发表于 2022-12-7 20:01
黑黑是频谱一个连着一个的出来，太好了

频谱相对好做

马黑黑 发表于 2022-12-7 20:05

小辣椒 发表于 2022-12-7 20:01
黑黑威武

{:4_173:}

梦缘 发表于 2022-12-7 20:07

很漂亮的圆内频谱播放器，感谢老师的代码分享！{:4_190:}

马黑黑 发表于 2022-12-7 20:07

梦缘 发表于 2022-12-7 20:07
很漂亮的圆内频谱播放器，感谢老师的代码分享！

这个刚做好，不知道有木有问题

红影 发表于 2022-12-7 20:12

好奇妙，黑黑又弄个频谱播放器，这么多千变万化的频谱播放器，黑黑太厉害了{:4_199:}

梦油 发表于 2022-12-7 20:21

马黑黑 发表于 2022-12-7 19:27
#papa { margin: auto; width: 760px; height: 500px; background: gray; box-shadow: 3px 3px 20px #000 ...

好看，这个播放器好漂亮。

小辣椒 发表于 2022-12-7 20:24

马黑黑 发表于 2022-12-7 20:05
频谱相对好做

你说好做，我们就太开心了，可以轻松玩了

小辣椒 发表于 2022-12-7 20:24

马黑黑 发表于 2022-12-7 20:05


{:4_205:}

马黑黑 发表于 2022-12-7 20:44

小辣椒 发表于 2022-12-7 20:24


嘚瑟了

马黑黑 发表于 2022-12-7 20:44

小辣椒 发表于 2022-12-7 20:24
你说好做，我们就太开心了，可以轻松玩了

有空，有思路就做做

马黑黑 发表于 2022-12-7 20:45

梦油 发表于 2022-12-7 20:21
好看，这个播放器好漂亮。

小东西，玩玩

小辣椒 发表于 2022-12-7 20:46

马黑黑 发表于 2022-12-7 20:44
有空，有思路就做做

好的，年底会忙一点了

小辣椒 发表于 2022-12-7 20:46

马黑黑 发表于 2022-12-7 20:44
嘚瑟了

是开心啊{:4_189:}

马黑黑 发表于 2022-12-7 20:46

小辣椒 发表于 2022-12-7 20:46
好的，年底会忙一点了

是的，连续两天没得午休

马黑黑 发表于 2022-12-7 20:46

小辣椒 发表于 2022-12-7 20:46
是开心啊

支持

查看完整版本: 测试：圆内频谱播放器