useAudio()

Leverage the useAudio composable to load and control audio files in your web applications, providing advanced capabilities like signal processing.

Usage

To integrate audio management within your web applications, use the useAudio composable. This setup involves managing audio playback and analyzing audio data:

import { useRenderLoop, useAudio } from '@heyokajs/nuxt'

const audio = useAudio('/sample.mp3');
const { playing, playMusic, pauseMusic, updateFrequencyData, getFrequencyValueByRange } = audio;

const bassFrequency = getFrequencyValueByRange(20, 250);
const midFrequency = getFrequencyValueByRange(500, 2000);
const trebleFrequency = getFrequencyValueByRange(4000, 6000);

const { onLoop, resume } = useRenderLoop()
onLoop(({ delta, elapsed, clock }) => {
  // Updating the audio analyser 
  updateFrequencyData();
})

playMusic() // or pause with pauseMusic()

Options

playing

Boolean indicating whether the audio is currently playing. This allows you to control playback states within the application.

playMusic

Function to start playing the loaded audio file. This facilitates user interaction with audio content, such as play buttons.

pauseMusic

Function to pause the currently playing audio. This is useful for user controls that require stopping the audio temporarily.

updateFrequencyData

Function to update the frequency data from the audio file. This is necessary for visualizing audio or analyzing the sound in real-time.

getFrequencyValueByRange

Function that returns the frequency value within a specified range. This is used to extract and manipulate specific parts of the audio spectrum for further processing or visualization.