danielstern / ngaudio Goto Github PK

View Code? Open in Web Editor NEW

369.0 20.0 137.0 9.58 MB

Angular Directive for Playing Sounds

Home Page: http://danielstern.github.io/ngAudio/#/

License: MIT License

JavaScript 34.42% HTML 13.36% CSS 52.22%

ngaudio's Introduction

NG-AUDIO

The AngularJs Audio Module

Installation: bower install angularjs-audio

Development Instructions

Clone Git Repo
Install dependencies with npm install; bower install;
Install Gulp with npm install -g gulp;
Run dev environment with gulp;

Deployment

To deploy to gh-pages, call gulp deploy;

Total awesomeness for playing sounds. Project page here:

##AngularJs Audio Project Page ##AngularJs Audio Documentation

Release Notes v1.7.4

Updated Angular dependency to support 1.6.x

Release Notes v1.7.3

Add toFinish callback

Release Notes v1.7.2

Updated Angular dependency to support 1.5.x

Release Notes v1.7.1

Fixed #85

Release Notes v1.7.0

Add trackTime filter
Add disablePreload option
Fixed bug where performance could not be changed after sound was loaded
Updated bower file and dependencies to use Bower for development environment deps using devDependencies
Added longer song in examles
automate to github page deploy
add stuff to Readme

Release Notes v1.6.2

add hover support
update gh-pages

Release Notes v1.5.0

add playback rate supprt

Release Notes v1.4.2

add unlock boolean to disable unlocking if desired
added performance var to let user tweak performance

Release Notes v1.4.0

several bug fixes. update version numbers

Release Notes v1.3.0

fixes audio on most mobile devices

Release Notes v1.2.1

removed depencency on bootstrap, jquery and ui-router
fix 0 volume bug

Release Notes v1.2

added unbind() which improves performance but loses read functionality
reduced file size
reduced interval cycle

Release Notes v1.0

Not backwards compatible with previous version. please check out the AngularJs Audio Docs since this is pretty much completely different
for previous version check out branch v0.9

License

The MIT License Copyright (c) daniel stern, Azureda

ngaudio's People

Contributors

Stargazers

Watchers

Forkers

nishchit14 wafou abuelezz kpennell jpdean123 youngasimov lgzhang rujmah adchir bartvanremortele hainp2604 innovation16 pandafulmanda inspire2innovate howtomake nf-contribute clamstew johnsonqu perminder-klair femike gauravsarma1992 weld-io sfraszczak-neducatio jdgarvey peterjurkovic domnickprabhu adswebwork skakruk mcwebb murtaza-libs bdwain moodcat wengtad bshuzhang rtsys2020 wakashige lbyers valentinmuhr technologiespro cristoferdomingues paulppp rkingon gatodeveloper hamqin weberml2 migo zekenie pkdevbox eq4 rakeshpandey791 anonymousist powstatan punker76 jprivillaso modulexcite tdt17 rollinballworld hanss webdesignerpak cesar-garay drasya volodya7 epicokapi pramathamadhavankutty cgebe icemanbp vitas61 captainyouz prabhjotsl clshortfuse konstantinkrassmann di445 thespitefuloctopus ave- li-zixiao paulogaldo salman-samian mittalabhas1 andyskw lfollansbee trinhnguyense ir-taimal10 bfraley hasanamstech tirumalavasu lvovgeka zettacristiano solcates nitinreddy3 northmccormick lscarneiro simonemazzoni truongnht artfitdev pykey chasemcaleese delacongithub joshkopecek coolsam726 ashleshapatil

ngaudio's Issues

Uncaught TypeError: Cannot read property 'play' of undefined

Steps to reproduce:

Open the bin: http://jsbin.com/wuhita/2/edit?html,js,console,output
Click on the big "click me" and see the error pop up in the browser console.

Expected behaviour: Sound plays, no error messages.
Current behaviour: Sound plays, got error message.

Here is the bin exported to Gist (just in case...): https://gist.github.com/borisdiakur/d351a01726a17a9ce741

CTA - Made With NG-Audio

Hey guys.

