我正在使用 Ionic 3 + Ionic Native Media + Ionic Native Music Controls，但音乐控件不起作用。单击音乐控件上的播放/暂停没有任何反应。媒体流效果很好。
当然，我已经安装了所需的所有科尔多瓦插件。
我已经使用 XCODE 9 打开了功能 ->"背景模式"中的"音频"选项。
我正在 iOS （10.3/11） 模拟器和设备以及 Android 平板电脑设备上对其进行测试。
首页.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>
首页
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
更新 - 已解决
使用最新的cordova-music-controls-plugin版本（2.1.3），这个问题得到了解决。您可以使用以下存储库进行测试： https://github.com/fdambrosio/ionic-media-controls
我有这个：
收音机.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();
}
}
提供者/无线电播放器.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;
};
}
Jus 删除functions(action) {行，它正在关闭}，它将起作用。