colthreepv / angular-media-player Goto Github PK

This is amazing! Thank you. But I've been struggling to get a title passed to the scope (so I can display the title of a track when I click the mediaPlayer.play() button). I've tried adding it via a separate controller but it won't update. I've also tried amending the src elements in the directive.

Is there a way to easily add titles (and other information) to each playlisted track?

player.currentTime is not reset after a player.load(...) is called for the 2nd time.

player.playing is true and the player.currentTime is set to the previous currentTime. This causes the progress bar to jump briefly before being set correctly.

Our current workaround is to:

// bug fix for player... reset currentTime to zero when track is 0
$scope.$watch("player.currentTrack", function(newVal,oldVal) {
  if( newVal != oldVal && newVal === 0 && $scope.player.currentTime > 0) {
     $scope.player.currentTime = 0;
  }
});

is there a way to bind to the 'progress' event of the angular-audio-player ? (without using $watch )
something like

$scope.audio1.addEventListener("progress", function()
{
console.log('progress: ' , $scope.audio1.currentTime);
})

Reference:
http://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/

Workaround:
However, I’ve also found a workaround for current browsers. As of WebKit r108831, all restrictions are removed in the first successful load() or play() call. Any user gesture is accepted, so one can listen to all input events and remove the restrictions as soon as the user clicks, touches or uses the keyboard. One does not need to start playback at that point, but can wait until a later time. For example, one could “liberate” a number of audio elements for later use in a game.

Thoughts? Can we build this into this library?

the seeking breaks if we seek to the end of the audio/video while buffering.

See https://mrgamer.github.io/angular-media-player/dist/angular-media-player.min.js

How do i stop the player from dowloading of the rest of the audio/video when the stop button is clicked .
thanks

My template

<div class="audio_player_wrap">
    <audio ng-if="audio.url" media-player="mediaPlayer" autoplay="autoplay">
      <source ng-src="{{::audio.url}}" type="audio/ogg" />
    </audio>
</div>

Due to ng-if directive creates new child scope, I can't access $scope.mediaPlayer in parent directive. It's the same problem as when using ng-model with expression without dot; caused by prototype inheritance in AngularJS.
I used this workaround:

--- a/app/vendor/angular-media-player/angular-media-player.js
+++ b/app/vendor/angular-media-player/angular-media-player.js
@@ -430,7 +430,9 @@ angular.module('mediaPlayer', ['mediaPlayer.helpers'])
         } else {
           playlist = scope[playlistName];
         }
-        if (mediaName !== undefined) { scope[mediaName] = player; }
+        if (mediaName !== undefined) {
+          scope.$eval(mediaName + ' = player', {player: player});
+        }

with attribute media-player="mediaPlayer.player" and defined $scope.mediaPlayer = {} in parent directive.
The same probably applies to playlist attribute.

Playback seems to fail when I try to set a playlist and play it in one action. It works fine if the playlist is set when the page loads, and then playback started later. It also works on subsequent playlist changes / playback attempts. It only fails when the initial playlist is set and played in one action.

Scenario 1: User visits page. When the user clicks play, the playlist is set and playback started. FAILS.

Scenario 2: User visit page and playlist is set in advance. User clicks play to start playback. WORKS.

This is important in an app where the user is browsing various playlist pages (e.g. album pages), but I do not want to change the playlist until the user clicks play.

I'm currently using a hacky workaround, but hopefully there is a simple bug that can be fixed.

I have been using this angular binding to create my own media player and, while that hasn't been going swimmingly, I did notice an issue while trying to seek.

I've fixed it to the best of my knowledge: https://github.com/chrisruffalo/angular-media-player/commit/9f32c176612f6a738b0d17cadb92180f5620f50d

It would be really nice to have angular-media-player on npm, so it could be easier used with browserify.

This might be a good feature to add to the project, because I'm having problems with trusted resources when creating my directive.

Can someone share a reusable directive to use from template, and maybe we can build from that to include in the project?

Thanks.

I thinked awhile about how expose TimeRanges structures, they are particular arrays explaining how much has been played, how much is seekable, and buffered.

The specific properties are:

• buffered
• played
• seekable

The abstraction i had in mind is to put all those 3 arrays to an array of hashes like this:

playerControl.seekable: [
  { start: 0, end: 25 },
  { start: 51, end: 55 },
  { start: 99, end: 100 }
];

They are percentage-based and would couple well with an <input type="range"> element.
It's still under debate if it's worth to, or if there is a more clever/handy way to expose those informations

Comments are welcome

Hey, great module!

Just wondering if I can totally clear a playlist by doing:

$scope.playlist = [];

and then push new sources into it? That doesn't really work, it just seems to hang when I skip to the next track. Do I need to remove each source individually?

I'm trying to rebuild the playlist based on user actions.

Thanks!

The following error occurs when I navigate away from the page containing my media player. Note that I have set up my playlist using ng-repeat.

