Ionic framework 如何在ionic3中更新tabBadge未读邮件计数时向其添加声音_Ionic Framework_Ionic2_Ionic3

Ionic framework 如何在ionic3中更新tabBadge未读邮件计数时向其添加声音

ionic-framework ionic2

Ionic framework 如何在ionic3中更新tabBadge未读邮件计数时向其添加声音,ionic-framework,ionic2,ionic3,Ionic Framework,Ionic2,Ionic3,我有一个tabBadge可以统计新的未读邮件 tabs.html <ion-tab [root]="messages" tabTitle="Messages" tabIcon="chatboxes" tabBadgeStyle="danger" tabBadge="{{getUnreadMessagesCount()}}"></ion-tab> 制表符 computeUnreadMessagesCount() { this.unreadMessagesCount

我有一个tabBadge可以统计新的未读邮件

tabs.html

<ion-tab [root]="messages" tabTitle="Messages" tabIcon="chatboxes" tabBadgeStyle="danger" tabBadge="{{getUnreadMessagesCount()}}"></ion-tab>

制表符

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

computeUnreadMessagesCount（）{
this.unreadMessagesCount=0；
if（本会话列表）{
对于（var i=0；i0）{
返回此.unreadMessagesCount；
}
}
返回null；
}

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

如果你不喜欢使用

cordova plugin nativeaudio

插件，你可以使用它。要使用，您不需要任何插件或其他节点模块。但您需要添加JavaScript文件，以确保在现代浏览器中使用Web音频API时，不推荐的API方法和供应商前缀不会成为问题

下载上述JavaScript文件
在src/assets/目录中创建一个js目录
将下载的文件放入src/assets/js/目录
在src/assets/目录中创建一个sounds目录，并在其中添加您自己的MP3曲目（在我的例子中是beep.MP3）

导入以下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>

ionic generate provider audio

import { AudioProvider } from '../providers/audio/audio';

@NgModule({
  ...
  providers: [
    ...
    AudioProvider
  ]
})
export class AppModule {}

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

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

将AudioProvider
添加到app.module.ts
文件中的providers数组。
<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>

ionic generate provider audio

import { AudioProvider } from '../providers/audio/audio';

@NgModule({
  ...
  providers: [
    ...
    AudioProvider
  ]
})
export class AppModule {}

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

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

不要忘记将导入HttpClientModule
到app.module.ts
文件。

import { HttpClientModule } from '@angular/common/http';

@NgModule({

  imports: [
    ...
    HttpClientModule
  ]
})
export class AppModule {}

更改您的音频提供商，如下所示。

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

ionic generate provider audio

import { AudioProvider } from '../providers/audio/audio';

@NgModule({
  ...
  providers: [
    ...
    AudioProvider
  ]
})
export class AppModule {}

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

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

现在您可以使用AudioProvider
播放来自以下任何组件的音频。
<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>

ionic generate provider audio

import { AudioProvider } from '../providers/audio/audio';

@NgModule({
  ...
  providers: [
    ...
    AudioProvider
  ]
})
export class AppModule {}

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

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

希望这能帮助你做你需要的事情。我已经创建了与此答案相关的示例项目。你可以在。任何查询都将被接受。
修复程序正在编辑以下代码以包括此。insertSound（）；进入this.unreadMessagesCount（第5行）。如前一个答案所述，插入它会使insertSound（）方法在循环中运行，从而冻结应用程序
<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>

ionic generate provider audio

import { AudioProvider } from '../providers/audio/audio';

@NgModule({
  ...
  providers: [
    ...
    AudioProvider
  ]
})
export class AppModule {}

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

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

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
}

computeUnreadMessagesCount（）{
this.unreadMessagesCount=0；
if（本会话列表）{
对于（var i=0；i
尝试按编写的方式使用此选项。嘟嘟声持续播放并使应用程序崩溃。您是否尝试了我的git hub项目？我只在浏览器中测试了git hub中的示例应用程序。现在我在设备中测试。它也在工作。从GitHub克隆项目并尝试运行它，然后根据您的需求进行更改。如果有任何问题，请告诉我如何使用insertSound（）
函数听到声音。它只是将文本打印到控制台。这不是你在问题中所问的答案。