Use external class in AngularJs controller

Question

I don't quite follow how to inject external constructors, I have this constructor:

function myAudio(url){
    var song = new Audio();
    song.crossOrigin = "anonymous";
    song.src = url;
    var source  = context.createMediaElementSource(song);
    source.connect(context.destination);

    this.play = function(){
        source.mediaElement.play();
    } 

}

outside, just with Javascript it works ok. I can create objects using var myVar = new myAudio("some_url")

I want to use that constructor inside an AngularJS controller but I just can't figure out how to do it.

I tried declaring it in the controller without success

app.controller("myAppCtrl", myMainFunction);
myMainFunction.$inject = ["$interval", "myAudio"];
function myMainFunction($interval, myAudio) {
   scope = this;
   //my controller stuff
}

Tried to make it return an object but I didn't find the correct way to do it.

I don't know what I am missing...

You register it as a service first.

a better oliver
– a better oliver

2016-04-16 20:34:16 +00:00
Commented Apr 16, 2016 at 20:34 — a better oliver
– a better oliver, Commented Apr 16, 2016 at 20:34

finico · Accepted Answer · 2016-04-16 20:46:14Z

3

something like that

app.factory('MyAudio', function() {
    function MyAudio(url){
        var song = new Audio();
        song.crossOrigin = "anonymous";
        song.src = url;

        this.source = context.createMediaElementSource(song);
        this.source.connect(context.destination);
    }

    MyAudio.prototype.play = function(){
        this.source.mediaElement.play();
    };

    return MyAudio;
});

app.controller("myAppCtrl", myMainFunction);
myMainFunction.$inject = ["$interval", "MyAudio"];
function myMainFunction($interval, MyAudio) {
    this.myAudio = new MyAudio('/some/url.mp3');
    this.myAudio.play();
    // controller stuff
}

answered Apr 16, 2016 at 20:46

finico

7117 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

distante Over a year ago

Thanks it worked, I just need to be sure that I delete the object every time I need to change the URL

Community · Accepted Answer · 2017-05-23 11:45:22Z

0

Register your class as a service like you have registered your controller.

app.service("myAudio", myAudio);

A good sum up about services and injection: https://stackoverflow.com/a/17944367/652669

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Apr 16, 2016 at 20:44

GG.

22k14 gold badges93 silver badges133 bronze badges

Comments

Aditya Singh · Accepted Answer · 2016-04-16 20:49:00Z

0

A service is a singleton created by angular using a constructor definition (similar to myAudio). In order to inject the singleton service, you need to tell angular to instantiate it by using below definition:

app.service("myAudio", myAudio);

function myAudio(url){
  var song = new Audio();
  song.crossOrigin = "anonymous";
  song.src = url;
  var source  = context.createMediaElementSource(song);
  source.connect(context.destination);

  this.play = function(){
      source.mediaElement.play();
  } 

}

Then you can inject it in your controller or other services. Refer https://docs.angularjs.org/guide/services for more details

answered Apr 16, 2016 at 20:49

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

1 Comment

finico Over a year ago

service returns a singleton and "url" will injected by DI and throws an exception

Collectives™ on Stack Overflow

Use external class in AngularJs controller

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related