1.0.1 • Published 8 months ago

ngx-audio-control v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

A library for loading and playing audio using HTML 5 for Angular

Demo

npm.io

Live Demo

📥 Installation

ngx-audio-control is available via npm and yarn

Using npm:

$ npm install ngx-audio-control --save

Using yarn:

$ yarn add ngx-audio-control

🌟 Getting Started

Import NgxAudioPlayerModule in in the root module(AppModule):

// Import library module
import { NgxAudioPlayerModule } from 'ngx-audio-player';

@NgModule({
  imports: [
    // ...
    NgxAudioPlayerModule
  ]
})
export class AppModule { }

Usage

HTML

<ngx-audio-control [fileList]="files" 
                   [linear]="true"
                   [download]="true"
 ></ngx-audio-control>

Ts

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent {
  files = [
    'assets/files/a.mp3',
    'assets/files/b.mp3',
    'assets/files/c.mp3',
  ];
}

Properties

@Input

NameDescriptionTypeDefault Value
showListShow play list buttonbooleantrue
downloadShow download buttonbooleanfalse
showFileNameDisplay filename in headerbooleantrue
showSpeedShow speed controlbooleantrue
showVolumeShow volume controlbooleantrue
linearDisplay vertically or horizontally between control buttons and range seekerbooleanfalse
preloadThis enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience'none', 'metadata' , 'auto''metadata'

🔰 for seek audio file in chrome:

IIS web.config

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Accept-Ranges" value="bytes" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

Appache .htaccess

<IfModule mod_headers.c>
    Header set Accept-Ranges bytes
</IfModule>

NginX nginx.conf

http {
    server {
        location / {
            add_header Accept-Ranges bytes;
        }
    }
}

Author

💻Mohammadreza samani | FrontEnd Developer

Donate

If you like my work you can buy me a 🍺 or 🍕

❤️Donate😉

1.0.1

8 months ago

1.0.0

8 months ago

0.0.12

9 months ago

0.0.11

9 months ago

0.0.10

9 months ago

0.0.9

9 months ago

0.0.8

9 months ago

0.0.7

9 months ago

0.0.6

9 months ago

0.0.5

9 months ago

0.0.4

9 months ago

0.0.3

9 months ago

0.0.2

9 months ago

0.0.1

9 months ago