Simple sonic animation js version

I need a simple js waveform animation. I found several that draw lines, but I need one that draws squares, so I wrote one by hand.
First, the waveform needs to conform to the shape of a sine function, and then some random variables are added to make it look like a state close to reality.

The effect is as follows:

codepen

HTML code part:

<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 code part:

.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 code part

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);