как добавить звук в счетчик непрочитанных сообщений tabBadge при его обновлении в ionic3 - PullRequest
Новая
       7

как добавить звук в счетчик непрочитанных сообщений tabBadge при его обновлении в ionic3

0 голосов
/ 07 февраля 2019

У меня есть 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 лет.Есть ли простое решение для звука без плагина?

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Исправление редактировалось в следующем коде для включения 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
}
0 голосов
/ 10 февраля 2019

Если вы не предпочитаете использовать плагин cordova-plugin-nativeaudio, вы делаете это с помощью Web Audio API .Чтобы использовать Web Audio API , Вам не нужно никаких плагинов или дополнительных узловых модулей.Но вам нужно добавить audiocontext-polyfill.js файл JavaScript, чтобы гарантировать, что устаревшие методы API и префиксы поставщиков не будут проблемой при использовании API Web Audio в современном браузере.

  • Загрузите вышеупомянутый файл JavaScript.
  • Создайте каталог js внутри каталога src / assets / .
  • Поместите загруженный файл вкаталог src / assets / js / .
  • Создайте каталог звуки внутри каталога src / assets / и добавьте собственные дорожки 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 {}

Не забудьте 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)
  }
}

Надеюсь, это поможет вам сделать то, что вам нужно.Я создал образец проекта, связанный с этим ответом.Вы можете найти его в этом репозитории github .Любые запросы будут приняты.

...