dev-audioprocessing/pages/index1/index.vue

<template>
<div>
  <div class="container">
    <div class="row pt-3">
      <div class="col-12 text-center">
<!--        <img src="~/assets/image/Cloudsoftware.png" class="img-fluid">-->
       <client-only>
<!--         <av-waveform-->
<!--             src="/maskin2.wav"-->
<!--             :played-line-width="3"-->
<!--             :noplayed-line-width="3"-->
<!--         ></av-waveform>-->
       </client-only>
        <h4 class="fw-bold  ">Focus</h4>
        <div class="pt-3">
          <img src="~/assets/image/Frame19439.png" class="img-fluid" />
        </div>
        <div class="d-flex justify-content-center  pt-3">
        </div>
        </div>
    </div>
  </div>
  <canvas id="audioSignalChart" width="400" height="200"></canvas>
</div>
</template>

<script>
// import BandpassProcessor from '~/plugin/octav.js'; // Adjust the path
// import Chart from 'chart.js';

export default {
  name: 'HomePage',

  data() {
    return {
      bandpassProcessor: null,
      audioContext: null,
      oscillator: null,
    };
  },

  mounted() {
    // Initialize the BandpassProcessor
    this.bandpassProcessor = new BandpassProcessor();

    // Initialize the AudioContext
    this.audioContext = new AudioContext();

    // Create an oscillator
    this.oscillator = this.audioContext.createOscillator();
    this.oscillator.type = 'sine'; // You can change the waveform type
    this.oscillator.frequency.setValueAtTime(440, this.audioContext.currentTime); // Set the initial frequency

    // Connect the oscillator to the BandpassProcessor
    this.oscillator.connect(this.bandpassProcessor);

    // Start the oscillator
    this.oscillator.start();

    // Send parameters to the BandpassProcessor
    this.bandpassProcessor.port.postMessage({
      frequency: 1000, // Adjust the frequency value as needed
      Q: 5, // Adjust the Q value as needed
    });

    // Listen for processed data from the BandpassProcessor
    this.bandpassProcessor.port.onmessage = (event) => {
      const { rms, dbValues, percentile10, percentile90 } = event.data;
      // Use the processed data as needed
    };

  // Create a line chart
  const ctx = document.getElementById('audioSignalChart').getContext('2d');
  this.audioSignalChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [], // You can add time labels or use an array index
      datasets: [
        {
          label: 'Audio Signal',
          data: [], // Populate this with your audio signal data
          borderColor: 'rgb(75, 192, 192)',
          borderWidth: 2,
          fill: false,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Time',
          },
        },
        y: {
          title: {
            display: true,
            text: 'Amplitude',
          },
        },
      },
    },
  });
}
};
</script>