Ionic - Cordova Native Audio

ปลั๊กอินนี้ใช้สำหรับเพิ่มเสียงเนทีฟให้กับแอพ Ionic

การใช้เสียงเนทีฟ

เพื่อให้สามารถใช้ปลั๊กอินนี้ได้เราต้องติดตั้งก่อน เปิดหน้าต่างพรอมต์คำสั่งและเพิ่มปลั๊กอิน Cordova

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

ก่อนที่เราจะเริ่มใช้ปลั๊กอินนี้เราจะต้องมีไฟล์เสียง เพื่อความเรียบง่ายเราจะบันทึกไฟล์click.mp3 ไฟล์ภายในไฟล์ js โฟลเดอร์ แต่คุณสามารถวางไว้ที่ใดก็ได้ที่คุณต้องการ

ขั้นตอนต่อไปคือการโหลดไฟล์เสียงไว้ล่วงหน้า มีสองทางเลือกให้เลือก ได้แก่ -

• preloadSimple - ใช้สำหรับเสียงธรรมดาที่จะเล่นครั้งเดียว

• preloadComplex - สำหรับเสียงที่จะเล่นเป็นเสียงวนซ้ำหรือเสียงพื้นหลัง

เพิ่มรหัสต่อไปนี้ในคอนโทรลเลอร์ของคุณเพื่อโหลดไฟล์เสียงล่วงหน้า เราต้องแน่ใจว่าได้โหลดแพลตฟอร์ม Ionic ก่อนจึงจะสามารถโหลดไฟล์เสียงล่วงหน้าได้

รหัสคอนโทรลเลอร์

$ionicPlatform.ready(function() {
   $cordovaNativeAudio
   .preloadSimple('click', 'js/click.mp3')
	
   .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.log(error);
   });

   $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
	.then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

ในคอนโทรลเลอร์เดียวกันเราจะเพิ่มโค้ดสำหรับเล่นเสียง ของเรา$timeout ฟังก์ชันจะหยุดและยกเลิกการโหลดเสียงที่วนซ้ำหลังจากผ่านไปห้าวินาที

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click');
};

$scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click');

   $timeout(function () {
      $cordovaNativeAudio.stop('click');
      $cordovaNativeAudio.unload('click');
   }, 5000);
}

สิ่งสุดท้ายที่เราต้องการคือการสร้างปุ่มสำหรับเล่นและวนซ้ำเสียง

รหัส HTML

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

เมื่อเราแตะที่ปุ่มเล่นเราจะได้ยินเสียงหนึ่งครั้งและเมื่อเราแตะที่ปุ่มลูปเสียงจะวนเป็นเวลาห้าวินาทีแล้วหยุด ปลั๊กอินนี้ใช้งานได้กับโปรแกรมจำลองหรืออุปกรณ์เคลื่อนที่เท่านั้น