<template>
  <span class="audio-wave">
    <span v-for="height in heights" :style="{height: height + 'px'}" class="column"></span>
  </span>
</template>

<script lang="ts">
import {defineComponent, ref, onBeforeUnmount} from "vue";

export default defineComponent({
  name: "audio-wave",
  setup() {
    const heights = ref<number[]>([]);

    const random = () => {
      for(let i = 0; i < 20; i++) {
        heights.value[i] = Math.floor(Math.random() * 20)
      }
    }

    random();

    let timer = setInterval(random, 300)

    onBeforeUnmount(() => {
      clearInterval(timer);
    })

    return { heights }
  }
});
</script>

<style scoped lang="less">
.audio-wave {
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  height: 20px;
  width: 2.4rem;

  .column {
    display: inline-block;
    width: 2px;
    background: #FFFFFF;
    border-radius: 2px;

  }
}
</style>
