https://github.com/joldibaev/silicon-audio-wave

Very simple audio wave system from Silicon
https://github.com/joldibaev/silicon-audio-wave

angular audio audio-visualizer audio-wave player silicon

Last synced: 3 months ago
JSON representation

Very simple audio wave system from Silicon

• Host: GitHub
• URL: https://github.com/joldibaev/silicon-audio-wave
• Owner: joldibaev
• Created: 2022-08-30T14:01:19.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-07-22T07:34:23.000Z (5 months ago)
• Last Synced: 2024-09-22T07:11:25.656Z (3 months ago)
• Topics: angular, audio, audio-visualizer, audio-wave, player, silicon
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/audio-wave
• Size: 2.02 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-angular - silicon-audio-wave - Very simple audio wave system from Silicon. (Table of contents / Third Party Components)
• fucking-awesome-angular - silicon-audio-wave - Very simple audio wave system from Silicon. (Table of contents / Third Party Components)
• fucking-awesome-angular - silicon-audio-wave - Very simple audio wave system from Silicon. (Table of contents / Third Party Components)
• awesome-angular - silicon-audio-wave - Very simple audio wave system from Silicon. (Table of contents / Third Party Components)

README

        
# Audio Wave for Angular 13+

Very simple audio wave system

## Screen

![alt text](https://github.com/joldibaev/silicon-audio-wave/raw/master/src/assets/demo2.png)

## Installation

Install the npm package.

	npm i ngx-audio-wave --save

Import module:

```ts

import {NgxAudioWaveModule} from "ngx-audio-wave";

@NgModule({

  imports: [NgxAudioWaveModule]

})

```

## Usage

```ts

audioSrc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/shoptalk-clip.mp3';

```

```html

  
played percent: {{ngxAudioWave.playedPercent}} ({{ngxAudioWave.exactPlayedPercent}})

  
current time: {{ngxAudioWave.currentTime}} ({{ngxAudioWave.exactCurrentTime}})


  

  
duration: {{ngxAudioWave.duration}} ({{ngxAudioWave.exactDuration}})


```

## Properties

```html

  

  
duration: {{ngxAudioWave.duration|toTimer}} (no duration while loading)

  
duration: {{ngxAudioWave.duration|toTimer}} (zero will be display while loading)


```

## Custom btn

### One action btn

```html

Play

Pause

```

### Toggle btn

```html

Toggle btn (is pause: {{audioRef2.isPause}})

Play

Pause

Stop

```

or you can get access to The HTML `````` element inside component

```audioRef2.audio?.nativeElement```

Example:

```html

Play

Pause

```

#### WARNING: using this code will lead to [NG0100: ExpressionChangedAfterItHasBeenCheckedError]

## Source

https://github.com/joldibaev/silicon-audio-wave/tree/master/projects/ngx-audio-wave