2017-10-09 210 views
2

我使用離子3 +離子原生媒體+離子原生音樂控制但音樂控制不起作用。點擊Play/Pause on Music Controls沒有任何事情發生。媒體串流效果很好。離子音樂控制不起作用|離子3 +離子原生媒體+離子原生音樂控制

我已經安裝了當然需要的所有cordova插件。

我在能力ON '音頻' 選項切換 - > '背景模式' 使用XCODE 9.

我在iOS(10.3/11)模擬器和設備,並在Android平板測試它設備。

的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(); 
      } 
     } 

我創建從離子起動最小離子空白的應用程序,與媒體播放(作品)和音樂控制(沒有工作) ,它可以在GitHub上進行測試:

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 

更新 - 解決

隨着最新的科爾多瓦 - 音樂控制插件版本(2.1.3)這個問題都解決了。 https://github.com/fdambrosio/ionic-media-controls

+0

我測試了很多插件版本,它只能在iOS上使用1.4.1。 我用這個環境: [email protected] ionic-native/[email protected] [email protected] 播放/暫停是可以點擊的作品,但預先顯示/ hasNext按鈕始終顯示在iOS 11上。 – Francesco

回答

0

我有這樣的:你可以使用此回購測試

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(); 
    } 


} 

提供商/無線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; 
    }; 




} 
+0

感謝Julio,您使用的是什麼插件版本?這些按鈕可以使用iOS11設備進行點擊? – Francesco

+0

我使用的是2.0.0版,我還沒有在IOS上測試過,問候! –

+0

現在這個問題已解決2.1.3 cordova-music-controls-plugin版本。謝謝 – Francesco

0

物權法去除functions(action) {線它正在關閉},它會工作。