<commit_before>angular-audio-player
====================

AngularJS Directive that wraps an ```<audio>``` tag exposing handy events and selectors to customize your audio player.


## Abstract / Idea
I've come across a lot of ```<audio>``` players on the web, many using Flash, many being easy-to-use, almost none of them being compatible with AngularJS.  
What i really was looking for was a simple audio wrapper **without** the need to support browser which don't have audio tag support!  
Means support for this project is the same as: [HTML5 audio draft][html5audiocompatibility], jQuery is not necessary, and DOM manipulation is done with 'modern' browsers in mind (IE9 not really being a top player here)  
[angular-audio-player][self] is html/css **agnostic**, meaning you can use it with your browser controls and default style, or bind the methods and properties in your own View

## Roadmap

  * better way to expose current time and buffered data (?!?)
  * song preload:
    * preload N songs before and after the current song.
    * multiple parallel preload connections
  * to achieve preload i need to use multiple `audio` tags
    * create only 2N `audio` tags
    * memorize/paginate `audio` properties even when the tag is removed from the DOM, so if it gets added back it haves the same progress. 

  * Documentation
    * playPause(index) documentation
    * example4, displaying playlist with `ng-repeat` and using `playPause($index)` on it.

## Dude i imported the library, where i can see it work? 
### [Examples here][examples]  
This directive it's just a way to expose ```<audio>``` tag property and methods to an AngularJS application, so you have to use custom html **and** css in order to interface with the audio directive.  

## Simple How-To
In your AngularJS application include in dependency injection ```angular-audio-player```

```javascript
angular.module('myApp', ['angular-audio-player'])
```

Then in the html:

```html
<audio data-player-control="audio1" data-playlist="playlist1" audio-player>
  <source src="http://upload.wikimedia.org/wikipedia/en/d/d0/Rick_Astley_-_Never_Gonna_Give_You_Up.ogg" type="audio/ogg">
</audio>
<span ng-show="audio1.playing">Player status: Playing</span>
<span ng-show="!audio1.playing">Player status: Paused</span>
```

## Directive Attributes

* **playlist**: An Array containing audioElements(s)
* **player-control**: Exposed properties and methods of the ```<audio>``` tag

## playlist structure

Playlist is an Array containing ```audioElement(s)```.  
An ```audioElement``` could be an Array of sourceObjects, or a single sourceObject.  

sourceObject mimics ```<source>``` HTML draft  

> **sourceObject structure**:
```javascript
{ src: 'http://some.where.com', type: 'mime/type', media: '.css.media.query' }
```
> **or alternatively**
```javascript
[
  { src: 'http://some.where.com', type: 'audio/ogg' },
  { src: 'http://some.where.com/lowquality', type: 'audio/ogg' },
  { src: 'http://some.where.com/crapquality', type: 'audio/ogg' },
  { src: 'http://some.where.com', type: 'audio/mp3' },
]
```

*For whoever wondering what ```media``` is*: it's just a [css media query][cssmediaquery], so the browser can pick which ```<source>``` tag to load.

## player-control methods and properties

### `player.play()`

### `player.playPause()`

### `player.pause()`

### `player.next()`
Goes to next audioElement if there is one in the playlist, otherwise does **nothing**.

### `player.prev()`
Goes to previous audioElement if there is one in the playlist, otherwise does **nothing**.

### `player.playing`
```true``` or ```false```

### `player.currentTrack`
Tracks the position of the playing track, it **might** change during playing the same track due to pushing elements into ```playlistArray```

### `player.tracks`
Number of tracks in the playlist

## Functionality<commit_msg>Readme updated with additional documentation<commit_after>angular-audio-player
====================

AngularJS Directive that wraps an ```<audio>``` tag exposing handy events and selectors to customize your audio player.


