Ionic - 使用原生組件開發提示震動+音效

官網震動插件地址：

https://ionicframework.com/docs/native/vibration/

安裝震動插件

ionic cordova plugin add cordova-plugin-vibration

npm install --save @ionic-native/vibration

 app.module.ts

import { Vibration } from '@ionic-native/vibration';


providers: [

Vibration

]

ts文件注入插件

import { Vibration } from '@ionic-native/vibration';


constructor(private vibration: Vibration) { }

然後在本地通知的方法裏面加入震動的代碼

 this.vibration.vibrate(1000);

 

 

官網原生音頻插件地址：

https://ionicframework.com/docs/native/native-audio/

安裝

ionic cordova plugin add cordova-plugin-nativeaudio

npm install --save @ionic-native/native-audio

app.module.ts 

import { NativeAudio } from '@ionic-native/native-audio';


providers: [

NativeAudio

]

ts文件注入插件

import { NativeAudio } from '@ionic-native/native-audio';


constructor(private nativeAudio: NativeAudio) { }

找一個聲音文件，然後在ts文件裏面先加載聲音

private onSuccess: any;

private onError: any;

constructor(private nativeAudio: NativeAudio) {

//uniqueId1爲音頻文件的唯一ID

//assetPath音頻資產的相對路徑或絕對URL（包括http：//）

//官網還有更多的配置，這裏只需要兩個參數就行了，後面的回調記得帶上

this.nativeAudio.preloadSimple('uniqueId1', 'assets/dd.mp3').then(this.onSuccess, this.onError);

}

然後再本地通知裏面加上聲音代碼

this.nativeAudio.play('uniqueId1').then(this.onSuccess,this.onError);

最後，調用方式封裝成工具類

public sucSound(){
    this.vibration.vibrate(300);
    this.nativeAudio.play('sucSound').then(this.onSuccess, this.onError);
  }
  public errSound(){
    this.vibration.vibrate(1000);
    this.nativeAudio.play('errSound').then(this.onSuccess, this.onError);
  }