简单的声波动画js版本

需要简单的js波形的动画，找了好几个都是画线的，不过需要的是一个画方块的，因此动手写了一个。
首先需要波形符合一个正弦函数的形状，然后再加上点随机变量让他看起来是一个接近真实的状态。

效果如下：

codepen

HTML代码部分:

<div class="container">
  <div class="item" id="item-0"></div>
  <div class="item" id="item-1"></div>
  <div class="item" id="item-2"></div>
  <div class="item" id="item-3"></div>
  <div class="item" id="item-4"></div>
  <div class="item" id="item-5"></div>
  <div class="item" id="item-6"></div>
  <div class="item" id="item-7"></div>
  <div class="item" id="item-8"></div>
  <div class="item" id="item-9"></div>
</div>

CSS代码部分：

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 300px;
}

.item {
  background-color: blue;
  width: 10px;
  margin-right: 8px;
}

JS代码部分

setInterval(() => {
  for(let i = 0; i < 10; i++) {
    let ele = document.getElementById(`item-${i}`)
    let height = 100 * Math.sin(Math.PI / 10 * i) * Math.random()
    ele.style = `transition: height 0.15s ease;height:${height}px;`
  }
}, 150);