Ionic Music Controls funktioniert nicht | Ionic 3 + Ionic Native Media + Ionic Native Music Kontrollen

Question

Ich verwende Ionic Native Music + Ionic Native Music Controls, aber die Musiksteuerung funktioniert nicht. Wenn Sie auf Music Controls auf Wiedergabe/Pause klicken, geschieht nichts. Medienstreaming funktioniert gut.

Ich habe alle erforderlichen cordova Plugins installiert.

Ich habe auf der 'Audio' Option in Capabilities geschaltet -> 'Hintergrund Modes' mit XCODE 9.

Ich teste es auf iOS (10,3/11) Simulator und Gerät und auf Android-Tablet Gerät.

Home.html

<ion-content padding> 
    <!-- Bind the click event to a method --> 
<button ion-button (click)="play()"> 
    play file! 
</button> 
<button ion-button (click)="pause()"> 
    pause file! 
</button> 
</ion-content> 

Home.ts

import { Component } from '@angular/core'; 
    import { NavController } from 'ionic-angular'; 
    import { Media, MediaObject } from '@ionic-native/media'; 
    import { MusicControls } from '@ionic-native/music-controls'; 

    @Component({ 
     selector: 'page-home', 
     templateUrl: 'home.html' 
    })  
    export class HomePage { 
      file: MediaObject; 
      constructor(private musicControls: MusicControls, private media: Media, public navCtrl: NavController) { 
      } 
      play(){ 
      this.file = this.media.create('https://archive.org/download/db2007-05-20.rm.flac16/db2007-05-20d1t01.mp3'); 
      this.file.play(); 

      this.musicControls.destroy(); // it's the same with or without the destroy 
      this.musicControls.create({ 
       track  : 'Test track',  // optional, default : '' 
       artist  : 'test artist',      // optional, default : '' 
       cover  : '',  // optional, default : nothing 
       // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app) 
       //   or a remote url ('http://...', 'https://...', 'ftp://...') 
       isPlaying : true,       // optional, default : true 
       dismissable : true,       // optional, default : false 

       // hide previous/next/close buttons: 
       hasPrev : false,  // show previous button, optional, default: true 
       hasNext : false,  // show next button, optional, default: true 
       hasClose : true,  // show close button, optional, default: false 

      // iOS only, optional 
       album  : 'test album',  // optional, default: '' 
       duration : 0, // optional, default: 0 
       elapsed : 0, // optional, default: 0 
       hasSkipForward : true, // show skip forward button, optional, default: false 
       hasSkipBackward : true, // show skip backward button, optional, default: false 
       skipForwardInterval: 15, // display number for skip forward, optional, default: 0 
       skipBackwardInterval: 15, // display number for skip backward, optional, default: 0 

       // Android only, optional 
       // text displayed in the status bar when the notification (and the ticker) are updated 
       ticker : 'Now playing test' 
      }); 
      this.musicControls.subscribe().subscribe(action => { 
       function events(action) { 
        console.log('action', action); 
        const message = JSON.parse(action).message; 

         switch(message) { 
          case 'music-controls-next': 
           // Do something 
           break; 
          case 'music-controls-previous': 
           // Do something 
           break; 
          case 'music-controls-pause': 
           // Do something 
           console.log('musc pause'); 
           this.pause(); 
           break; 
          case 'music-controls-play': 
           // Do something 
           console.log('music play'); 
           this.play(); 
           break; 
          case 'music-controls-destroy': 
           // Do something 
           break; 
          // External controls (iOS only) 
          case 'music-controls-toggle-play-pause' : 
          // Do something 
          break; 
          case 'music-controls-seek-to': 
          // Do something 
          break; 
          case 'music-controls-skip-forward': 
          // Do something 
          break; 
          case 'music-controls-skip-backward': 
          // Do something 
          break; 

          // Headset events (Android only) 
          // All media button events are listed below 
          case 'music-controls-media-button' : 
           // Do something 
           break; 
          case 'music-controls-headset-unplugged': 
           // Do something 
           break; 
          case 'music-controls-headset-plugged': 
           // Do something 
           break; 

          default: 
           break; 
         } 
        } 

       this.musicControls.listen(); // activates the observable above 
       this.musicControls.updateIsPlaying(true); 

      }); 
     } 

      pause(){ 
      this.file.pause(); 
      } 
     } 

ich eine minimale Ionen leere App aus ionischen Starter erstellt haben, mit Media Play (Werke) und Musik-Steuerelemente (nicht funktioniert) , dann ist es auf github zum Testen zur Verfügung:

https://github.com/fdambrosio/ionic-media-controls

Ionic Info: 

    @ionic/cli-utils : 1.12.0 
    ionic (Ionic CLI) : 3.12.0 

global packages: 

    cordova (Cordova CLI) : 7.0.1 

local packages: 

    @ionic/app-scripts : 3.0.0 
    Cordova Platforms : ios 4.5.1 
    Ionic Framework : ionic-angular 3.7.1 

System: 

    ios-deploy : 1.9.2 
    ios-sim : 6.1.2 
    Node  : v6.11.2 
    npm  : 5.4.2 
    OS   : macOS Sierra 
    Xcode  : Xcode 9.0 Build version 9A235 

UPDATE - GELÖST

Mit neuesten cordova-Musik-Kontrollen-Plugin-Version (2.1.3) diese Probleme gelöst sind. Sie können es auf diese Repo mit Test: https://github.com/fdambrosio/ionic-media-controls

Answer 1

ich dieses:

radio.ts

