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

Question

我有一个 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-plugin-nativeaudio，因为它已经 2 年没有更新了。没有插件的声音有没有简单的解决方案？

Answer 1

如果您不喜欢使用 cordova-plugin-nativeaudio 插件，您可以使用 Web Audio API. To use Web Audio API, You do not need any plugins or additional node modules. But you need to add audiocontext-polyfill.js JavaScript 文件来确保已弃用的 API 方法和供应商前缀不会成为在现代浏览器中使用网络音频 API 时出现问题。

下载上述 JavaScript 文件。
在src/assets/目录下创建一个js目录。
将下载的文件放入src/assets/js/目录
在src/assets/目录中创建一个sounds目录并添加你自己的MP3曲目（在我的例子中是beep.mp3) 到那里。

Import audiocontext-polyfill.js 文件在 src/index.html 文件中，如下所示。

<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)
  }
}

希望这能帮助您完成所需的工作。我已经创建了与此答案相关的示例项目。您可以在 this github repo 找到它。将接受任何查询。

Answer 2

修复是编辑以下代码以包含 this.insertSound()；进入 this.unreadMessagesCount（第 5 行）。如前一个答案所述插入它会使方法 insertSound() 运行进入一个循环，从而冻结 App.

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
}

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

how do I add a sound to a tabBadge unread message count when it updates in ionic3

ionic-framework

ionic2

ionic3