New ionic-audio plugin for ionic


#1

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.


#2

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! "


#3

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


#4

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?


#5

@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?


#6

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?


#7

@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!


#8

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


#9

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'}"


#10

Does it work for Windows platform?


#11

Never tried on Windows yet!


#12

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


#13

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


#14

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.


#15

Don’t hurry, enjoy your travelling :slight_smile:


#16

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.


#17

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…


#18

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


#19

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.


#20

Thanks heaps! Puts me one step closer.