วันพฤหัสบดีที่ 19 เมษายน พ.ศ. 2561

เล่น 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     จะมีปุ่มขึ้นทดลองกด




 


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

 เล่น  MP3 โดยใช้ Angular 5 ยังไง ใช้ Howler สิ 1. สร้าง Project angular  มา 1 Project    2. เปิด https://www.npmjs.com/pa...