۲۸
فروردین

جلسه ۲۱ : آموزش کار با پلاگین Media در کوردوا

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته کار با پلاگین InAppBrowser را آموختیم. در این جلسه آموزش کار با پلاگین Media در کوردوا را به شما ارائه خواهیم کرد.

آموزش کار با پلاگین Media در کوردوا

در آموزش کار با پلاگین Media در کوردوا شما را با پلاگین Media آشنا می کنیم.
از این پلاگین برای ضبط و پخش صدای صوتی در برنامه های Cordova استفاده می شود.
در ادامه نصب، اجرا و به کارگیری این پلاگین را می آموزیم.

مرحله ۱ – نصب پلاگین Media

برای نصب پلاگین Media باید دستور زیر را در پنجره command prompt اجرا کنید.

مثال :

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

1	C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

مرحله ۲ – اضافه کردن دکمه ها

در این آموزیم که چطور با سادگی پخش صدای صوتی را ایجاد نماییم.
بگذارید دکمه هایی که به آن نیاز داریم را در index.html بسازیم.

مثال :

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

<button id = "pauseAudio">PAUSE</button>

<button id = "volumeUp">VOLUME UP</button>

<button id = "volumeDown">VOLUME DOWN</button>

مرحله ۳ – اضافه کردن Event Listeners

حالا لازم است که event listeners را برای دکمه هایمان در تابع onDeviceReady درون index.js ایجاد نماییم.

مثال :

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

document.getElementById("playAudio").addEventListener("click", playAudio);

document.getElementById("pauseAudio").addEventListener("click", pauseAudio);

document.getElementById("stopAudio").addEventListener("click", stopAudio);

document.getElementById("volumeUp").addEventListener("click", volumeUp);

document.getElementById("volumeDown").addEventListener("click", volumeDown);

مرحله ۴A – ایجاد تابع Play

اولین تابعی را که ایجاد می نماییم؛ تابع playAudio است.
myMedia را بیرون از تابع تعریف می کنیم زیرا قرار است بعداً از آن در توابع دیگری استفاده کنیم. (pause, stop, volumeUp و volumeDown).
این کد در درون قایل index.js جایگذاری می شود.

مثال :

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

var myMedia = null;

function playAudio() {

var src = "/android_asset/www/audio/piano.mp3";

if(myMedia === null) {

myMedia = new Media(src, onSuccess, onError);

function onSuccess() {

console.log("playAudio Success");

}

function onError(error) {

console.log("playAudio Error: " + error.code);

}

myMedia.play();

}

با کلیک بر روی دکمه PLAY نوای پیانو از مسیر src اجرا می شود.

مرحله ۴B – توابع Pause و Stop

توابع بعدی که به آن ها نیاز داریم توابع pauseAudio و stopAudio هستند.

مثال :

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop(); 
   }
   myMedia = null;
}

function pauseAudio() {

if(myMedia) {

myMedia.pause();

}

function stopAudio() {

if(myMedia) {

myMedia.stop();

}

myMedia = null;

}

مرحله ۴C – تابع Volume

برای تنظیم volume نخست باید آن از روش setVolume استفاده کرد.
این روش از مقادیر ۰ تا ۱ به عنوان پارامتر استفاده می شود.
ما مقدار را بر روی ۰٫۵ تنظیم می نماییم.

مثال :

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

var volumeValue = 0.5;

function volumeUp() {

if(myMedia && volumeValue < 1) {

myMedia.setVolume(volumeValue += 0.1);

}

function volumeDown() {

if(myMedia && volumeValue > 0) {

myMedia.setVolume(volumeValue -= 0.1);

}

با فشردن VOLUME UP یا VOLUME DOWN می توان مقدار volume را به ۰٫۱ تغییر داد.
در جدول زیر می توانید سایر روش هایی که این پلاگین فراهم می آورد ببینید.

شماره روش	روش و جزئیات آن
۱	getCurrentPosition این روش موقعیت فعلی یک صوت را برمی گرداند.
۲	getDuration این روش طول مدت یک صوت را باز می گرداند.
۳	play برای شروع یا بازخوانی صدا استفاده می شود.
۴	pause برای ایجاد مکث در هنگام پخش صدا مورد استفاده قرار می گیرد.
۵	release منابع صوتی سیستم عامل را منتشر می کند.
۶	seekTo برای تغییر موقعیت یک صدا مورد استفاده قرار می گیرد.
۷	setVolume برای تنظیم صدا استفاده می شود.
۸	startRecord از این روش برای ضبط یک فایل صوتی استفاده می شود.
۹	stopRecord از این روش برای توقف ضبط یک فایل صوتی استفاده می شود.
۱۰	stop این روش پخش یک فایل صوتی را متوقف می نماید.

کلا آخر

در این جلسه آموزش کار با پلاگین Media در کوردوا ارائه گردید.
در جلسه بعد شما را با Media Capture و کاربردهای آن در کوردوا آشنا خواهیم کرد.
با پی وی لرن همراه باشید.

QR: جلسه ۲۱ : آموزش کار با پلاگین Media در کوردوا

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۱ : آموزش کار با پلاگین Media در کوردوا

مقدمه

آموزش کار با پلاگین Media در کوردوا

مرحله ۱ – نصب پلاگین Media

مرحله ۲ – اضافه کردن دکمه ها

مرحله ۳ – اضافه کردن Event Listeners

مرحله ۴A – ایجاد تابع Play

مرحله ۴B – توابع Pause و Stop

مرحله ۴C – تابع Volume

کلا آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