论坛 › 欢乐水吧 › 音乐均衡器

亚伦影音工作室 发表于 2024-11-12 16:13

音乐均衡器

本帖最后由 亚伦影音工作室 于 2024-11-14 02:16 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-320px;
        margin-top:10px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://pic.imgdb.cn/item/663f35c30ea9cb1403eface5.jpg)no-repeat center/cover;
        overflow: hidden;
}

#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite ;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
.equalizer {
display: flex;
margin-left:140px;
height: 10rem;
margin-top: 460px;
}

.equalizer-bar {
width: 1.5rem;
margin: 0 3px;
display: flex;
flex-direction: column-reverse;
}
.equalizer-bar span {
display: block;
height: 4px;
border-radius: 1px;
width: 100%;
margin: 2px 0;
background-color: #FFF;
transition: .2s ease all;
opacity: 1;
}
.equalizer-bar:nth-child(1) span {
background: #fc0127;
}
.equalizer-bar:nth-child(2) span {
background: #fff000;
}
.equalizer-bar:nth-child(3) span {
background: #00ffd3;
}
.equalizer-bar:nth-child(4) span {
background: #fff7fe9;
}
.equalizer-bar:nth-child(5) span {
background: #00ffa9;
}
.equalizer-bar:nth-child(6) span {
background: #f80ad7;
}
.equalizer-bar:nth-child(7) span {
background: #fff5e2;
}
.equalizer-bar:nth-child(8) span {
background: #ff0cfc;
}
.equalizer-bar:nth-child(9) span {
background: #f2fe46;
}
.equalizer-bar:nth-child(10) span {
background: #fffb0f;
}
.equalizer-bar:nth-child(11) span {
background: #f7f611;
}
.equalizer-bar:nth-child(12) span {
background: #00ff06;
}
.equalizer-bar:nth-child(13) span {
background: #f7a414;
}
.equalizer-bar:nth-child(14) span {
background: #fc6b02;
}
.equalizer-bar:nth-child(15) span {
background: #df1506;
}
</style>
<div id="papa">
<div class="equalizer">
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
<div class="equalizer-bar">
          <span></span>
        </div>
</div>
<div><img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png"></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/94/e5/03/91ca6733d7423dca393c8008d7aa0374/audio.mp3" autoplay loop ></audio>
</div>

<script>
mdiv.onclick = () => aud.paused ? (aud.play()): (aud.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
const MAX_BAR_HEIGHT = 18;
addBarSpans();
setInterval(() => {
setRandomBars();
}, 200);
// Main programm (repeats)
function setRandomBars(maxBarHeight) {if(!aud.paused) {
const bars = document.getElementsByClassName('equalizer-bar');
for(let i = 0; i < bars.length; i++) {
   let spans = bars.getElementsByTagName('span');
    let activeSpanCount = getActiveSpans(spans);
    let newHeight = getRandomHeight(MAX_BAR_HEIGHT);
    for(let j = 0; j < spans.length; j++) {
      if(newHeight > activeSpanCount) {
      spans.style.opacity = '1';
      } else if(j > newHeight) {      
      spans.style.opacity = '0';
      }
      // set little opacity
      let upperSpan = MAX_BAR_HEIGHT - j;
      if(newHeight > MAX_BAR_HEIGHT-5 && upperSpan < 5) {
      spans.style.opacity = '0.' + upperSpan;
      }
      }
   }
}}
// Returns the number of active spans
function getActiveSpans(spans) {
let counter = 0;
   for(let i = 0; i < spans.length; i++) {
    if(spans.style.opacity > 0) counter++;
}
return counter;
}

// Returns a random number between 1 and 20
function getRandomHeight(maxBarHeight) {
return Math.round(Math.random() * (maxBarHeight - 1)) + 1;
}
// Add the default spans
function addBarSpans() {
const bars = document.getElementsByClassName('equalizer-bar');
let html = '';
for(let j = 0; j < MAX_BAR_HEIGHT; j++) {
    html += '<span></span>';
}
for(let i = 0; i < bars.length; i++) {
    bars.innerHTML = html;
}
}

</script>

杨帆 发表于 2024-11-12 17:55

好听好看，谢谢亚伦影音工作室友友精彩分享{:4_199:}

冬天的雨 发表于 2024-11-12 18:17

漂亮，加分后甩出论坛了，可能我手机的原因

冬天的雨 发表于 2024-11-12 18:18

音乐和效果都很完美{:4_178:}

红影 发表于 2024-11-12 20:24

这个均衡器还是代码做的呢，漂亮。
欣赏亚伦老师好帖{:4_199:}

秋思梦景 发表于 2024-11-12 20:43

问候老师好！精美音乐均衡器佳作，精心制作分享！为您点赞！向您学习！{:5_116:}{:4_204:}

小辣椒 发表于 2024-11-12 21:43

亚伦太棒了{:4_178:}

小辣椒 发表于 2024-11-12 21:44

这个效果真美，现在手机，等一下开电脑上去取代码，小辣椒学习套用玩一个{:4_205:}

小辣椒 发表于 2024-11-12 21:45

感谢亚伦的精彩分享{:4_199:}

查看完整版本: 音乐均衡器