Function MiniAudioPlayer

MiniAudioPlayer - A utility component for audio stream playback with optional waveform visualization.

This component manages audio playback for remote participants, handling consumer lifecycle, audio stream management, and optional waveform visualization through component injection. It integrates with MediaSFU's breakout room system and audio decibel tracking.

Key Features:

• Audio Stream Playback: Manages MediaStream playback through HTML audio elements
• Consumer Management: Handles WebRTC consumer lifecycle and pause/resume events
• Component Injection: Accepts custom MiniAudioComponent for waveform visualization
• Breakout Room Awareness: Respects breakout room states and limited access
• Audio Decibel Tracking: Integrates with updateParticipantAudioDecibels for level monitoring
• Waveform Modal: Optional modal display for audio waveform visualization
• Auto Wave Detection: Automatically manages waveform visibility based on audio activity
• Mute State Management: Tracks and responds to consumer mute/unmute events
• Interval Updates: Triggers reUpdateInter for periodic UI synchronization
• Stream Cleanup: Properly removes audio tracks on unmount or stream changes
• Ref-Based State: Uses refs for mutable state to avoid unnecessary re-renders
• Producer Identification: Associates audio with specific remote producer IDs

import React from 'react';
import { MiniAudioPlayer } from 'mediasfu-reactjs';

const RemoteAudioHandler = ({ audioStream, producerId, consumer, mediaSFUParams }) => {
  return (
    <MiniAudioPlayer
      stream={audioStream}
      remoteProducerId={producerId}
      consumer={consumer}
      parameters={{
        breakOutRoomStarted: false,
        breakOutRoomEnded: false,
        limitedBreakRoom: [],
        reUpdateInter: mediaSFUParams.reUpdateInter,
        updateParticipantAudioDecibels: mediaSFUParams.updateParticipantAudioDecibels,
        getUpdatedAllParams: mediaSFUParams.getUpdatedAllParams
      }}
    />
  );
};
Copy

import React from 'react';
import { MiniAudioPlayer } from 'mediasfu-reactjs';

const CustomWaveform = ({ visible, name, showWaveform, overlayPosition, barColor, textColor, imageSource, roundedImage, imageStyle }) => (
  visible ? (
    <div style={{
      position: 'absolute',
      top: overlayPosition,
      left: 0,
      right: 0,
      background: 'rgba(0,0,0,0.9)',
      padding: '20px',
      borderRadius: '12px',
      backdropFilter: 'blur(10px)'
    }}>
      {roundedImage && imageSource && (
        <img 
          src={imageSource} 
          alt={name} 
          style={{ width: '60px', height: '60px', borderRadius: '50%', ...imageStyle }}
        />
      )}
      <div style={{ color: textColor, fontSize: '18px', marginTop: '8px' }}>{name}</div>
      {showWaveform && (
        <div style={{ display: 'flex', gap: '4px', justifyContent: 'center', marginTop: '12px' }}>
          {Array.from({ length: 20 }).map((_, i) => (
            <div 
              key={i} 
              style={{
                width: '4px',
                height: `${Math.random() * 40 + 10}px`,
                backgroundColor: barColor,
                borderRadius: '2px',
                animation: 'wave 0.5s infinite alternate'
              }}
            />
          ))}
        </div>
      )}
    </div>
  ) : null
);

const AdvancedAudioPlayer = ({ audioStream, producerId, consumer, mediaSFUParams }) => {
  return (
    <MiniAudioPlayer
      stream={audioStream}
      remoteProducerId={producerId}
      consumer={consumer}
      parameters={mediaSFUParams}
      MiniAudioComponent={CustomWaveform}
      miniAudioProps={{
        barColor: '#00ff00',
        textColor: '#ffffff',
        roundedImage: true,
        overlayPosition: '10px'
      }}
    />
  );
};
Copy

import React, { useEffect, useRef } from 'react';
import { MiniAudioPlayer } from 'mediasfu-reactjs';

const AnalyticsAudioPlayer = ({ audioStream, producerId, consumer, mediaSFUParams }) => {
  const startTimeRef = useRef(Date.now());

  useEffect(() => {
    analytics.track('Audio Stream Started', {
      producerId,
      timestamp: startTimeRef.current
    });

    // Track audio quality metrics
    const qualityInterval = setInterval(() => {
      if (audioStream && audioStream.getAudioTracks().length > 0) {
        const track = audioStream.getAudioTracks()[0];
        const settings = track.getSettings();
        analytics.track('Audio Quality Check', {
          producerId,
          sampleRate: settings.sampleRate,
          channelCount: settings.channelCount,
          echoCancellation: settings.echoCancellation
        });
      }
    }, 30000);

    return () => {
      clearInterval(qualityInterval);
      const duration = Date.now() - startTimeRef.current;
      analytics.track('Audio Stream Ended', {
        producerId,
        duration: Math.floor(duration / 1000)
      });
    };
  }, [audioStream, producerId]);

  // Enhanced parameters with analytics
  const enhancedParams = {
    ...mediaSFUParams,
    updateParticipantAudioDecibels: async (params) => {
      const { name, averageLoudness } = params;
      analytics.track('Audio Level Update', {
        producerId,
        name,
        averageLoudness
      });
      await mediaSFUParams.updateParticipantAudioDecibels(params);
    }
  };

  return (
    <MiniAudioPlayer
      stream={audioStream}
      remoteProducerId={producerId}
      consumer={consumer}
      parameters={enhancedParams}
    />
  );
};
Copy

import React, { useState } from 'react';
import { MediasfuGeneric, MiniAudioPlayer } from 'mediasfu-reactjs';

const EnhancedMiniAudio = ({ visible, name, showWaveform, barColor, textColor }) => (
  visible ? (
    <div className="enhanced-audio-indicator">
      <div className="participant-info">
        <span className="status-icon">🎤</span>
        <span className="participant-name">{name}</span>
      </div>
      {showWaveform && (
        <div className="waveform-container">
          <div className="waveform-bars">
            {Array.from({ length: 15 }).map((_, i) => (
              <div 
                key={i}
                className="bar"
                style={{
                  backgroundColor: barColor,
                  animationDelay: `${i * 0.05}s`
                }}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  ) : null
);

const CustomMiniAudioPlayer = (props) => (
  <MiniAudioPlayer
    {...props}
    MiniAudioComponent={EnhancedMiniAudio}
    miniAudioProps={{
      barColor: '#00d4ff',
      textColor: '#ffffff',
      roundedImage: true
    }}
  />
);

const App = () => {
  const [credentials] = useState({
    apiUserName: 'user123',
    apiKey: 'your-api-key'
  });

  return (
    <MediasfuGeneric
      credentials={credentials}
      uiOverrides={{
        MiniAudioPlayer: CustomMiniAudioPlayer
      }}
    />
  );
};
Copy