Audio Management Hook and Exports

App.jsx

import React from 'react';
import { AudioLibrary } from './utils/Audios';

function ExampleComponent() {
  const handlePlaySiren = () => {
    AudioLibrary.siren.play();
  };

  const handlePlayAlarm = () => {
    AudioLibrary.alarm.play();
  };

  return (
    <div>
      <button onClick={handlePlaySiren}>Play Siren</button>
      <button onClick={handlePlayAlarm}>Play Alarm</button>
    </div>
  );
}

export default ExampleComponent;

Audios-class-ssr.js

// src/utils/Audios.js
class AudioController {
  constructor(src) {
    this.src = src;
    this.audio = null;
  }

  _initAudio() {
    // Ensure audio is only created in browser environment
    if (typeof window !== 'undefined') {
      if (!this.audio) {
        this.audio = new Audio(this.src);
      }
      return this.audio;
    }
    return null;
  }

  play(currentTime) {
    const audio = this._initAudio();
    if (audio) {
      audio.play().catch((error) => {
        console.error("Error playing audio:", error);
      });

      if (currentTime) {
        audio.currentTime = currentTime;
      }
    }
  }

  pause() {
    if (this.audio) {
      this.audio.pause();
    }
  }

  stop() {
    if (this.audio) {
      this.audio.pause();
      this.audio.currentTime = 0;
    }
  }

  setVolume(volume) {
    if (this.audio) {
      this.audio.volume = Math.max(0, Math.min(1, volume));
    }
  }
}

// Centralized audio exports
export const AudioLibrary = {
  siren: new AudioController('assets/siren.mp3'),
  alarm: new AudioController('assets/alarm.mp3'),
  notification: new AudioController('assets/notification.mp3'),
  // Add more audio files as needed
};

// Optional: Function to check if we're in a browser environment
export const isBrowser = () => typeof window !== 'undefined';

Audios-hook.js

// src/utils/Audios.js
import { useMemo } from 'react';

// Create a custom hook for audio management
export const useAudio = (src) => {
  const audio = useMemo(() => {
    const audioInstance = new Audio(src);
    
    return {
      play: () => {
        audioInstance.play().catch(error => {
          console.error('Error playing audio:', error);
        });
      },
      pause: () => audioInstance.pause(),
      stop: () => {
        audioInstance.pause();
        audioInstance.currentTime = 0;
      },
      setVolume: (volume) => {
        audioInstance.volume = Math.max(0, Math.min(1, volume));
      }
    };
  }, [src]);

  return audio;
};

// Centralized audio exports
export const AudioLibrary = {
  siren: useAudio('assets/siren.mp3'),
  alarm: useAudio('assets/alarm.mp3'),
  notification: useAudio('assets/notification.mp3'),
  // Add more audio files as needed
};