MediaSFU ReactJS
    Preparing search index...

    Variable MiniAudioPlayerConst

    MiniAudioPlayer: React.FC<MiniAudioPlayerOptions> = ...

    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

    Configuration options for MiniAudioPlayer

    The audio media stream to play

    Unique identifier for the remote audio producer

    WebRTC consumer object handling the audio track

    MediaSFU integration parameters

    Flag indicating if breakout room session is active

    Flag indicating if breakout room session has ended

    Array of participants with limited breakout access

    Function to trigger interval-based UI updates

    Function to update audio level tracking

    Function to retrieve latest parameter values

    Custom component for audio waveform visualization

    Additional props passed to MiniAudioComponent

    The rendered audio player component (returns null as audio plays through hidden element)

    // Basic audio player for remote participant

    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
          }}
        />
      );
    };

    // Custom waveform visualization component

    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'
          }}
        />
      );
    };

    // Analytics tracking for audio playback

    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}
        />
      );
    };

    // Integration with MediasfuGeneric using uiOverrides

    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
          }}
        />
      );
    };

    Settings

    Member Visibility