## Abstract / Idea
I've come across a lot of ```<audio>``` players on the web, many using Flash, many being easy-to-use, almost none of them being compatible with AngularJS.  
What i really was looking for was a simple audio wrapper **without** the need to support browser which don't have audio tag support!  
Means support for this project is the same as: [HTML5 audio draft][html5audiocompatibility], jQuery is not necessary, and DOM manipulation is done with 'modern' browsers in mind (IE9 not really being a top player here)  
[angular-audio-player][self] is html/css **agnostic**, meaning you can use it with your browser controls and default style, or bind the methods and properties in your own View

## Roadmap

  * better way to expose current time and buffered data (?!?)
  * song preload:
    * preload N songs before and after the current song.
    * multiple parallel preload connections
  * to achieve preload i need to use multiple `audio` tags
    * create only 2N `audio` tags
    * memorize/paginate `audio` properties even when the tag is removed from the DOM, so if it gets added back it haves the same progress. 

  * Documentation
    * ~~playPause(index) documentation~~
    * example4, displaying playlist with `ng-repeat` and using `playPause($index)` on it.

## Dude i imported the library, where i can see it work? 
### [Examples here][examples]  
This directive it's just a way to expose ```<audio>``` tag property and methods to an AngularJS application, so you have to use custom html **and** css in order to interface with the audio directive.  

## Simple How-To
In your AngularJS application include in dependency injection ```angular-audio-player```

```javascript
angular.module('myApp', ['angular-audio-player'])
```

Then in the html:

```html
<audio data-player-control="audio1" data-playlist="playlist1" audio-player>
  <source src="http://upload.wikimedia.org/wikipedia/en/d/d0/Rick_Astley_-_Never_Gonna_Give_You_Up.ogg" type="audio/ogg">
</audio>
<span ng-show="audio1.playing">Player status: Playing</span>
<span ng-show="!audio1.playing">Player status: Paused</span>
```

## Directive Attributes

* **playlist**: An Array containing audioElements(s)
* **player-control**: Exposed properties and methods of the ```<audio>``` tag

## playlist structure

Playlist is an Array containing ```audioElement(s)```.  
An ```audioElement``` could be an Array of sourceObjects, or a single sourceObject.  

sourceObject mimics ```<source>``` HTML draft  

> **sourceObject structure**:
```javascript
{ src: 'http://some.where.com', type: 'mime/type', media: '.css.media.query' }
```
> **or alternatively**
```javascript
[
  { src: 'http://some.where.com', type: 'audio/ogg' },
  { src: 'http://some.where.com/lowquality', type: 'audio/ogg' },
  { src: 'http://some.where.com/crapquality', type: 'audio/ogg' },
  { src: 'http://some.where.com', type: 'audio/mp3' },
]
```

*For whoever wondering what ```media``` is*: it's just a [css media query][cssmediaquery], so the browser can pick which ```<source>``` tag to load.

## player-control methods and properties

### `player.play([index])`
`index` is an _optional_ parameter, referring to the playlist index (0...playlist.length-1)

### `player.playPause([index])`
`index` is an _optional_ parameter, referring to the playlist index (0...playlist.length-1)

### `player.pause()`

### `player.next([autoplay])`
Goes to next audioElement if there is one in the playlist, otherwise does **nothing**.  
Autoplay behaviour is the following:
If a song is _already_ playing, it will change to the next audioElement, and start playing ASAP.  
You can force the autoplay on/off using the `autoplay` Boolean parameter.

### `player.prev([autoplay])`
Goes to previous audioElement if there is one in the playlist, otherwise does **nothing**.  
Refer to `.next()` about `autoplay` parameter.

### `player.playing`
```true``` or ```false```

### `player.currentTrack`
Tracks the position of the playing track, it **might** change during playing the same track due to pushing elements into ```playlistArray```

### `player.tracks`
Number of tracks in the playlist

## Functionality
{'fraction_non_alphanumeric': 0.13456400291474374, 'fraction_numerical': 0.003157639057566189, 'mean_word_length': 4.7306889352818375, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3034304', 'n_tokens_mistral': 2442, 'n_tokens_neox': 2334, 'n_words': 960}