哥已不再是当年的哥（学习马老师响应式频谱插件作业）
本帖最后由 寒冬残荷 于 2022-12-11 23:15 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 650px); width: 1138px; height: 640px; background: gray url('https://pic.imgdb.cn/item/6395ec1db1fccdcd36f405d8.jpg') no-repeat center/cover;box-shadow: 3px 6px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
.mLine::before {position: absolute; content: ''; width: 100%; height:4px; background: #d200d2; top: -6px; } /*频谱最上一小方点的*/
</style>
<div id="papa"></div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=202344620.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10),player_css: '',playerCode: `<style>#mplayer { --ww: 300px; --hh: 160px; --pinpu: linear-gradient(to top,darkgreen,snow); position: absolute; bottom: 10px; width: var(--ww); height: var(--hh); display: flex; justify-content: center; align-items: flex-end; cursor: pointer; }.mLine { position: relative; margin: 0 2px 0 0; width: 4px; height: 8px; background: var(--pinpu); transition: .55s; opacity: .95; }</style><div id="mplayer"></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();let total = Math.ceil(mplayer.offsetWidth / 6), ppnum = 0;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mplayer.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mplayer.offsetHeight;let update = () => lines.forEach((item,key) => item.style.setProperty('height', Math.random() * data.ypData / divide + 'px'));aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();});};mkPlayer.HCPlayer = playCode;})(this);
let ypData =
;
HCPlayer({
ypData: ypData,
player_css: '--ww: 100%; --hh: 200px; --pinpu: linear-gradient(to top, brown,red,fuchsia); align-items: flex-end;',
});
})();
</script>
欣赏 马黑黑 发表于 2022-12-11 23:13
欣赏
谢谢马老师！仅为了完成作业而随便找来的一首歌和一张图片。 欣赏老师的精彩分享，问好！{:4_204:}
页:
[1]