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: about 1 month 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 (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-21T13:56:31.000Z (11 months ago)
- Last Synced: 2025-01-09T17:11:02.937Z (10 months ago)
- Topics: angular, audio, audio-visualizer, audio-wave, player, silicon
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/audio-wave
- Size: 2.2 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. (Third Party Components / Media)
- 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. (Third Party Components / Media)
README
# Audio Wave for Angular 13+
Very simple audio wave system
## Screen
## 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://cdn.freesound.org/previews/219/219167_3162775-lq.ogg';
```
```html
played percent: {{ngxAudioWave.playedPercent()}} ({{ngxAudioWave.exactPlayedPercent()}})
current time: {{ngxAudioWave.currentTime()}} ({{ngxAudioWave.exactCurrentTime()}})
duration: {{ngxAudioWave.duration()}} ({{ngxAudioWave.exactDuration()}})
```
## Properties
```html
@if(!audioRef.isLoading()){
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.isPaused() }})
@if (audioRef2.isPaused()) {
Play
} @else {
Pause
}
Stop
```
or you can get access to The HTML `````` element inside component
```audioRef2.audio?.nativeElement```
Example:
```html
@if(audioRef2.audio?.nativeElement?.paused) {
Play
} @else {
Pause
}
```
#### WARNING: using this code will lead to [NG0100: ExpressionChangedAfterItHasBeenCheckedError]
## Source
https://github.com/joldibaev/silicon-audio-wave/tree/master/projects/ngx-audio-wave