How to share a WebAudio's AudioContext to all pages in Ionic2

I want need to use Web Audio API in an app and I can not find the way to share a reusable AudioContext between all my Pages.

I searched about how to share data between pages and I found this link, it works for share data but when I put it an new AudioContext() I am just able to play a sound the first time I go into a Page and create a OscillatorNode, after that It does not show an error but just do not sound does not matter how many OscillatorNodes are there, the only way is to create a new AudioContext() what is really a bad idea.

I am sure I am doing something completely wrong because I also can not see the audio nodes in Firefox Audio Web debugger.

I have created my provider

export class WebAudioApiService {

 private _AudioContext: AudioContext;
 private _MainGainNode: GainNode;

constructor() {
    this._AudioContext = new AudioContext();
    this._MainGainNode = this._AudioContext.createGain();
    this._MainGainNode.gain.value = 0.5;
    console.log("WebAudioApiService Constructor Done");

    // this does sound:
    var osct = this._AudioContext.createOscillator();
    osctemp.frequency.value = 500;

PlayOscillator(hz: number){

//This does not sound
    var osct = this._AudioContext.createOscillator();
    osct.frequency.value = hz;
    console.log("playing: "+hz);


I import it in app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';

import {WebAudioApiService} from './services/WebAudioApiService';

  templateUrl: 'app.html',
  providers: [WebAudioApiService]

export class MyApp {
  rootPage = TabsPage;
  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

and I call it from my Page Class

import { Component, Injectable, Inject } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import {WebAudioApiService} from '../../app/services/WebAudioApiService'
Generated class for the oscillator page.

See for more info on
Ionic pages and navigation.
    selector: 'page-oscillator',
    templateUrl: 'oscillator.html'

export class oscillatorPage {
    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public webAudioApiService: WebAudioApiService,
                ) {
        this.AppConfig = config;
        this.WebAudioApiService = webAudioApiService;


    ionViewDidLoad() {
        console.log('ionViewDidLoad oscillatorPage');


The first time I go into my Page, WebAudioApiService run his constructor and it sounds, later when I call playSine() -> this.WebAudioApiService.PlayOscillator(hz) I do not get any error but also I do not get any sound.

I have banged my head for the last three days and I can not find the reason. Does anyone knows what I have to do?