ionic audio with HTML5

Byadmin

Dec 8, 2018

ไม่ต้องใช้ NativePlugin ก็ใช้ ความสามารถของ HTML5 เล่นเพลงได้เลย

import { Component } from '@angular/core';
import { NativeAudio } from '@ionic-native/native-audio/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})

export class HomePage {
  audio: any;
  constructor(private nativeAudio: NativeAudio) { 
   
  }

 
  ngOnInit() {
    this.audio = new Audio();
    this.audio.src = "assets/audio/Reuben_s_Train.mp3";
    this.audio.load();
  }

playAudio() { 
 this.audio.play();
   this.audio.loop = true;
}

  stopAudio() {
    this.audio.pause(); 
  }

  ngOnDestroy() {
    if(this.audio) {
      this.audio.pause();
      this.audio = null;
    }



    

    
  
  

}

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button (click)="playAudio()">
    Play Sound
  </ion-button>
  <ion-button (click)="stopAudio()">
      Stop Sound
    </ion-button>

 </ion-content>