เล่น MP3 โดยใช้ Angular 5

 เล่น  MP3 โดยใช้ Angular 5 ยังไง ใช้ Howler สิ

1. สร้าง Project angular  มา 1 Project

 

 2. เปิด https://www.npmjs.com/package/howler  เราจะใช้ Howler ในการจัดการ MP3

3. ติดตั้ง package howler กันเลย  ใช้คำสั่ง   #     npm install @types/howler
4. แก้ไข File app/src/app.component.ts
     เพิ่ม Code  import { Howl } from  'howler';  




 5. เพิ่ม Function   playSound() เข้ามาใน  app/src/app.component.ts
    ดูตาม Document ของ Howler จะมี Function และ Property ต่างๆ 

export class AppComponent {

title = 'app';

playSound(){

var sound = new Howl({

src: [

'http://www.noiseaddicts.com/samples_1w72b820/274.mp3',

],

autoplay: true,

volume: 1,

});

sound.play();

}

}

6. แก้ไขไฟล์  app.component.html เพิ่มปุ่ม 

<button (click)="playSound()"> Play Sound</button>

7. Run command  : ng serve 
8. เปิด http://localhost:4200     จะมีปุ่มขึ้นทดลองกด