Class MiniAudio

MiniAudio component is a draggable, customizable mini audio player with optional waveform animations.

Selector

app-mini-audio

Standalone

true

Imports

CommonModule

Template

<div *ngIf="visible" class="modal-container" [ngStyle]="{ transform: 'translate(' + position.x + 'px, ' + position.y + 'px)' }" (mousedown)="handleMouseDown($event)">
  <div class="card" [ngStyle]="customStyle">
    <ng-container *ngIf="imageSource">
      <img [src]="imageSource" [ngStyle]="getImageStyle()" alt="Background" class="background-image" />
    </ng-container>
    <div class="name-text" [ngStyle]="combineStyles({ color: textColor }, nameTextStyling)">
      {{ name }}
    </div>
    <div [ngStyle]="getOverlayPosition(overlayPosition)" class="overlay-web">
      <div class="waveform-web">
        <div *ngFor="let animation of waveformAnimations; let i = index"
             [ngStyle]="{ height: animation == 0 ? '1px' : '30px', width: '10px', backgroundColor: barColor }"
             class="bar">
        </div>
      </div>
    </div>
  </div>
</div>

Styles

  • .modal-container: Positioning and drag area.
  • .card: The main container styling.
  • .background-image: Styling for an optional background image.
  • .name-text: Styling for name text with customizable color.
  • .overlay-web and .waveform-web: Contains and styles the waveform animation bars.

Inputs

  • visible (boolean): Show/hide the component.
  • customStyle (object): Custom styles for the component.
  • name (string): Text to display as the name.
  • showWaveform (boolean): Show/hide waveform animations.
  • overlayPosition (string): Position of the overlay.
  • barColor (string): Color of waveform bars.
  • textColor (string): Color of name text.
  • nameTextStyling (object): Additional styles for the name text.
  • imageSource (string): URL of the background image.
  • roundedImage (boolean): If true, applies rounded corners to the image.
  • imageStyle (object): Custom styles for the image.

Methods

  • ngOnInit(): Starts waveform animations if showWaveform is true.
  • ngOnDestroy(): Clears waveform animation intervals.
  • animateWaveform(): Sets intervals for each bar's animation.
  • handleMouseDown(event: MouseEvent): Starts dragging on mousedown.
  • handleMouseMove(event: MouseEvent): Updates position during drag.
  • handleMouseUp(): Ends dragging on mouseup.

Example

<app-mini-audio [visible]="true" [name]="'Audio Player'" [barColor]="'blue'" [imageSource]="'/path/to/image.png'"></app-mini-audio>

Implements

  • OnInit
  • OnDestroy

Constructors

constructor

Methods

ngOnInit ngOnDestroy animateWaveform animateBar resetWaveform clearIntervals getAnimationDuration getImageStyle combineStyles handleMouseDown handleMouseMove handleMouseUp getOverlayPosition

Properties

visible customStyle name showWaveform overlayPosition barColor textColor nameTextStyling imageSource roundedImage imageStyle waveformAnimations intervals position isDragging dragOffset

Constructors

constructor

  • new MiniAudio(injectedVisible, injectedCustomStyle, injectedName, injectedShowWaveform, injectedOverlayPosition, injectedBarColor, injectedTextColor, injectedNameTextStyling, injectedImageSource, injectedRoundedImage, injectedImageStyle): MiniAudio

  • Parameters

    • injectedVisible: boolean
    • injectedCustomStyle: any
    • injectedName: string
    • injectedShowWaveform: boolean
    • injectedOverlayPosition: string
    • injectedBarColor: string
    • injectedTextColor: string
    • injectedNameTextStyling: any
    • injectedImageSource: string
    • injectedRoundedImage: boolean
    • injectedImageStyle: any

    Returns MiniAudio

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

animateBar

resetWaveform

clearIntervals

getAnimationDuration

getImageStyle

combineStyles

handleMouseDown

handleMouseMove

handleMouseUp

getOverlayPosition

Properties

visible

visible: boolean = true

customStyle

customStyle: any

name

name: string = ''

showWaveform

showWaveform: boolean = false

overlayPosition

overlayPosition: string = ''

barColor

barColor: string = 'red'

textColor

textColor: string = 'white'

nameTextStyling

nameTextStyling: any = {}

imageSource

imageSource: string = ''

roundedImage

roundedImage: boolean = false

imageStyle

imageStyle: any = {}

waveformAnimations

waveformAnimations: number[] = ...

intervals

intervals: Timeout[] = []

position

position: {
    x: number;
    y: number;
} = ...

isDragging

isDragging: boolean = false

dragOffset

dragOffset: {
    x: number;
    y: number;
} = ...

Settings

Member Visibility

On This Page

Constructors
Methods
Properties