We want you to share YOUR projects made with Angular Audio.js! We will be including the best projects in an upcoming "Made with Angular Audio" section of the demo page. Please share a link to the project if you would like to share it with us!

remote audio not playing

osx/chrome
using: http://www.amclassical.com/mp3/amclassical_beethoven_fur_elise.mp3
audio is not playing

mute only work one time.

I play de file then mute, then play again, and mute doesn't work anymore.

buffering audio

I have a question. How can I make progress buffering audio?

I tried this:

    $scope.play = function(src) {
        $scope.audio = ngAudio.load(src);
        console.log($scope.audio.buffered); //also i tried console.log($scope.audio.audio.buffered); but get TypeError: $scope.audio.audio is undefined

        $scope.audio.play();
    }

but it's not work

Please add a license note

This projects seems to be missing a license note. Couldn't find any in README.md, package.json, bower.json and on http://danielstern.github.io/ngAudio/#/

Uncaught TypeError: Cannot read property 'play' of undefined

The audio still starts playing, but console logs that error.
twiddle @ angular.audio.js:128

if (ngAudioGlobals.unlock) {

            window.addEventListener("click",function twiddle(){
                audio.play();
                audio.pause();
                window.removeEventListener("click",twiddle);
            });

        }

Set version for Bower

For my projects i'd like to specify what version to use and i'm currently trying to find out if this module suits my needs. But it seems there is no version tagged for the latest version so i'd have to use a * to specify.

Also a quick question: are you going to maintain this in the future? Currently i'm using angular-media-player but that doesn't really fit my needs so i'm looking for alternatives that work properly with angular.

High CPU usage with one file loaded

Hi,
when load a file in controller:

$scope.audio = ngAudio.load('audio/29b234ddf33469715b2797e209ed169d.mp3');

then chrome taking 50% of cpu no matter if it plays or not - is it proper behavior ?

same on latest firefox and chrome

ReferenceError: Can't find variable: Audio

grunt test gives the following error:

        ReferenceError: Can't find variable: Audio
            at /bower_components/ngAudio/app/angular.audio.js:44
            at /bower_components/ngAudio/app/angular.audio.js:72
            at /bower_components/angular/angular.js:11581
            at /bower_components/angular/angular.js:11714
            at /bower_components/angular/angular.js:12701
            at /bower_components/angular/angular.js:12513
            at /bower_components/angular/angular.js:12739
            at /bower_components/angular-mocks/angular-mocks.js:126
            at /bower_components/angular-mocks/angular-mocks.js:1644
            at /test/spec/controllers/ctrl.js:65

This is caused having $scope.sound= ngAudio.load('sounds/sound.mp3'); in my controller. Audio works perfect but karma tests with jasmine & phantomjs fails.

Strange error showing up in console despite everything working correctly

