Class MiniCardAudio

MiniCardAudio component displays an audio card with optional waveform animation and overlay.

Selector

app-mini-card-audio

Standalone

true

Imports

CommonModule

Template: -

Displays:

  • A customizable card with optional image and name.
  • Overlay with waveform animation and text.

Styles

  • Customizable card, overlay, and waveform styles.

Inputs

  • customStyle (Partial): Custom CSS styles for the card.
  • name (string): Name displayed on the card.
  • showWaveform (boolean): Controls visibility of waveform animation.
  • overlayPosition (string): Position for the overlay on the card.
  • barColor (string): Color of waveform bars.
  • textColor (string): Color of the name text.
  • imageSource (string): URL for the background image.
  • roundedImage (boolean): Rounds image corners if true.
  • imageStyle (Partial): Custom styles for the background image.

MiniCardAudio

Implements

OnInit, OnDestroy

Methods

  • ngOnInit: Initializes the component, starts waveform animation if showWaveform is true.
  • ngOnDestroy: Cleans up intervals.
  • animateWaveform: Starts animation of the waveform bars.
  • resetWaveform: Resets waveform to initial state.
  • clearIntervals: Clears all active intervals.
  • getAnimationDuration: Returns duration for animation at a given index.
  • getImageStyle: Combines custom image styles with rounded corners if enabled.
  • getOverlayPosition: Uses utility to determine the overlay's position.

Example

<app-mini-card-audio
  [customStyle]="{ backgroundColor: 'blue' }"
  name="Audio Name"
  [showWaveform]="true"
  overlayPosition="bottomRight"
  barColor="red"
  textColor="white"
  imageSource="/path/to/image.jpg"
  [roundedImage]="true"
  [imageStyle]="{ border: '2px solid black' }"
></app-mini-card-audio>

Implements

  • OnInit
  • OnDestroy

Constructors

constructor

Methods

ngOnInit ngOnDestroy animateWaveform resetWaveform clearIntervals getAnimationDuration getImageStyle getOverlayPosition

Properties

customStyle name showWaveform overlayPosition barColor textColor imageSource roundedImage imageStyle waveformAnimations intervals

Constructors

constructor

  • new MiniCardAudio(injectedCustomStyle, injectedName, injectedShowWaveform, injectedOverlayPosition, injectedBarColor, injectedTextColor, injectedImageSource, injectedRoundedImage, injectedImageStyle): MiniCardAudio

  • Parameters

    • injectedCustomStyle: Partial<CSSStyleDeclaration>
    • injectedName: string
    • injectedShowWaveform: boolean
    • injectedOverlayPosition: string
    • injectedBarColor: string
    • injectedTextColor: string
    • injectedImageSource: string
    • injectedRoundedImage: boolean
    • injectedImageStyle: Partial<CSSStyleDeclaration>

    Returns MiniCardAudio

Methods

ngOnInit

  • ngOnInit(): void

  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void

ngOnDestroy

animateWaveform

resetWaveform

clearIntervals

getAnimationDuration

getImageStyle

getOverlayPosition

Properties

customStyle

customStyle: any

name

name: string = ''

showWaveform

showWaveform: boolean = false

overlayPosition

overlayPosition: string = 'bottomLeft'

barColor

barColor: string = 'white'

textColor

textColor: string = 'white'

imageSource

imageSource: string = ''

roundedImage

roundedImage: boolean = false

imageStyle

imageStyle: any = {}

waveformAnimations

waveformAnimations: number[] = ...

intervals

intervals: Timeout[] = []

Settings

Member Visibility

On This Page

Constructors
Methods
Properties