Not Able to Get Player Working with Ionic 3.6.0

[gopalaiahvinay]

Hi,

I am trying to integrate the music player, but not able to get it working. Below is the code:

html:

<!--
  Generated template for the Listen2ExpertsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="primary">
    <ion-title>Listen To Experts</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-list>
    <audio-track #audio *ngFor="let audio of myTracks" [track]="audio">
      <ion-item>
        <ion-thumbnail item-left>
          <img src="{{audio.art}}">
          <audio-track-play dark [audioTrack]="audio">
            <ion-spinner></ion-spinner>
          </audio-track-play>
        </ion-thumbnail>
        <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>
    </audio-track>
  </ion-list>
</ion-content>

Component Module:

import { NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Listen2ExpertsPage } from './listen2-experts';

@NgModule({
  declarations: [
    Listen2ExpertsPage,
  ],
  imports: [
    IonicPageModule.forChild(Listen2ExpertsPage),
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class Listen2ExpertsPageModule {}

Component:

import { Component, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AudioProvider, IAudioTrack, ITrackConstraint } from 'ionic-audio';
/**
 * Generated class for the Listen2ExpertsPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-listen2-experts',
  templateUrl: 'listen2-experts.html',
})
export class Listen2ExpertsPage {
  myTracks: ITrackConstraint[];

  constructor(public navCtrl: NavController) {
    this.myTracks = [{
      src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t12-MP3-V0.mp3',
      artist: 'John Mayer',
      title: 'Why Georgia',
      art: 'https://res.cloudinary.com/il9m/image/upload/v1502800992/il9mSmallLogoWhite_soaqfr.png',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
    },
    {
      src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t30-MP3-V0.mp3',
      artist: 'John Mayer',
      title: 'Who Says',
      art: 'https://res.cloudinary.com/il9m/image/upload/v1502800992/il9mSmallLogoWhite_soaqfr.png',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track,  set to 'none' to turn off
    },

    {
      src: 'https://archive.org/download/swrembel2010-03-07.tlm170.flac16/swrembel2010-03-07s1t05.mp3',
      artist: 'Stephane Wrembel',
      title: 'Stephane Wrembel Live',
      art: 'https://res.cloudinary.com/il9m/image/upload/v1502800992/il9mSmallLogoWhite_soaqfr.png',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track,  set to 'none' to turn off
    }];
  }

}

app.module.ts

// import { VimeoPipe } from './../pipes/vimeo/vimeo';
import { Http, HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Keyboard } from '@ionic-native/keyboard';
import { StreamingMedia } from '@ionic-native/streaming-media';
import { IonicAudioModule, WebAudioProvider, CordovaMediaProvider, defaultAudioProviderFactory } from 'ionic-audio';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthenticationProvider } from '../providers/authentication/authentication';
import { ConfigProvider } from '../providers/config/config';
import { UtilitiesProvider } from '../providers/utilities/utilities';
import { DiscussionProvider } from '../providers/discussion/discussion';
import { ArticlesProvider } from '../providers/articles/articles';
import { SubscriptionProvider } from '../providers/subscription/subscription';

import { MediaProvider } from '../providers/media/media';

export function myCustomAudioProviderFactory() {
  return (window.hasOwnProperty('cordova')) ? new CordovaMediaProvider() : new WebAudioProvider();
}

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false }),
    IonicAudioModule.forRoot(defaultAudioProviderFactory)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    AuthenticationProvider,
    ConfigProvider,
    UtilitiesProvider,
    DiscussionProvider,
    Keyboard,
    ArticlesProvider,
    SubscriptionProvider
  ]
})
export class AppModule { }

Below is the screenshot of the result:

Let me know what is going wrong.

[arielfaur]

Are there are any errors logged in the console?

[gopalaiahvinay]

Well there are no errors, I used to get errors saying something in the lines tracks is not recognized property. But after I included

schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]

Errors disappeared.

[gopalaiahvinay]

@arielfaur Any update regarding this issue?

[arielfaur]

Try to remove NO_ERRORS_SCHEMA and see what errors are logged to the console.

[gopalaiahvinay]

After removing all schemas:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'track' since it isn't a known property of 'audio-track'.
1. If 'audio-track' is an Angular component and it has 'track' input, then verify that it is part of this module.
2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <ion-list>

    <audio-track #audio *ngFor="let track of myTracks" [ERROR ->][track]="track">

      <ion-item>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@34:55
Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-play'.
1. If 'audio-track-play' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
2. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
          <img src="{{audio.art}}">

          <audio-track-play dark [ERROR ->][audioTrack]="audio">

            <ion-spinner></ion-spinner>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@42:33
'audio-track-play' is not a known element:
1. If 'audio-track-play' is an Angular component, then verify that it is part of this module.
2. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
          <img src="{{audio.art}}">

          [ERROR ->]<audio-track-play dark [audioTrack]="audio">

            <ion-spinner></ion-spinner>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@42:10
Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-progress-bar'.
1. If 'audio-track-progress-bar' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
2. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rong> &#x26AC; <em>{{audio.artist}}</em></p>

          <audio-track-progress-bar duration progress [ERROR ->][audioTrack]="audio"></audio-track-progress-bar>

          <!-- <em style="font-size:.5em">Track ID:"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@54:54
'audio-track-progress-bar' is not a known element:
1. If 'audio-track-progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
          <p><strong>{{audio.title}}</strong> &#x26AC; <em>{{audio.artist}}</em></p>

          [ERROR ->]<audio-track-progress-bar duration progress [audioTrack]="audio"></audio-track-progress-bar>

       "): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@54:10
'audio-track' is not a known element:
1. If 'audio-track' is an Angular component, then verify that it is part of this module.
2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <ion-list>

    [ERROR ->]<audio-track #audio *ngFor="let track of myTracks" [track]="track">

      <ion-item>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@34:4
Error: Template parse errors:
Can't bind to 'track' since it isn't a known property of 'audio-track'.
1. If 'audio-track' is an Angular component and it has 'track' input, then verify that it is part of this module.
2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <ion-list>

    <audio-track #audio *ngFor="let track of myTracks" [ERROR ->][track]="track">

      <ion-item>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@34:55
Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-play'.
1. If 'audio-track-play' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
2. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
          <img src="{{audio.art}}">

          <audio-track-play dark [ERROR ->][audioTrack]="audio">

            <ion-spinner></ion-spinner>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@42:33
'audio-track-play' is not a known element:
1. If 'audio-track-play' is an Angular component, then verify that it is part of this module.
2. If 'audio-track-play' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
          <img src="{{audio.art}}">

          [ERROR ->]<audio-track-play dark [audioTrack]="audio">

            <ion-spinner></ion-spinner>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@42:10
Can't bind to 'audioTrack' since it isn't a known property of 'audio-track-progress-bar'.
1. If 'audio-track-progress-bar' is an Angular component and it has 'audioTrack' input, then verify that it is part of this module.
2. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rong> &#x26AC; <em>{{audio.artist}}</em></p>

          <audio-track-progress-bar duration progress [ERROR ->][audioTrack]="audio"></audio-track-progress-bar>

          <!-- <em style="font-size:.5em">Track ID:"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@54:54
'audio-track-progress-bar' is not a known element:
1. If 'audio-track-progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'audio-track-progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
          <p><strong>{{audio.title}}</strong> &#x26AC; <em>{{audio.artist}}</em></p>

          [ERROR ->]<audio-track-progress-bar duration progress [audioTrack]="audio"></audio-track-progress-bar>

       "): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@54:10
'audio-track' is not a known element:
1. If 'audio-track' is an Angular component, then verify that it is part of this module.
2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <ion-list>

    [ERROR ->]<audio-track #audio *ngFor="let track of myTracks" [track]="track">

      <ion-item>
"): ng:///Listen2ExpertsPageModule/Listen2ExpertsPage.html@34:4
    at syntaxError (http://localhost:8100/build/vendor.js:96485:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:106976:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:120727:39)
    at http://localhost:8100/build/vendor.js:120651:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:120651:19)
    at createResult (http://localhost:8100/build/vendor.js:120536:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at syntaxError (http://localhost:8100/build/vendor.js:96485:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:106976:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:120727:39)
    at http://localhost:8100/build/vendor.js:120651:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:120651:19)
    at createResult (http://localhost:8100/build/vendor.js:120536:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
    at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:49982:16)
    at NavControllerBase._failed (http://localhost:8100/build/vendor.js:49970:14)
    at http://localhost:8100/build/vendor.js:50025:59
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4508:37)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076

[arielfaur]

I meant removing NO_ERRORS_SCHEMA only 😃

[gopalaiahvinay]

There is no error if I remove only NO_ERRORS_SCHEMA, but the result is the same as before.

[gopalaiahvinay]

If you have any demo of implementation for Ionic 3.5+, point me to that demo, I will try replicating that.

[arielfaur]

Yes, the demo project which has also a live demo: https://github.com/arielfaur/ionic-audio-demo You could try to clone the project and build to see if you have the same issues.

[gopalaiahvinay]

@arielfaur I had to remove lazy loading to get it working. With lazy loading it was throwing the errors of track not valid property.

[arielfaur]

I never tried lazy loading so I don't know how it plays with this. But I read about it and apparently it only requires changes to the pages.

[gopalaiahvinay]

Well the issue was having another ngModule declaration for each page. So importing and declaring makes it a bit confusing.

[gopalaiahvinay]

@arielfaur it works fine on android, but on ios when I press play, the audio is not starting. But the play button toggles from 'Play' icon to 'Pause' icon. And the start and end time, also does not appear. Any idea why?

[arielfaur]

I really don't know as I never tried with lazy loading

[satish22]

@arielfaur - Getting error while running the example into a sample project PF code snippet.

App Module -

`import { IonicAudioModule, WebAudioProvider, CordovaMediaProvider, defaultAudioProviderFactory } from 'ionic-audio';

@NgModule({ declarations: [ MyApp ], imports: [ HttpModule, BrowserModule, IonicModule.forRoot(MyApp), SuperTabsModule.forRoot(), IonicAudioModule.forRoot(defaultAudioProviderFactory)
],`

`Configuration

@ionic/cli-utils : 1.13.0 ionic (Ionic CLI) : 3.13.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : browser 4.1.0
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 26.0.1
Node              : v6.11.2
npm               : 5.3.0
OS                : Windows 10

Misc:

backend : legacy`

[Moudicat]

I find a solution (lazy loading):

just import IonicAudioModule to xxx.module.ts where you using audio plugins.

import { IonicAudioModule, defaultAudioProviderFactory } from 'ionic-audio';

@NgModule({
  declarations: [
    DebugPage,
  ],
  imports: [
    IonicPageModule.forChild(MyMusicPageModule),
    IonicAudioModule.forRoot(defaultAudioProviderFactory)
  ],
  exports: [
    DebugPage,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyMusicPageModule {}  // not AppModule

[Vajidbaba]

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'track' since it isn't a known property of 'audio-track'.

1. If 'audio-track' is an Angular component and it has 'track' input, then verify that it is part of this module.
2. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("color="light"> --> <audio-track #audioTrack [ERROR ->][track]="currentTrack" [autoplay]="true" (onFinish)="onTrackFinished($event)"> <div style=""): ng:///AudioPageModule/AudioPage.html@94:33 Can't bind to 'autoplay' since it isn't a known property of 'audio-track'.
4. If 'audio-track' is an Angular component and it has 'autoplay' input, then verify that it is part of this module.
5. If 'audio-track' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
6. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("rack-progress-bar> -->

some one help

[vinaygiri]

I find a solution (lazy loading):

just import IonicAudioModule to xxx.module.ts where you using audio plugins.

import { IonicAudioModule, defaultAudioProviderFactory } from 'ionic-audio';

@NgModule({
  declarations: [
    DebugPage,
  ],
  imports: [
    IonicPageModule.forChild(MyMusicPageModule),
    IonicAudioModule.forRoot(defaultAudioProviderFactory)
  ],
  exports: [
    DebugPage,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MyMusicPageModule {}  // not AppModule

This solved my issue