New ionic-audio plugin for ionic

Hi everyone!

I have rewritten the ionic-audio plugin for ionic/angular 2. I’d love to hear from the community as I am in the process of finalizing the API and could use some feedback here or any suggestions you may have.
Here are some of the features:

  • Platform independent: it works in the browser and on Android/iOS. If cordova-plugin-media is added to the project, the plugin will use it as the underlying audio provider, otherwise it defaults to HTML5 audio.
  • API: a set of components and providers to control audio playback from the component’s view and controller.

DEMO
More info here

About the demo: I haven’t been able to set up a proper codepen. I’ve found it really challenging to have a typescript project work within a codepen, plunker or similar. So I had to resort to publishing the compiled version of the project.

8 Likes

Thank you Mr. Arielf.
This plugin is really great and highly loved due to its awesome results.

I’ve tried with prefix “sudo”, but failed too.
Thanks a lot.

Only, that I’m getting " npm ERR! cb( ) never called! "image

Hmmm, i am not sure what’s going on. But that seems to be an error related to your NPM setup

Damn cool! :slight_smile:

With the latest Ionic 2 beta 11 the usage documentation on your website didn’t work. As far as i remember, i had to change

ionicBootstrap(MyApp, [provide(AudioProvider,  { useFactory: AudioProvider.factory })], {});

to

ionicBootstrap(MyApp, [{provide: AudioProvider, useFactory: AudioProvider.factory}], {});

Can you comprehend this?

@MartiMcFlight I have just updated the built in demo to beta 11 and I didn’t need to change the bootstrapping method. Did you see any errors?

Ah okay, i think i found the problem. I missed the following line of code (which isn’t bold :wink: ) in your documentation:

import {Type, provide} from '@angular/core';

When i add it, your ionicBootstrap() arguments work. But now i’m wondering, why it works as well without this line of code when i change the ionicBootstrap() arguments?

1 Like

@arielf i just noticed that the „Add components to views“ section in your documentation (http://arielfaur.github.io/ionic-audio/2.0/index.html) is somehow wrong. When i take this code, the attributes like audio.title and audio.artist will not be shown and the progress-bar is not working. But the code in your demo is working fine!

What do you mean exactly? What did you change in order for it to work?

In the docu is written:

<ion-item>  
  …
  <p><strong>{{audio.title}}</strong> ⚬ <em>{{audio.artist}}</em></p>
  <audio-track-progress-bar dark duration progress [audioTrack]="audio" [ngStyle]="{visibility: audio.completed > 0 ? 'visible' : 'hidden'}"></audio-track-progress-bar>
</ion-item>

but this doesn’t work. Instead it has to be like in the demo project:

<ion-item>
    …
    <div item-content style="width:100%">
      <p><strong>{{audio.title}}</strong> &#x26AC; <em>{{audio.artist}}</em></p>
      <audio-track-progress-bar duration progress [audioTrack]="audio"></audio-track-progress-bar>
      <em style="font-size:.5em">Track ID: {{audio.id}}</em>
    </div>
  </ion-item>

I’m not sure but i assume this is caused by [ngStyle]="{visibility: audio.completed > 0 ? 'visible' : 'hidden'}"

1 Like

Does it work for Windows platform?

Never tried on Windows yet!

I’ll take a look then. I’ll let you know if there’s any issues.

Hey @arielf, can you already say which changes are necessary to get your ionic-audio plugin working with Ionic 2 RC0 ?

1 Like

Not yet. I am currently traveling and didn’t find the time to go over it, sorry! I will try my best in the upcoming days.

1 Like

Don’t hurry, enjoy your travelling :slight_smile:

Can I try the forum’s patience with some more novice questions? My Ionic framework is 2.0.0-rc1 on windows. The demo of this plugin works perfectly. Does that answer the questions above - about windows and rc0?

However having got it the demo to run, I am completely baffled as to how I should install it in a new project built from “ionic start” in the CLI. The file/folder structures are completely different, no app.module.ts etc. Is this the question arielf hopes to go over on his return from holidays? (and I’m in no hurry - enjoy your hols :-)). If anyone else can help me I’d be very grateful.

Finally, what I hope to achieve is playing an mp3 stored with my project. The player will stop when a second mp3 is loaded to play. In the demo multiple audio streams play and I can’t work out how to stop the first one once the second one is started. I can’t find any other threads on audio in Ionic 2 and would appreciate any hints.

Can you, @arielf, give us an outlook when you think you can have a look about it? I would like to use your plugin in an Ionic 2 RC.1 project. Otherwise i’ll have to search about a different solution…

@MartiMcFlight I think I will manage to look at it sometime next week when I am back from my long trip :slight_smile:

2 Likes

Hi, I added some code inside ionic-audio-track-component.ts to stop playing audio, before start another one.
Inside play() add as first line

if(this._audioProvider.current != undefined){
        this._audioProvider.pause(this._audioProvider.current);
        this._audioProvider.current = undefined;
    }

It is working perfectly for both ios and android.
I will create pull request for this @arielf.

Thanks heaps! Puts me one step closer.