import { Component } from '@angular/core'; 
import { IonicPage, LoadingController, AlertController, Platform } from 'ionic-angular'; 
import { MusicControls } from '@ionic-native/music-controls'; 
import { RadioPlayer } from '../../providers/radio-player/radio-player'; 

@IonicPage() 
@Component({ 
    selector: 'page-radio', 
    templateUrl: 'radio.html', 
}) 
export class RadioPage { 

    public playing: boolean = false; 
    private loadingPopup: any; 
    public icono: string = 'play'; 
    radio = { 
    title: "UFM Radio", 
    description: "UFPSOcaña", 
    url: "http://ufm.ufpso.edu.co:8000/ufm.ogg", 
    image: "assets/radioUFM.png" 
    }; 

    constructor(
    private platform: Platform, 
    private musicControls: MusicControls, 
    public loadingCtrl: LoadingController, 
    public alertCtrl: AlertController, 
    public myplayer: RadioPlayer, 
) { 

    if (this.myplayer.stream) { 
     this.eventPlay(true); 
    } 
    if (this.platform.is('cordova')) { 
     this.myplayer.createNotificationMusic(); // Crear el controlador de musica 
     this.musicControls.listen();    // activates the observable above 
     this.musicControls.subscribe().subscribe(action => { 
     this.eventos(action)      // Notificacion 
     }); 
    } 

    } 

    reproductor() { 
    (this.playing) ? this.pause() : this.play(); // De acuerdo al estado activa o no la musica 
    } 

    play() { 
    this.loadingPopup = this.loadingCtrl.create({  // Crea el cargando 
     spinner: 'dots', 
     content: '' 
    }); 
    this.loadingPopup.present(); 

    this.myplayer.play(this.radio.url).then(() => { 
     this.eventPlay(true);        /* Coloca el icono y el estado */ 
     this.loadingPopup.dismiss();      // Quitar Cargando 
     if (this.platform.is('cordova')) { 
     this.musicControls.updateIsPlaying(true);  // Actualiza el icono de la barra de navegacion 
     } 
    }).catch(error => { 
     this.presentAlert("Error msg= " + error + "<br>Radio url = " + this.radio.url); 
     this.pause(); 
     this.eventPlay(false); 
     this.loadingPopup.dismiss(); 
    }); 

    } 

    public eventPlay(valor) { 
    this.icono = (valor) ? 'pause' : 'play'; 
    this.playing = valor; 
    } 

    eventos(action) { 
    const message = JSON.parse(action).message; 
    switch (message) { 
     case 'music-controls-pause': 
     this.myplayer.pause(); 
     this.musicControls.updateIsPlaying(false); 
     this.eventPlay(false); 
     break; 
     case 'music-controls-play': 
     this.myplayer.play(this.radio.url).then(() => { 
      this.musicControls.updateIsPlaying(true); 
      this.eventPlay(true); 
     }).catch(error => { 
      this.presentAlert("Error msg= " + error + "<br>Radio url = " + this.radio.url); 
      this.pause(); 
      this.eventPlay(false); 
     }); 
     break; 
     case 'music-controls-destroy': 
     this.myplayer.pause(); 
     // Do something 
     break; 
     case 'music-controls-toggle-play-pause': 
     // Do something 
     break; 
     case 'music-controls-seek-to': 
     // Do something 
     break; 
     case 'music-controls-media-button': 
     // Do something 
     break; 
     case 'music-controls-headset-unplugged': 
     // Do something 
     break; 
     case 'music-controls-headset-plugged': 
     // Do something 
     break; 
     default: 
     break; 
    } 
    } 

    pause() { 
    this.eventPlay(false); 
    if (this.platform.is('cordova')) { 
     this.musicControls.updateIsPlaying(false); 
    } 
    this.myplayer.pause(); 
    } 

    presentAlert(title) { 
    let alert = this.alertCtrl.create({ 
     title: title, 
     buttons: ['OK'] 
    }); 
    alert.present(); 
    } 


} 

Anbieter/Radio-player.ts

import { MusicControls } from '@ionic-native/music-controls'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class RadioPlayer { 

    public stream: any; 
    promise: any; 
    radio = { 
     title: "UFM Radio", 
     description: "UFPSOcaña", 
     url: "http://ufm.ufpso.edu.co:8000/ufm.ogg", 
     image: "assets/radioUFM.png" 
    }; 

    constructor(private musicControls: MusicControls) { }; 

    createNotificationMusic() { 
     return this.musicControls.create({ 
      track: this.radio.description, 
      artist: this.radio.title, 
      cover: this.radio.image, 
      isPlaying: false, 
      dismissable: false, 
      hasPrev: false, 
      hasNext: false, 
      hasSkipForward: false, 
      hasSkipBackward: false, 
      skipForwardInterval: 0, 
      skipBackwardInterval: 0, 
      hasClose: true, 
      album: '', 
      duration: 0, 
      elapsed: 0, 
      ticker: 'Ahora estas escuchando la' + this.radio.title 
     }); 
    } 

    play(url) { 
     if (this.stream == null) { 
      this.stream = new Audio(url); 
      this.stream.play(); 
      this.stream.volume = 1; 
     } 

     this.promise = new Promise((resolve, reject) => { 
      this.stream.addEventListener('playing',() => { 
       resolve(true); 
      }); 
      this.stream.addEventListener('error',() => { 
       reject(false); 
      }); 
     }); 
     return this.promise; 
    }; 

    pause() { 
     this.stream.pause(); 
     this.stream = null; 
    }; 




} 

Answer 2

Jus entfernen Sie die functions(action) { Linie und es schließt } und es wird funktionieren.