如何在ionic3中更新tabBadge未读消息计数时添加声音

我有一个tabBadge，用于统计新的未读消息。

tabs.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;
}

我想做的是，每当未读邮件计数增加时，插入一个简短的声音或嘟嘟声。我宁愿不使用cordova插件nativeeaudio，因为它已经两年没有更新了。有没有一个简单的解决方案，一个没有插件的声音？

如果您不喜欢使用cordova-plugin-nativeaudio插件，请使用Web Audio API。要使用Web Audio API，您不需要任何插件或额外的节点模块。但您需要添加audiocontext-polyfill.js JavaScript文件，以确保在现代浏览器中使用WebAudio API时，不推荐使用的API方法和供应商前缀不会成为问题。

下载上面提到的JavaScript文件
在src/assets/目录中创建一个js目录
将下载的文件放入src/assets/js/目录
在src/assets/目录中创建一个sounds目录，并在其中添加您自己的MP3曲目(在我的情况下是beep.MP3)

src/index.html文件中的Import音频上下文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 {}

不要忘记importHttpClientModule到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)
}
}

希望这能帮助你做你需要的事情。我已经创建了与这个答案相关的示例项目。你可以在这个github回购中找到它。任何查询都将被接受

修复程序正在编辑以下代码以包含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
}

相关内容

最新更新

热门标签：