我有一个统计新的未读消息的tabBadge。
这是BS。 HTML
<ion-tab [root]="messages" tabTitle="Messages" tabIcon="chatboxes" tabBadgeStyle="danger" tabBadge="{{getUnreadMessagesCount()}}"></ion-tab>
tabs.ts
computeUnreadMessagesCount() {
this.unreadMessagesCount = 0;
if (this.conversationList) {
for (var i = 0; i < this.conversationList.length; i++) {
this.unreadMessagesCount += this.conversationList[i].messages.length - this.conversationsInfo[i].messagesRead;
if (this.unreadMessagesCount == 0) {
this.unreadMessagesCount = null;
}
}
}
}
getUnreadMessagesCount() {
if (this.unreadMessagesCount) {
if (this.unreadMessagesCount > 0) {
return this.unreadMessagesCount;
}
}
return null;
}
我想这样做是插入一短声或蜂鸣每当未读邮件数增加。我宁愿不使用科尔多瓦 - 插件 - nativeaudio，因为这还没有2年更新一次。有一个简单的解决方案，以一个声音无需插件？
如果你不喜欢使用cordova-plugin-nativeaudio插件，你使用Web Audio API做到这一点。要使用Web Audio API，你不需要任何插件或者额外的节点模块。但是，你需要添加audiocontext-polyfill.js JavaScript文件，以确保使用最新的浏览器中通过Web Audio API时不推荐使用的API方法和供应商前缀将不再是一个问题。
在src / index.html作为以下文件中Import audiocontext-polyfill.js文件。
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="assets/js/audiocontext-polyfill.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
创建用于管理的音频API功能的服务。
ionic generate provider audio
添加AudioProvider到供应商阵列app.module.ts文件。
import { AudioProvider } from '../providers/audio/audio';
@NgModule({
...
providers: [
...
AudioProvider
]
})
export class AppModule {}
不要忘了import HttpClientModule到app.module.ts文件。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
...
HttpClientModule
]
})
export class AppModule {}
如下更改AudioProvider。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
declare const AudioContext;
declare const webkitAudioContext;
@Injectable()
export class AudioProvider {
private TRACK: any = null;
private AUDIO: any;
private SOURCE: any;
private CONTEXT: any = new (AudioContext || webkitAudioContext)();
private GAIN: any = null;
constructor(public http: HttpClient) {}
loadSound(track: string): void {
this.http.get(track, { responseType: "arraybuffer" })
.subscribe((arrayBufferContent: any) => {
this.setUpAudio(arrayBufferContent);
});
}
setUpAudio(bufferedContent: any): void {
this.CONTEXT.decodeAudioData(bufferedContent, (buffer: any) => {
this.AUDIO = buffer;
this.TRACK = this.AUDIO;
this.playSound(this.TRACK);
});
}
playSound(track: any): void {
if (!this.CONTEXT.createGain) {
this.CONTEXT.createGain = this.CONTEXT.createGainNode;
}
this.GAIN = this.CONTEXT.createGain();
this.SOURCE = this.CONTEXT.createBufferSource();
this.SOURCE.buffer = track;
this.SOURCE.connect(this.GAIN);
this.GAIN.connect(this.CONTEXT.destination);
this.SOURCE.start(0);
}
stopSound(): void {
if (!this.SOURCE.stop) {
this.SOURCE.stop = this.SOURCE.noteOff;
}
this.SOURCE.stop(0);
}
}
现在你可以使用AudioProvider从您的任何组件播放音频如下。
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
track: string = 'assets/sounds/beep.mp3';
constructor(private audio: AudioProvider) {}
getUnreadMessagesCount() {
if (this.unreadMessagesCount) {
if (this.unreadMessagesCount > 0) {
this.playSound();
return this.unreadMessagesCount;
}
}
return null;
}
playSound() {
this.audio.loadSound(this.track)
}
}
希望这将帮助你做你的需要。我创建了与此相关的答案示例项目。你可以在this github repo找到它。如有任何疑问将被接受。
的修复被编辑到下面的代码来包括this.insertSound（）;入this.unreadMessagesCount（第5行）。插入它在之前回答说，使得该方法insertSound（）在一个循环冻结应用程序运行。
computeUnreadMessagesCount() {
this.unreadMessagesCount = 0;
if (this.conversationList) {
for (var i = 0; i < this.conversationList.length; i++) {
this.unreadMessagesCount += this.conversationList[i].messages.length - this.conversationsInfo[i].messagesRead, this.insertSound();
if (this.unreadMessagesCount == 0) {
this.unreadMessagesCount = null;
}
}
}
}
insertSound() {
console.log('sound inserted');
// some sound method here
}