TypeError: Cannot read property '$$destroyed' of null
at g.$destroy (...angular.min.js:99:374)
at g.$broadcast (...angular.min.js:102:462)
at g.$destroy (...angular.min.js:99:412)
at g (...angular-route.min.js:6:251)
at ...angular-route.min.js:6:394
at ...angular.min.js:42:170
at s (...angular-route.min.js:6:378)
at g.$broadcast (...angular.min.js:102:462)
at ...angular-route.min.js:10:443
at z (...angular.min.js:91:280)

AngularStrap has the same directive "throttle" and it causes conflicts, because these functions uses different signature:

and from angular-strap:

.constant('throttle', function (func, wait, options) {

and from angular-media-player:

.factory('throttle', ['$timeout', function ($timeout) {
  return function (delay, no_trailing, callback, debounce_mode) {

I get this error when trying to use the player in safari browser:

'undefined' is not a function (evaluating 'this.$domEl.play()')
scripts/360c0ed9.vendor.js:8

I'm trying to access the player object from my controller, and the player object is always undefined. Any ideas?

https://gist.github.com/nicholaswyoung/5ab6d15773920aa39973

Error on page http://mrgamer.github.io/angular-media-player/interactive.html

From console:
Error: [$injector:modulerr] Failed to instantiate module docs-interactive due to:
[$injector:modulerr] Failed to instantiate module ngDragDrop due to:
[$injector:nomod] Module 'ngDragDrop' is not available
and
http://mrgamer.github.io/libs/angular-dragdrop.js 404 Not Found

When I set playPause(true) the player continues with the next track once the currently played track has ended.

I downloaded the zip trying to run the index.html example, but it cant find.

templates-docs.js
ibs.js
app.js

Where can I get these files?

I'm trying to play recorded audio from blob i.e. blob:http%3A//localhost/d3bce65e-bd22-45b1-94dd-78a56abcf5aa . Is there possibility to do it?

Track play fine at native audio control.

Thanks

I have a queue like implemented and the songs are an array with more than just, src and type.

{
src: '',
type : '',
name : '',
fav : true/false
}

So if I change the javascript object (playlist), lets say, the name, the song restarts, do you know why?

The library looks promising. I couldn't get the demo's to work in either Chrome or Safari on an IPad. Is this expected?

I'm trying to follow along with the ng-repeat example. It works mostly but I'm having trouble with mediaPlayer.playing. For the play pause button I used:

<div class='btn' ng-click='mediaPlayer.playPause()'>
    <i class='fa' ng-class="{ 'fa-pause': mediaPlayer.playing, 'fa-play': !mediaPlayer.playing }"></i>
</div>

It plays on click but the pause icon does not show up. Error in the console:

TypeError: undefined is not a function
    at updateClasses (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:18307:22)
    at Object.ngClassWatchAction [as fn] (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:18318:15)
    at Scope.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:12447:29)
    at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:12712:24)
    at HTMLAudioElement.listeners.playing (http://mrgamer.github.io/angular-media-player/dist/angular-media-player.js:247:14)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:2823:10
    at Array.forEach (native)
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:325:11)
    at HTMLAudioElement.eventHandler (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js:2822:5) 

And in my view when I look at <pre>{{ mediaPlayer }}</pre> it shows up as "$SCOPE"

Hello, i just clone your project but i think its missing some file, i listed missing below.
app.js
libs.js
templates-docs.js

in the docs/index.html

thanks

Like in the example provided I have

<audio data-player-control="audio1" data-playlist="questionPlaylist" audio-player>

I can access $scope.audio1 in my controll that has the audio tag with audio-player as an attribute.

How can I reliably tell when it's initialized? I don't see any events for the "player is ready" in the source code. I can do a watch on that property but it's undefined a couple times and I'd like to prevent null checks and just look for the initialization the "right" way, if there is one.

 $scope.$watch("audio1", function(currentAudioObject) {
                console.log("current", currentAudioObject);
                currentAudioObject && currentAudioObject.play();
            });

Thanks for the help!

This is a bug i've discovered in the upcoming version of the library, i think it's definitely there also in the stable branch.

Reproduce:
Use an audio file served without Content-Length header, the browser will be unable to seek.
After you completed listening, issuing a play() command doesn't make it play again because the browser cannot seek!!!

What could i do: making the default behavior of load() before play() everytime, possible to override using a boolean.

So play([index]) will become play([index]) OR play([reload]), reload doesn't work with index, because when you call it with an integer the player already reloads the audio tag with a load().

Seems ok as a change?

Automatized tests are run on firefox 24.x Extended Support Release, but on Firefox 31.x this test fails.

I have no idea why, code here

edit: more tests fails with firefox 32.x i wonder if this has to be fixed or not...

I have a question about a playlist in this awesome directive.

There's some existing configuration to stop autoplay the next song in a playlist?.

When i play($index) automatically, after end the song, goes to the next one. ¿How i can make stop?

Thank you!

To the best of my knowledge and of reading the source, there is no event to tell when all audio files in a playlist have completed.

I know the playlist can be updated on the fly, so that this event could be fired multiple times, but I think it could be really useful.

Since there's no way to tell when a single audio file is done, the :pause event is used for both, I've done the following to tell when my playlist is over.

Do you have any suggestions on how I could improve this or the source code itself?

            $scope.$watch("audio1.currentTrack", function(currentTrackNumber) {
                if (!$scope.audio1) return;
                if (currentTrackNumber == $scope.audio1.tracks) {
                    var deregister = $scope.$on("narrationPlayer:pause", function(scope, currentlyPlaying) {
                        if (!currentlyPlaying) {
                            //allPlayedEvent()
                            deregister();
                        }
                    });
                }
            });

Is there an easy way to seek to a specific time? Changing the currentTime seem to make no difference, which would normally work using the straight html5 player.

Tried interactive demo:
http://aap.col3.me/#!/

Added songs to playlist, hit play, and nothing happened. No issues with Chrome or Firefox though.

play(index) and playPause(index) not working

When I navigate away from my view with many angular-media-player directives stacked in an ng-repeat, this.$broadcast('$destroy') is called by angular with this = window.

Here's the error message:

TypeError: undefined is not a function
at $get.Scope.$destroy (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:11681:14)
at ng.config.$provide.decorator.$delegate.__proto__.$destroy (<anonymous>:812:29)
at Scope.$get.Scope.$broadcast (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:12001:28)
at Scope.$get.Scope.$destroy (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:11681:14)
at Scope.ng.config.$provide.decorator.$delegate.__proto__.$destroy (<anonymous>:812:29)
at cleanupLastView (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js:832:26)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js:862:15
at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:5483:29)
at boundTranscludeFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:5595:21)
at controllersBoundTransclude (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:6189:18) 

Hey, this looks like a neat solution. while testing it out I noticed that there's no sound on Safari 7.0.6 on the interactive demo at http://mrgamer.github.io/angular-media-player/interactive.html, everything else e.g. loading bar etc. seems to work well though. I don't get any error message from the console, either. Any clue what this could be?

i do a simple example . when i call audioPlayer.play() method nothing to play i try to get information of audioPlayer by command console.log($scope.adioPlayer): i get below result.
http://imgur.com/PVSs80u

Is throttling on timeupdate (the only recurring event) really useful?

I put it in the first place to limit the Angularjs scope $applies, but it gets triggered few times per second only.
I was thinking to remove it in order to slim the library down and to not overcomplicate it further, leaving throttling to a branch

Write your opinions if you have, thanks

Not sure why but every time I go to your example page http://aap.col3.me/ I get redirected to proxy bay...

I just try by create an example
http://plnkr.co/edit/rJ0R0Uxbe9WNUnvfB6NZ?p=preview

but it doesn't work. i read the doc but i don't know where the audioPlayer object declare in the controller.

Hi all,

I'm trying to use this player to play some stuff and its mostly short material. Now i'm using an progress bar to show playback position like so:

 ng-style="{width: ((round(player.currentTime) / round(player.duration)) * 100) + '%' }"

This seems to be showing the correct progress but the thing is: player.currentTime and player.duration are only updated once every second. Which is not really what i wanted as it gives me major stuttering of playback progress.

Is there any way to speed it up a bit or am i doing something (else) wrong?
Btw, i'm using the ng-style so it also works properly in IE11

I tried http://aap.col3.me/#!/interactive-demo with my android (note3 using chrome), and it did not work.

I'm still looking for the cleanest way to expose the original HTMLMediaElement properties to the player-control variable.

Suggestions are welcome as googling 1000x hasn't produced anything of worth.

The demo doesn't work and also the plugin brakes, trying to use it in a controller.

So for my app I've got a playlist that is pulled into the app as a JSON and then the song title and artist is rendered using an ng-repeat directive. In each ng-repeat I'm creating the tag with . However, this ng-src="" doesn't work in the directive.

Any ideas on how I could possibly fix this? Otherwise been a great player.

Wow. This is a great piece of work. Much simpler than JPlayer!

I'm trying to include other items to the playlist, like track image, artiste name , etc to show during currentPlay.
[{src: "path/to/songfile.mp3", .... , img:"path/to/image", artistname:"nameofArtist"}]
so that the image and artist name is displayed in a div with the play bar below it. How do you reference the item in directives or html tags?

Console report of the bug:

Error: Failed to execute 'setAttribute' on 'Element': '$$hashKey' is not a valid attribute name.
    at Error (native)
    at http://localhost:8181/libs/angular-media-player.js:196:74
    at Object.forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:330:20)
    at Scope.playerMethods.$addSourceList (http://localhost:8181/libs/angular-media-player.js:196:19)
    at Scope.playerMethods.load (http://localhost:8181/libs/angular-media-player.js:47:16)
    at Scope.playerMethods.play (http://localhost:8181/libs/angular-media-player.js:84:23)
    at Scope.playerMethods.playPause (http://localhost:8181/libs/angular-media-player.js:107:16)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:10348:21
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:18333:17
    at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:12175:28) 

People reported this bug via email privately.

PLEASE DON'T DO THIS, it's bad for the other users, sharing issues is solving issues.

Anyway, i've tracked down the problem, angular.forEach does not hide $$variables, as i assumed

A number of the example use audio/mp3 as the mime type. This is wrong it should be audio/mpeg. If you try audio/mp3 on an android device it will not play but using audio/mpeg does work