sound.ts

import {BasePage} from "../../shared/BasePage";
import {topmost} from "ui/frame";
import {Observable, EventData} from "data/observable";
import {View} from "ui/core/view";
import { knownFolders, File } from 'file-system';
import * as fs from 'file-system';
import * as app from 'application';
import * as color from 'color';
import * as platform from 'platform';
import * as dialogs from 'ui/dialogs';
import { SnackBar } from 'nativescript-snackbar';
import { TNSRecorder, TNSPlayer, AudioPlayerOptions, AudioRecorderOptions } from 'nativescript-audio';

let vm = new Observable({ blackBackground: false });
class SettingsPage extends BasePage {    
    mainContentLoaded(args:EventData){
        let view = <View>args.object;
        view.bindingContext = vm;
    }

    /***** AUDIO PLAYER *****/
  public isPlaying: boolean;
  public isRecording: boolean;
  public recordedAudioFile: string;
  private recorder;
  private player;
  private audioSessionId;
  private page;
  private audioUrls: Array<any> = [
    { name: 'Fight Club', pic: '~/pics/canoe_girl.jpeg', url: 'http://www.noiseaddicts.com/samples_1w72b820/2514.mp3' },
    { name: 'To The Bat Cave!!!', pic: '~/pics/bears.jpeg', url: 'http://www.noiseaddicts.com/samples_1w72b820/17.mp3' },
    { name: 'Marlon Brando', pic: '~/pics/northern_lights.jpeg', url: 'http://www.noiseaddicts.com/samples_1w72b820/47.mp3' }
  ];
  private meterInterval: any;
  private _SnackBar: SnackBar;

  constructor() {
    super();

    this.player = new TNSPlayer();
    this.recorder = new TNSRecorder();
    this._SnackBar = new SnackBar();
  }    
    
    public playAudio(filepath: string, fileType: string) {
    

    try {
      var playerOptions = {
        audioFile: filepath,

        completeCallback: () => {
          this._SnackBar.simple("Audio file complete");

          this.player.dispose().then(() => {
            this.isPlaying = false;
            console.log('DISPOSED');
          }, (err) => {
            console.log('ERROR disposePlayer: ' + err);
          });
        },

        errorCallback: (errorObject) => {
          this._SnackBar.simple('Error occurred during playback.');
          console.log(JSON.stringify(errorObject));
          this.isPlaying = false;
        },

        infoCallback: (info) => {
          console.log(JSON.stringify(info));

          dialogs.alert('Info callback: ' + info.msg);
          console.log(JSON.stringify(info));
        }
      };

      this.isPlaying = true;

      if (fileType === 'localFile') {
        this.player.playFromFile(playerOptions).then(() => {
          this.isPlaying = true;
        }, (err) => {
          console.log(err);
          this.isPlaying = false;
        });
      } else if (fileType === 'remoteFile') {
        this.player.playFromUrl(playerOptions).then(() => {
          this.isPlaying = true;
        }, (err) => {
          console.log(err);
          this.isPlaying = false;
        });
      }
    } catch (ex) {
      console.log(ex);
    }

  }


  /**
   * PLAY REMOTE AUDIO FILE
   */
  public playRemoteFile(args) {
    console.log('playRemoteFile');
    
    var filepath = 'http://www.noiseaddicts.com/samples_1w72b820/2514.mp3';

    this.playAudio(filepath, 'remoteFile');

  }


  public resumePlayer() {
    console.log(JSON.stringify(this.player));
    this.player.resume();
  }

  /**
   * PLAY LOCAL AUDIO FILE from app folder
   */
  public playLocalFile(args) {
    var filepath = '../../audio/angel.mp3';
    console.log("Yes i'm getting there")
    this.playAudio(filepath, 'localFile');

  }






  /**
   * PAUSE PLAYING
   */
  public pauseAudio(args) {
    this.player.pause().then(() => {
      this.isPlaying = false;
    }, (err) => {
      console.log(err);
      this.isPlaying = true;
    });
  }





  public stopPlaying(args) {
    this.player.dispose().then(() => {
      this._SnackBar.simple("Media Player Disposed");
    }, (err) => {
      console.log(err);
    });
  }


  /**
   * RESUME PLAYING
   */
  public resumePlaying(args) {
    console.log('START');
    this.player.start();
  }

  private platformExtension() {
    //'mp3'
    return `${app.android ? 'm4a' : 'caf'}`;
  }
}

    
export = new SettingsPage();

sound.xml

<page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:widgets="shared/widgets"
  loaded="loaded">

  <page.actionBar>
    <action-bar title="Sound">
      <navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
      <action-bar.actionItems>
        <ios>
          <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <drawer:rad-side-drawer id="drawer">
    <drawer:rad-side-drawer.mainContent>

      <!-- Account page contents -->
      <stack-layout loaded="mainContentLoaded">
        <ScrollView>
          <StackLayout>

            <button class="btn btn-primary btn-rounded-sm" text="Play Remote Audio" tap="playRemoteFile" />
            <label class="blue center" text="Welcome To Fight Club!" textWrap="true" />
            <label text="REMINDER: Remote files can have a lag before playing due to processing and network speeds." class="h3" textWrap="true" />
            <button class="btn btn-primary btn-rounded-sm" text="Play Local File" tap="playLocalFile" />
            <label class="blue h3 text-center" text="Angel - Theory of a Deadman" textWrap="true" />
            <Button class="btn btn-primary btn-rounded-sm" text="Pause" tap="pauseAudio" />
            <Button class="btn btn-primary btn-rounded-sm" text="Resume" tap="resumePlayer" />
            <button class="btn btn-primary btn-rounded-sm" text="Stop" tap="stopPlaying" />
          </StackLayout>
        </ScrollView>
      
      </stack-layout>
    </drawer:rad-side-drawer.mainContent>
    <drawer:rad-side-drawer.drawerContent>
      <widgets:drawer-content />
    </drawer:rad-side-drawer.drawerContent>
  </drawer:rad-side-drawer>

</page>