我有一个 tabBadge 可以计算新的未读消息。
tabs.html
<ion-tab [root]="messages" tabTitle="Messages" tabIcon="chatboxes" tabBadgeStyle="danger" tabBadge="{{getUnreadMessagesCount()}}"></ion-tab>
选项卡.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-plugin-nativeaudio，因为它在 2 年内没有更新。没有插件的声音有简单的解决方案吗？
最佳答案
如果您不喜欢使用 cordova-plugin-nativeaudio插件你使用 Web Audio API .使用 Web Audio API , 你不需要任何插件或额外的节点模块。但是你需要添加audiocontext-polyfill.js JavaScript 文件，以确保在现代浏览器中使用 Web Audio API 时不推荐使用的 API 方法和供应商前缀不会成为问题。
Import src/index.html 文件中的 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 上找到它.任何查询都将被接受。
关于ionic-framework - 如何在 ionic3 中更新时向 tabBadge 未读消息计数添加声音，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54562803/