<commit_before>angular-media-player [![Build Status](https://travis-ci.org/mrgamer/angular-audio-player.svg?branch=next)](https://travis-ci.org/mrgamer/angular-audio-player)
====================
AngularJS Directive that wraps `<audio>` or `<video`> tag exposing methods and properties to manipulate your 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 only with jqLite (IE9+)  
[angular-media-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

## How-to use it in your project
Using [bower](http://bower.io):
```bash
$ bower install angular-media-player
```

Using github hosting:
```html
<!-- non-minified for debugging -->
<script src="//mrgamer.github.io/angular-media-player/dist/angular-media-player.js" type="text/javascript"></script>
<!-- minified -->
<script src="//mrgamer.github.io/angular-media-player/dist/angular-media-player.min.js" type="text/javascript"></script>
```

## Breaking changes with `0.5.x`

  * `angular.module` changed **AGAIN** from `'audioPlayer'` to `'mediaPlayer'` as the library supports `<video>` tag aswell
  * property `'position'` removed. Use `currentTime` instead.

If you find something is missing from this list please take a couple of minutes to open an [Issue][issues]

### What's new

  * I've already written it but... `<video>` tag support!
  * new property `network`
  * playback rate support
  * seeking
  * test-driven: both unit tests and asynchronous tests with real audio/video files (requires internet working)
  * playlist handling is way more robust, and tested.
  * `mediaPlayer` is not created as an isolated scope, instead it **pollutes** the father scope. Watch out for name collisions.
  * Events are no more sent to `$rootScope`, they are handled by the namespaced `mediaPlayer`, that is now an [angular.js Scope][angularscopes]
  * Minimalist and flexible [event system](#events), based off browser implementation.

The new documentation is on-going work, you can keep track of it being developed, but is not ready to be deployed yet.  
And this time will be on `gh-pages`!

More tests are coming.

## Getting Started
### [Examples here][examples]  
This directive it's just a way to expose _HTMLMediaElement_ properties and methods to an AngularJS application, so you have to use custom html **and** css in order to interface with the audio directive.  

## Basic Example
In your AngularJS application include in dependency injection `mediaPlayer`

```javascript
angular.module('myApp', ['mediaPlayer'])
```

Then in the html:
```html
<audio media-player="audio1" data-playlist="playlist1">
  <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
`media-player` is a directive working as an _attribute_, it **must** be used either on an `<audio>`, or `<video>` tag.

### Attributes
Those can be used as any [AngularJS directive attributes notation][angularattributes]<commit_msg>Better explanation on README.md regarding Usage<commit_after>angular-media-player [![Build Status](https://travis-ci.org/mrgamer/angular-audio-player.svg?branch=next)](https://travis-ci.org/mrgamer/angular-audio-player)
====================
AngularJS Directive that wraps `<audio>` or `<video`> tag exposing methods and properties to manipulate your 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 only with jqLite (IE9+)  
[angular-media-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

## How-to use it in your project
Using [bower](http://bower.io):
```bash
$ bower install angular-media-player
```

Using github hosting:
```html
<!-- non-minified for debugging -->
<script src="//mrgamer.github.io/angular-media-player/dist/angular-media-player.js" type="text/javascript"></script>
<!-- minified -->
<script src="//mrgamer.github.io/angular-media-player/dist/angular-media-player.min.js" type="text/javascript"></script>
```

## Breaking changes with `0.5.x`

  * `angular.module` changed **AGAIN** from `'audioPlayer'` to `'mediaPlayer'` as the library supports `<video>` tag aswell
  * property `'position'` removed. Use `currentTime` instead.

If you find something is missing from this list please take a couple of minutes to open an [Issue][issues]

### What's new

  * I've already written it but... `<video>` tag support!
  * new property `network`
  * playback rate support
  * seeking
  * test-driven: both unit tests and asynchronous tests with real audio/video files (requires internet working)
  * playlist handling is way more robust, and tested.
  * `mediaPlayer` is not created as an isolated scope, instead it **pollutes** the father scope. Watch out for name collisions.
  * Events are no more sent to `$rootScope`, they are handled by the namespaced `mediaPlayer`, that is now an [angular.js Scope][angularscopes]
  * Minimalist and flexible [event system](#events), based off browser implementation.

The new documentation is on-going work, you can keep track of it being developed, but is not ready to be deployed yet.  
And this time will be on `gh-pages`!

More tests are coming.

## Getting Started
### [Examples here][examples]  
This directive it's just a way to expose _HTMLMediaElement_ properties and methods to an AngularJS application, so you have to use custom html **and** css in order to interface with the audio directive.  

## Basic Example
In your AngularJS application include in dependency injection `mediaPlayer`

```javascript
angular.module('myApp', ['mediaPlayer'])
.controller('MyController', function ($scope) .......)
```

Then in the html:
```html
<div ng-controller="MyController">
  <audio media-player="audio1" data-playlist="playlist1">
    <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>
</div>
```

What happens here: a variable called `audio1` gets created on the scope bound to the controller that holds the `<audio>` tag.
That might be one of your specific controller, or, if you didn't define anyone, it will be `$rootScope`.

You can access those methods like this:
```javascript
angular.module('myApp').controller('MyController', function ($scope) {

  // access properties
  console.log($scope.audio1.network);
  console.log($scope.audio1.ended);

  $scope.mySpecialPlayButton = function () {
    $scope.customText = 'I started angular-media-player with a custom defined action!';
    $scope.audio1.playPause();
  };
})
```
You can use the methods in the controller AND directly in the HTML (as shown in the snippet before), since they are exposed in the $scope.

## Directive
`media-player` is a directive working as an _attribute_, it **must** be used either on an `<audio>`, or `<video>` tag.

### Attributes
Those can be used as any [AngularJS directive attributes notation][angularattributes]
{'fraction_non_alphanumeric': 0.12040589036010395, 'fraction_numerical': 0.0029699294641752257, 'mean_word_length': 4.814388489208633, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 46, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6104549', 'n_tokens_mistral': 2353, 'n_tokens_neox': 2234, 'n_words': 924}