Hi again @danielstern! me again :( hehe this time I discovered a strange issue I can't quite put my finger on. I use ngAudio along with Toastr (check github here) so everytime a pop up message appears within my app it's accompanied with a sound and it works like a charm.

However it seems like despite working propertly, a strange error appears in the JS console in latest version of both chrome and firefox saying: "TypeError: Cannot read property 'play' of undefined > twiddle". This error doesn't affect the functionality of anything (including ngAudio) as far as I can tell and only occurs when certain type of toastr shows up (I call it a confirm message). I would like to know if anyone else has experienced anything like this error and what might cause it? When I get some more time I'll try to put a plunker together to illustrate the error. Thanks!

Versioning with git tags for bower

I ran into some problems trying to bower install specific versions.

I've forked and tagged a couple versions here for now. Could you start tagging each version as described here for bower versions? In particular, could d5a47c8 be tagged as 1.0.0?

For example, after I forked your repo, I did the following:

// Temporarily switch to a specific commit
git checkout d5a47c88fef47f4c5ae6de7ab804744df9e98b90
// Tag and comment
git tag -a 1.0.0 -m "version 1 tagging for bower"
// Push the tag into the repo
git push origin 1.0.0

Thanks! This package is awesome!

Very Huge CPU consumption

I'm very sorry to inform you that i have no word to describe the amount of CPU your library is using...
I'm pretty sure if my i7 wasn't an 8-thread CPU, it would use 100%...

So i investigated the causes of such an issue, and i found many ones.

You use a watch with a deep compare
This watch is a function
You use rootScope to watch something out of $scope... Perfectly useless since digest cycle can't be smartly triggered...
You use a very short time interval trigger (25ms.... 40Hz, even most video games can't refresh so quickly)
On each interval trigger, you deregistrate your $watch, and then, create it again... (since normal digest cycle are far slower). My GC is becoming crazy
The whole factory code is an indirect proxy to HTML Audio element methods... You store a duplicate of Audio object state, and watch, and then you apply the changes to the original element... I'm very curious: Why don't you simply call the element methods ?
The $interval is called as soon as the audio is loaded, until... the close of window. Even if my controllers are destroyed, or if the sound isn't even playing... we have a 40Hz greedy cycle.
And the best part... Every point above is for only 1 audio element... If you dare load a second one... or more (even if it's the same file), you doubles the amount of cycles... And your CPU dies.

I try to do my best to be the most friendly as i can. (edit: i'm a bit angry about this lib, i found no better way to show it than being such offensive)

NB: You shall not use angular prefix "ng" for unofficial projects. This is really recommended to avoid them in case official project tends to implement it.

README.md Lacks Pizazz

Audio playback should support playbackRate

It would be great if this library could support playbackRate.

We are creating an application for the vision impaired and a very big feature to them is to change playback rate (often much faster). While we have looked into screen readers, we are also looking down the path of customized audio interactions. We would like to use this library for accessibility features within our Angular Chrome App application.

The initial thought on implementation is:
Usage
Click me

Setters / Getters (on NgAudioObject)
.setPlaybackRate(float new_rate)
.getPlaybackRate()

Implementation
Analogous to setting and updating volume of an audio file.

Let me know all your thoughts. I will be developing this over the next few days and would love any input.

Unable to Play 3gp audio with this directive.

I have tried ngAudio but it doesn't support 3gpp.

How can Play 3gpp files in my app without asking for any plugin to download?

I Mean to say I'm able to Play mp3, wav files using native audio player.

I want to achieve same for 3gp format too.

Thanks in Advance.

Angular Dependency is fixed to 1.2.23

I'm using Angular 1.3.x, i'm sure this package is compatible with this version, but the bower.json gives an "~1.2.23" dependency that can't be suitable for my project.

Please, could you update this ?

Thanks

Add bower support

Would be nice if this library would be installable through bower. See: http://bower.io/docs/creating-packages/

Fade volume on pause()/stop()

Hi, would this be possible? With an attribute for the length?

Audio used in directive fires only one time

I have a button like this:

Do something

and the audio is played only the first time that I click the element. Then the sound is not played anymore.

I found a solution based on this post: http://stackoverflow.com/a/9842551/1738363

I simple add this line "audio.audio.load();" before "audio.audio.play();" in the ngAudio directive and it started working OK

Wrong dependency include

The file included with wiredep is <script src="bower_components/angular-audio/angular.audio.js"></script> but this file doesn't exists, can you please update your bower conf ?

Streamline way to load multiple formats

Lets say I want to load a sound, but I'm not sure which format the browser supports. Currently I do...

var nextSound = ngAudio.load("assets/audio/boxingBell.aiff");
if(!nextSound.canPlay)
      nextSound = ngAudio.load("assets/audio/boxingBell.wav");

Is that the recommended way to handle this?

Update Angular dependency

Currently ngAudio depends on angular#~1.2.23 which resolves to v1.2.28. Most up-to-date packages are up to the most recent stable version of Angular (~1.3), resolving to v1.3.15. I'm using ngAudio and Angular 1.3.15 and haven't seen any issues, but it'd be nice if it was officially supported. Also, it runs into a bunch of unnecessary console spam about angular version resolving:

Please note that,
   ngAudio#1.6.2 depends on angular#!1.2.23 which resolved to angular#1.2.28
   <a bunch of other packages> depends on angular#~1.3.8 which resolved to angular#1.3.15
Resort to using angular#1.3.15 which resolved to angular#1.3.15
Code incompatibilities may occur.

Missing "ignore" entry in bower.json

When including ngAudio from bower, the following warning is thrown:

bower ngAudio#~1.6.2 invalid-meta angular-audio is missing "ignore" entry in bower.json

While this obviously doesn't break anything, it'd be easy to include an empty ignore entry to avoid the warning being thrown. Should only take a minute to fix it!

can't change progress/reset audio

When using .wav file, progress change and stop()/restart() functions not working.

How to lazy load / handle many files

Hi,

Thanks for this nice add on to angular! I am making a live band booking app, and I need an overview page with a lot of sound samples for different acts. That means a lot of audio players.

I would like a toggle player, (either play or pause symbol), and so I need to be able to know whether a sound is playing or paused. I have this set up and working but in a costly way:
I am using a service to fetch an array of sounds (src strings) and attaching an ngAudio.load(srcString) to each entry. This causes heavy loading time (making the list and the loads in resolve, ui-router) and sometimes it just throws an error for each file, maybe because it times out or whatever.

I would rather use the directive in an ng-repeat, maybe even not load sounds before click, but I have two problems, as I see it:

Can't load {variables} in the directive, only hardcoded strings
- Maybe solve this by using $sce.trustAsResourceUrl(srcString) ?
Can't get playing/paused status from the directive
- I checked out the code, but I am unsure of the difference between audio.audio.play(); and the $timeout function. How and where to put the playing/paused check?

Can you steer me in the right direction? Loading all the files right away seems laggy and bad practice.

Duplicated audio objects when moving between controllers

I've been trying to implement a quick audio stream with ngAudio. I've got a webapp with a couple views and each view has their own controller, views are swapped using ui-router.

My Controller looks like this:

.controller('StreamCtrl', function($scope, ngAudio) {
    stream = ngAudio.load("EXTERNAL_MP3_FILE.mp3");

    $scope.streamPlayPause = function(){
        if (!stream.paused){
            stream.pause();
        }
        else{
            stream.play();
        }
    };
};

There's a button that calls streamPlayPause onClick, in effect toggling the stream from playing/paused. However, this code breaks for some reason when I click away from that tab and move into another view.

When you navigate away, the stream continues to play (as I would have expected, this is desired), but when you navigate back to the stream "tab" and click the button once more it seems to spawn another ngAudio object and plays it rather than simply toggling the one that already exists and it plays both at once. The second one is now controllable, however the previously created one is not and will play forever until the page is refreshed...

Any ideas on how I'd get it to target the original ngAudio object as opposed to creating a new one? Is this a bug or a feature?

Bower install also installs ui.router

UI router is not necessary, just used for demo

"Sound error"

Using the demo and randomly hitting buttons, a "sound error" is easy to generate on the console. It is also generated in my implementation. Breaking on error, I dump the following:

I found this on the internet regarding the issue:
http://stackoverflow.com/questions/23350483/the-elements-readystate-is-have-nothing

Wondering if there is a workaround for this.

Thank you for the wonderful software!
John

Pause on window click

I noticed there is a window event listener on click, which plays then pauses audio...

I have no idea why you added this kind of behaviour.
Why would you pause audio on window click ?

I'm playing an alarm sound, but any click on the page just stop the alarm... quite annoying.

Audiofile loaded plays 'window.click' event in Firefox

I've noticed that if I load a file in my scope like so:

$scope.beep = ngAudio.load('../myfile.wav')

This method is fired when I click anywhere in the window, obviously, and it doesn't happened again as the listener is removed -

Doesn't seem to happened in Chrome, Safari, etc. Not sure way as window.addEventListener should be universal?

I'm not using the directive methods, so I'm just going to comment it out.

        window.addEventListener("click",function twiddle(){
            audio.play();
            audio.pause();
            window.removeEventListener("click",twiddle);
        });

cyobackwardscompat: CYO 2.0 not Compatible with 1.0; Can Be

It's pretty much possible to make CYO 2.0 backwards compatible with 1.0 (as in, can load files asynchronously).

It would basically go with a "cleverness" strategy where it will first try to grab a hard-coded chapter and then attempt to load that chapter from a descending list of common chapter folder names names (story, chapters, pages).

Also a service should be added for customizing this file structure.

firefox won't play .wav files

Hi, I am working on an angular project where i need to play some of the .wav files, I used ngAudio for this. Chrome works fine but firefox will keep throwing errors like,

Media resource /sounds/timer.wav could not be decoded.

It may not be an issue with ngAudio but with the .wav file or with firefox, but just posting this if anybody has any idea how to fix this?

Another error with using ngAudio in firefox is,

Error: An attempt was made to use an object that is not, or is no longer, usable

when it ajaxes the audio file and tries to play.

Looping

Loops dont work properly in IE9.
Solution:
Line 245: if ($looping && audioObject.currentTime === audioObject.duration) {

Should be:
Line 245: if ($looping && audioObject.currentTime >= audioObject.duration) {

Fixxes looping problems for me.

Loop not working with dynamically loaded sound

I'm loading and playing a sound file inside my controller:
$rootScope.music= ngAudio.load('audio/music.mp3')
$rootScope.music.volume = 0.3
$rootScope.music.loop = true
$rootScope.music.play()
It invariably only plays once. The directive method is working. Please advise.

Could you help to create tag for newest version?

I want to use your package through smart.json, with newest version. But it seems that you only have version 1.2 tagged. Thanks.

Remove bootstrap dependency from bower.json

I've been having some minor issues running grunt tasks in the project I'm currently working on since ngAudio has a bootstrap dependency ("bootstrap": "~3.2.0") in it's bower.json, however I actually use bootstrap-sass-official (v 3.3.0).

This is more of a suggestion. I'm not entirely sure this applies to everybody or if bootstrap's really needed/used by ngAudio (from what I've checked on your "angular.audio.js" it isn't really used at all) but I'd like for your amazing module to be less dependant on other packages. If you don't need it for core features, leave it up to the people using ngAudio to decide which CSS framework/variation to use.

Thanks and great work! ^^

Not working on Android

Running Chrome 37. I have ngAudio working on the desktop. On mobile I get nothing. I see the same result on your demo page. Any idea what is going on?

Edit: Looks like this is a Chrome feature . . .
https://code.google.com/p/chromium/issues/detail?id=178297

Add support for angular expression evaluation

Hi, your directive attributes dont work the "angular" way. It would be expected to be able to do this:

But all of these regular use cases are not supported. Your directive also doesnt allow the translate directive in the same node.

Do you expect to fix these issues? I would love to test your updates. Tnx in advance.

_ is not defined

Every time I tray to play an audio with the directive, I end up getting this error:

angular.js:9383

Bug When Sound Volume set to 0

Seems to think 0 means 1.

Temporary workaround: Set sound volume to 0.001

Is a mouseover event directive of interest?

Thanks for a great framework!

I have need for mouseover sounds in my app, is that of interest for ngAudio? If so, how would you like it implemented - separate directive, or on ng-audio with some extra property?

Also, what is the purpose of the clickPlay property on the directive?

CurrentTime error: The element's readyState is HAVE_NOTHING

I'm getting the following error:

Error: Failed to set the 'currentTime' property on 'HTMLMediaElement': The element's readyState is HAVE_NOTHING.
    at Error (native)
    at http://localhost:8000/vendor/angular-audio/angular.audio.js:219:39
    at Array.wrappedProgressback (http://localhost:8000/vendor/angular/angular.js:11590:88)
    at http://localhost:8000/vendor/angular/angular.js:11558:28
    at Scope.$eval (http://localhost:8000/vendor/angular/angular.js:12701:28)
    at Scope.$digest (http://localhost:8000/vendor/angular/angular.js:12513:31)
    at Scope.$apply (http://localhost:8000/vendor/angular/angular.js:12805:24)
    at tick (http://localhost:8000/vendor/angular/angular.js:9047:36)

I'm guessing the currentTime isn't ready to set yet if the object hasn't been created (or is in the process).

I've gotten it when i click a few files to play fast (so it needs to spawn a new item).
I'm currently not able to submit a new pull but i guess it isn't hard to fix.

As a sidenote: i've been able to implement this in my project and it seems to be just my thing. This bug only throws an error to console but isn't breaking anything big. After a while the file just starts to play and is using correct CurrentTime.

Need a simple way to execute code when audio is playing and ended

We were using angular-media-player which exposes properties like player.playing and player.ended so that we could setup a $scope.$watch execute some code when that happened. Using ngAudio I tried similarly to setup a watch on audio.progress but it didn't work. Suggestions?

feature: clever extension busting

Basically, ngAudio ought to simplify the process of selecting the correct kind of file to load for your browser.

Upon load, ngAudio should determine what kind of sound files are playable in the browser.

Whenever a sound is loaded, ngAudio should split the string and check its extension. If the extension is invalid, it should throw a warning, and then try to fall back by recasting the sound with a different extension in case the user has included these fallbacks in the same directory.

If no soudn is playable, error should throw.

Audio wont play on Chrome/Firefox for Android when loaded via scope.

I have set up the a function to use ngAudio.load to load a remote mp3 into an audio object, it the immediately uses ausio.play to start playing the file.

This function is fired when the user selects a file from an ng-repeat using a ng-click event.

This works fine across all of the desktop browsers I have tried, (Chrome, Firefox and IE on Windows 8.1 and Safari / Chrome on OSX)

I have used remote debugging and can see that all of the details within the audio object are fine, but the player seems to pause itself and will not "unpause", i can see on the network tab that around 200b of the mp3 file is downloaded and is then stopped.

The official demo of ngAudio works fine and I have been able to use ng-audio in the tags and this does work, but there is no way to control the playback with this method, right?

Unfortunately i have not yet been able to test on mobile safari or any browser in iOS.

Audio looping

Hi,

I was wondering if it would be possible to create a way to loop audio after starting. In my case loop it x amount of times. I am interested in incorporating this into the directive and service myself but don't really know where to start.

Thanks.

Sound plays twice on click

Hi,

I have a piece of code that goes like this:

<button ng-audio="audio/alert.mp3">
    Test
</button>

When I click the Test button, alert.mp3 gets played twice instead of once.

I have looked through the code in angular.audio.js, and I found these lines:

$element.on('click', function() {
    if ($scope.clickPlay === false) {
        return;
    }
    audio.audio.play();

    audio.volume = $scope.volume || audio.volume;
    audio.loop = $scope.loop;
    audio.currentTime = $scope.start || 0;
    $timeout(function() {
        audio.play();
    }, 5);
});

When I comment out audio.audio.play(), the sound plays only once as expected, and the same behaviour occurs if I comment out the $timeout section, but leave audio.audio.play() uncommented.

Is it normal behaviour for the alert to be played twice by default, or am I missing something?

sound plays even after stopping

I use the following code to play a sound.

   var playWarning;

    $scope.startPlayWarning = function() {
        // Don't start play if we are already playing
        if ( angular.isDefined(playWarning) ) return;

        ngAudio.play(appConfig.mp3_warning);

        playWarning = $interval(
            function() {
                ngAudio.play(appConfig.mp3_warning);
            },
            10000
        );
    };

    $scope.stopPlayWarning = function() {
        if (angular.isDefined(playWarning)) {
            ngAudio.stop(appConfig.mp3_warning);
            $interval.cancel(playWarning);
            playWarning = undefined;
        }
    };

    // Some code ...
    $scope.startPlayWarning();

But after scope destroy the melody continues to play

    $scope.$on("$destroy", function() {       
        $scope.stopPlayWarning();
    });

Fix Unlock Function's Unexpected Behaviours

Here: https://github.com/danielstern/ngAudio/blob/master/app/angular.audio.js#L101

A global event handler for the click event installed with the result that:

After loading an audio-file and playing it, the first click anywhere in the window stops playback
Sometimes, audio in the event handler becomes undefined, the click handler then causes errors. I have not been able to determine the exact circumstances for this.

Is this some kind of mistake? If not, how can prevent global click events from pausing the playback?