Ionic 2 Not Playing AAC Stream Format

[kolexinfos]

I tried playing a Live Audio Stream using the following provider below. When I use an MP3 stream the app plays but on changing to AAC format stream nothing plays.

import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class RadioPlayer {
url:string;
stream:any;
promise:any;

constructor() {
this.url = “http://xxxx.zzzz.co/xxxxxx/listen”;
this.stream = new Audio(this.url);
};

play() {
this.stream.play();
this.promise = new Promise((resolve,reject) => {
this.stream.addEventListener(‘playing’, () => {
resolve(true);
});

  this.stream.addEventListener('error', () => {
    reject(false);
  });
});

return this.promise;

};

}

[mirkonasato]

This has probably more to do with the specific device you’re using that with Ionic or the Cordova plugin. Where are you testing it?

[kolexinfos]

I am testing it on both in browser with ionic serve -l and on device with ionic run android -device (on HTC 820 G+)

[mirkonasato]

@kolexinfos

this.stream = new Audio(this.url);

So you’re creating a new Audio element, and keeping it as a class property? I think you’ll need to add it to the document for it to work. Why not just use an <audio> tag in your template?

[eltonfaust]

Hello!

I had the same problem, Android devices can’t play AAC native, different from iOS, try this:

run ionic plugin add cordova-plugin-streaming --save

and update your code to:

import { Injectable } from '@angular/core';

declare var window;

@Injectable()
export class RadioPlayer {
	private url:string;

	public constructor(public platform: Platform) {
		this.url = "http://xxxx.zzzz.co/xxxxxx/listen";

		this.platform.ready().then(() => {
			if (this.platform.is('android')) {
				window.navigator.RADIO.initialize(
					() => {
						console.log('success initialized')
					}, 
					() => {
						console.log('error initialized')
					}
				);
			}
		});
	};

	public play(): void {
		if (this.platform.is('android')) {
			window.navigator.RADIO.play(
				() => {
					console.log('success playing')
				}, 
				() => {
					console.log('error playing')
				}, this.url, "", ""
			)
		}
	}

	public stop(): void {
		if (this.platform.is('android')) {
			window.navigator.RADIO.stop(
				() => {
					console.log('success stop')
				}, 
				() => {
					console.log('error stop')
				}
			);
		}
	}
}

Obs: this is a alternative for android devices, its not going to work on browser or other platforms…

Plugin repo:

mradosta/cordova-plugin-streaming

Hope i helped

[kolexinfos]

Ok I would try it and revert here shortly

[ramon]

Hi.

I do not know why, but this plugin does not work for me at all.

I’m testing it in real android (6.0) device with two streaming url’s (mp3 and aac+).

Success and error callbacks of initialize method are never fired.
Success callback of play and stop methods are always fired.

[eltonfaust]

my bad,
the first parameter from initialize is only fired on the streaming is stopped or stopped from notification,
change the code to:

...
window.navigator.RADIO.initialize(
	event => {
		console.log('event ' + event + ' fired');

		if (event == 'STOPPED') {
			// do on stopped
		} else if (event == 'STOPPED-FROM-NOTIFICATION') {
			// do on stopped from notification
		}
	}, 
	() => {
		console.log('error initialized')
	}
);
...

i’ve made some modifications on this project, removed the notification, added volume control and added a new event STARTED that is fired on stream successfuly started to play, if you want to check it out https://github.com/EltonFaust/cordova-plugin-multi-player

[ramon]

Thanks @eltonfaust!

It’s very strange but it works on android 4.4.4 device (Sony xperia T3) but not in a android 6.0 device (BQ Aquaris M10).

Have you experienced something similar?

This is my radio-player.provider.ts file:

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';

declare var window;

@Injectable()
export class RadioPlayer {
    private urlmp3: string;
    private urlaac: string;

    public constructor(public platform: Platform) {
        this.urlmp3 = "http://mydomain.streaming-pro.com:8000";
        this.urlaac ="http://mydomain.streaming-pro.com:8002";

        this.platform.ready().then(() => {
            if (this.platform.is('android') && this.platform.is('cordova')) {
                window.navigator.RADIO.initialize(
                    event => {
                        console.log('event ' + event + ' fired');

                        if (event == 'STOPPED') {
                            // do on stopped
                        } else if (event == 'STOPPED-FROM-NOTIFICATION') {
                            // do on stopped from notification
                        }
                    },
                    () => {
                        console.log('error initialized');
                    }
                );
            }
        });
    };

    public playAAC(): void {
        if (this.platform.is('android') && this.platform.is('cordova')) {
            window.navigator.RADIO.play(
                () => {
                    console.log('success playing AAC+');
                },
                () => {
                    console.log('error playing AAC+');
                }, this.urlaac, "AAC+", ""
            )
        }
    }

    public playMP3(): void {
        if (this.platform.is('android') && this.platform.is('cordova')) {
            window.navigator.RADIO.play(
                () => {
                    console.log('success playing MP3');
                },
                () => {
                    console.log('error playing MP3');
                }, this.urlmp3, "MP3", ""
            )
        }
    }

    public stop(): void {
        if (this.platform.is('android') && this.platform.is('cordova')) {
            window.navigator.RADIO.stop(
                () => {
                    console.log('success stop');
                },
                () => {
                    console.log('error stop');
                }
            );
        }
    }

}

I’ll try with your modified plugin now.

[ramon]

uuuha!! Now, working with your plugin!

[fecortez]

Try using android-targetSdkVersion" value=“21”

[wunschradio]

Hello everyone in this thread. I know its already a bit old, but now I am stucked to this problem and would be thankful if you could tell me how you do it in your recent app versions.

I build my app so far with native media. I couldn’t achieve better things with cordova-media-streaming. Both have the same problems like this:

• MP3 starts fast but pauses for 2 seconds then streams perfectly over hours
• AAC will take more than 15 seconds to load, then runs perfectly, too, but is not working on some Android devices like Android 5

How can I implement an aac decoder? I tried those streaming plugins including aac but nothing really worked better so far or could not be installed properly.

I like what I build so far but got stucked. This way the app can’t be released. I’d love to hear from you how your app is working now and if you still have these problems I do. Thank you in advance!

@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
cordova (Cordova CLI) : 8.0.0
@ionic/app-scripts : 3.1.9
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
Android SDK Tools : 26.1.1
Node : v8.11.1
npm : 5.8.0