صفحه اصلی » آموزش اندروید » آموزش نحوه پخش صوت و ویدیو در اندروید
multimedia-android

آموزش نحوه پخش صوت و ویدیو در اندروید

در این جلسه روش کار با فایل های صوتی و تصویری را آموزش می دهیم. در این اپلیکیشن دو عکس گربه و خروس و یک دکمه پخش ویدیو قرار گرفته است با لمس عکس هر حیوان صدای آن که به صورت یک فایل mp3 در داخل برنامه ذخیره شده است پخش می شود و با لمس کلید پخش ویدیو یک فیلم یا کلیپ کوتاه با فرمت mp4 و کدینگ H264 به نمایش در می آید. همچنین نحوه ی ایجاد و تغییر آیکن اپلیکیشین نیز آموزش داده می شود. در انتها چند سایت پر کاربرد را برای دریافت فایلهای صوتی، عکس و آیکن رایگان معرفی خواهیم کرد. از جلسات بعدی با سورسهای اپدروید آشنا می شویم.

ابتدا برای شروع فایل Multimedia.zip را از اینجا دانلود کنید.

پس از دانلود و Extract کردن فایل زیپ، اندروید استدیو را باز کرده و سپس بر روی Open an existing Android Studio project کلیک کنید و پوشه ی اکسترکت شده را باز کنید.

پس باز کردن سورس پروژه مالتی مدیا، فایل activity_main.xml را باز کنید. اینترفیس این برنامه از یک RelativeLayout تشکیل شده است که در داخل آن دو ImageView، یک Button و یک VideoView قرار دارد. ImageView ها هر یک حاوی عکس یک حیوان (گربه و خروس) بوده و در ضمن خصیصه ی android:onClick هم برای آنها تنظیم شده است. جالب است بدانید که این خصیصه برای تمام اشیاء موجود در UI قابل تنظیم است و مختص Button نیست. با تنظیم این خصیصه برای هر شی به آن قابلیت کلیک شدن می دهیم و می توانیم نام تایع را که در داخل این خصیصه نوشته شده است را در فایل Activity مرتبط با این فایل اجرا کنیم. با شی Button هم در پروژه های پیشین آشنا شده اید. شی بعدی VideoView نام دارد و از آن برای نمایش فایل های ویدیویی استفاده می شود.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingLeft="16dp" 
    android:paddingRight="16dp" 
    android:paddingTop="16dp" 
    android:paddingBottom="16dp" 
    tools:context=".MainActivity"> 
 
    <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/imageView" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentStart="true" 
        android:onClick="cat_button" 
        android:src="@drawable/cat" /> 
 
    <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/imageView2" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentEnd="true" 
        android:onClick="rooster_button" 
        android:src="@drawable/rooster" /> 
 
    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="پخش ویدیو" 
        android:onClick="play_button" 
        android:id="@+id/button" 
        android:layout_alignBottom="@+id/imageView" 
        android:layout_centerHorizontal="true" /> 
 
    <VideoView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:id="@+id/videoView" 
        android:layout_below="@+id/imageView2" 
        android:layout_centerHorizontal="true" /> 
 
</RelativeLayout>

نکته ای که در خصوص چهارخصیصه ی android:layout_alignParentLeft و android:layout_alignParentStart و android:layout_alignParentRight و android:layout_alignParentEnd مهم به نظر میرسد اینست که در نسخه های قدیم اندروید معمولا فقط از android:layout_alignParentLeft و android:layout_alignParentRight برای اشیاء استفاده می شد و این دو خصیصه به طور مطلق شی مورد نظر را به سمت چپ یا راست نمایشگر متصل می کردند. اما در نسخه های جدید توصیه شده است که از این دو خصیصه استفاده نشود و بجای Left از Start و بجای Right از End استفاده شود. دلیل آن هم پشتیبانی از زبان های راست به چپ مانند فارسی، عربی و … است. در این صورت شما در برنامه های خود (خصوصاً برنامه های محتوایی مثل کتاب) اکر برای شیئی خصیصه ی android:layout_alignParentStart را تعریف کنید اگر برنامه در گوشی کاربری نصب شود که زبان دستگاه او انگلیسی و یا یکی از زبان های چپ به راست باشد آن شی در سمت چپ صفحه قرار خواهد گرفت و اگر در گوشی یک فارسی زبان یا شخصی که زبان او راست به چپ باشد نصب شود، آن شی در سمت راست نمایشگر دستگاه او قرار می گیرد. بدین ترتیب برنامه های شما بیش ار پیش با فرهنگ ها و زبان های مختلف سازگار خواهد شد. برای غیر فعال کردن این حالت ازهمان Left و Right استفاده کنید و در لایه ی والد عبارت android:layoutDirection=”ltr” را بنویسید تا لایه ی شما در تمام حالات ثابت بماند.

فایل MainActivity.java را باز کنید. در این فایل چهار تابع تعریف کرده ایم. تابع init مطابق با جلسات قبل کار مقدار دهی به متغیرها را انجام می دهد. ما در این برنامه دو متغیر cat_mp و rooster_mp از نوع MediaPlayer داریم که هر کدام یک شی از کلاس مدیاپلیر را بازسازی می کنند و برای پخش صدای گربه و خروس بکار می روند. همچنین متغیر mVideoView از نوع VideoView که برای نمایش فایل ویدویی بکار می رود و متغیر uriPath از نوع رشته که آدرس فایل ویدیویی را در خود جای می دهد. تابع init پس از اجرای برنامه فراخوانی شده و در ابتدا شی mVideoView را به videoView در فایل xml پیوند می زند. سپس متغیر uriPath با آدرس فایل ویدیویی که در پوشه ی res/raw/planets.mp4 قرار دارد مقدار دهی می شود. توجه داشته باشید پوشه ی raw بصورت دستی با راست کلیک روی پوشه ی res ایجاد شده است و معمولا پوشه ای با این نام برای قرار گیری فایل های صوتی و ویدیویی مورد استفاده قرار می گیرد. شیوه ی آدرسی دهی فایلهای داخل این پوشه نیز به صورت دستور ذکر شده انجام می شود و همیشه با android.resource شروع می شود. البته راهای بسیار زیاد و متفاوت دیگری نیز برای دسترسی به فایل ها وجود دارد و از جمله می توان فایل ها را بلافاصله در مموری کارت کپی کرد یا بجای رشته ی فوق از طریق توابع داخلی اندروید به منابع داخلی برنامه دسترسی پیدا کرد.

در خط بعدی یک شی MediaPlayer ایجاد شده که در یکی از توابع سارنده به طور مستقیم فایل cat_snd.mp3 را آدرس دهی کرده و نتیجه را در cat_mp قرار داده است. توجه داشته باشید که برای دسترسی به منابع هرگز از پسوند آنها استفاده نمی شود و ما برای دسترسی به فایل cat_snd.mp3 کافیست آنرا تنها بصورت cat_snd قید کنیم. در خط بعدی نیز متغیر rooster_mp به همین شکل با فایل صوتی صدای خروس مقدار دهی شده است.

تابع بعدی play_button نام دارد که با لمس کلیدِ “پخش ویدیو” اجرا می شود. در این تابع ابتدا عبارت Play با دستور Toast نمایش داده می شود، سپس یک Uri ایجاد شده و با آدرس فایل ویدیویی که در متغیر رشته ای uriPath قرار داده شده بود مقدار دهی می شود. Uri متغیری است که مخصوص آدرس ها می باشد، چه آدرس فایل و چه آدرس های اینترنتی. این متغیر فاصله ها، عبارات کد شده و مواردی را که در آدرس ها و علی الخصوص آدرس های اینترنتی به چشم می خورد بدرستی تشخیص داده و بهتر از رشته عمل می کند. در خط بعدی آدرس فایل با متد setVideoURI به شی mVideoView انتساب داده می شود. در خط بعدی دستور requestFocus تمرکز برنامه را بر روی شی mVideoView برده و در نهایت در خط آخر متد start ویدیو را پخش می کند. همچنین می توانید با متدهای دیگری نظیر pause و resume فایل در حال پخش را متوقف و بازپخش کنید و نیز با متد stopPlayback فایل را متوقف کرده و به ابتدا بازگردانید که این کارها به عنوان تمرین به شما واگزار می شود.

دو تابع آخر نیز شبیه به هم بوده و تنها یکی را توضیح می دهیم. این دو تابع پس از لمس تصاویر گربه و خروس اجرا شده و فایل صوتی مربوطه را اجرا می کند. از آنجاییکه اشیاء cat_mp و rooster_mp هر کدام یک شی جداگانه از کلاس MediaPlayer می باشد می توان بصورت پشت سر هم نیز آیکن ها را لمس کرد و دو فایل صوتی بصورت همزمان پخش می شود. تابع cat_button پس از لمس عکس گربه اجرا می شود. در این تابع در ابتدا با دستور cat_mp.isPlaying بررسی می کنیم که آیا قبلا این دکمه لمس شده و فایل صوتی در حال پخش می باشد یا خیر؟ اگر اینگونه بود (یعنی دکمه را قبلا لمس کرده بودیم و صدای گربه در حال پخش بود) بلاک داخل این شرط اجرا می شود: در ابتدا با کمک دستور cat_mp.stop فایل صوتی در حال پخش cat_mp متوقف می شود. سپس با دستور cat_mp.release شی cat_mp آزاد و خالی می شود. بلافاصله شی مورد نظر با دستور MediaPlayer.create مجددا با فایل صدای گربه مقدار دهی می شود و اگر تمام این مراحل موفقیت آمیز بود فایل صوتی با کمک دستور cat_mp.start اجرا می شود. اگر هم فایل در حال پخش نبود باز هم دستور cat_mp.start اجرا می شود. همانطوریکه متوجه شده اید تمام مراحل کار با فایل در داخل بلوک try قرار داده شده است. سعی کنید همیشه بعنوان یک قانون دستوراتی را که با فایلها سروکار دارند را در داخل بلوک try اجرا کنید، چرا که همیشه بروز خطا در اینگونه دستورات بدلیل خراب شدن فایل، پاک شدن اشتباهی فایل و … وجود دارد و برنامه را با Force Close مواجه می کند که ظاهر غیر حرفه ای به برنامه می دهد.

تغییر آیکن (icon) اپلیکیشن:

برنامه هایی که می نویسیم همگی بصورت پیشفرض دارای آیکن روبات اندروید می باشند. برای تغییر آیکن بایستی در ابتدا یک تصویر دلخواه ایجاد کرده و سپس آنرا به اندازه های مختلف تبدیل کنید و با نام یکسان در پوشه های mipmap کپی نمایید. ما برای این برنامه نیاز به آیکنی با محتوای multimedia داریم. برای این منظور به سایت pixabay.com مراجعه کرده و عبارت multimedia را جستجو کرده و نوع تصویر مورد جستجو را بر روی vector graphics قرار می دهیم تا فقط تصاویر ترسیم شده و برداری نمایش داده شود. سایت pixabay.com یک سایت عالی برای دریافت محتوای تصویری رایگان می باشد (البته قبل از دانلود به نوع لایسنس عکس توجه داشته باشید که بر روی CC0 Public Domain Free for commercial use No attribution required باشد). پس از دریافت تصویر یا تصاویر دلخواه بایستی با استفاده از یک نرم افزار ویرایش عکس، تصاویر را به هم متصل کرده وآیکن دلخواه خود را ایجاد کنیم. ما از نرم افزار رایگان GIMP استفاده می کنیم که رقیب نرم افزار تجاری فتوشاپ شوده و از سایت gimp.org قابل دریافت است.

پس از ویرایش و ایجاد عکس بایستی چندین خروجی با فرمت png و با طول و عرض مساوی، نام یکسان و در اندازه های مختلف ایجاد کرده و در پوشه های mipmap قرار دهیم. منظور از طول و عرض مساوی اینست که در هر تصویر باید طول و عرض تصویر با هم برابر بوده و تصویر به شکل مربع باشد. البته زمینه به شکل مربع بوده و معمولا شفاف است و لایه های دیگر می تواند به هر شکل دلخواه مثل دایره یا اشکال دیگر باشد. ایجاد آیکن های مربعی با گوشه های گرد بسیار جذاب است. ما در اینجا قصد نداریم به آموزش گرافیک یا نرم افزار خاصی بپردازیم فقط همینقدر بدانید که پس از تهیه تصویر آنرا به اندازه های ۵۱۲×۵۱۲ تا ۳۶×۳۶ پیکسل (مطابق با جدول زیر) تبدیل کرده و نام تمام خروجی ها را icon.png با حروف کوچک گزاشته و به ترتیب در پوشه های زیر کپی کنید:

mipmap-ldpi – 36 x 36
mipmap-mdpi – 48 x 48
mipmap-hdpi – 72 x 72
mipmap-xhdpi – 96 x 96
mipmap-xxhdpi – 144 x 144
mipmap-xxxhdpi – 192 x 192

توجه: mipmap-ldpi در نسخه های جدید اندروید منسوخ شده و تصور میشود که دیگر گوشی هایی مثل Galaxy Pocket تولید نمی شود. اگر سورس خود را از eclipse ایمپورت کرده باشید بجای mipmap عبارت drawable را خواهید دید. اگر پوشه ای وجود ندارد می توانید خودتان آن را با راست کلیک روی پوشه ی res و ایجاد یک Directory مطابق با نام های بالا (با حروف کوچک) تولید کنید. آیکن ۵۱۲×۵۱۲ را برای آپلود برنامه در اندروید مارکت ها نگه دارید، در آنجا به یک فایل png به اندازه ی ۵۱۲×۵۱۲ نیاز خواهد بود.

یک خبر خوب: ما قبلا تمام تصاویر خود را با Gimp به اندازه های ذکر شده تبدیل می کردیم و این کار وقت زیادی می گرفت. اما هم اکنون سایت های بیشماری از قبیل resizeappicon.com بوجود آمده است که فایل ۵۱۲X512 را تحویل گرفته و بصورت آنلاین و تنها با یک کلیک تمام فایلها با رزولیشن های مختلف را تولید می کند. اگر با سایت فوق راحت نبودید می توانید عبارت android icon resizer online را سرچ کنید تا سایت های دیگری را بیابید. پس از ایجاد تصاویر، نام تمام آیکن ها را icon.png قرار داده و هر یک را متناسب با اندازه اش در پوشه ی مربوطه کپی کنید. سپس فایل AndroidManifest.xml را باز کرده و خصیصه ی android:icon را که در جلوی آن عبارت ic_launcher نوشته شده است به icon تغییر دهید. به همین راحتی آیکن برنامه تغییر می کند.

در این قسمت چندین سایت پرکاربرد را معرفی خواهیم کرد که در تهیه برنامه های خود می توانید منابعی مانند عکس، آیکن، صوت، نمونه کد و … را آنها دریافت کنید. در استفاده از منابع به لایسنس منابع توجه کنید. لایسنس CC0 یا GNU در صورتی که در جلوی آن عبارت Free for commercial use نوشته شده باشد به شما حق استفاده از منابع را حتی برای کارهای تجاری می دهد. اگر در ضمن آن عبارت No attribution required هم نوشته شده باشد که بهتر. ولی در هر صورت بهتر است متن قانون و لایسنس را بخوانید چون ممکن است نیاز به لینک به منبع یا متن لایسنس لازم باشد. گاهی اوقات عبارت Back link required در ضمن Free for commercial use نوشته شده. بدین معنا که استفاده برای مصارف تجاری آزاد است اما شما باید در برنامه ی خود یک لینک به جایی که محتوا را از آنجا دانلود کرده اید یا لینکی که صراحتا ذکر شده بدهید. عبارت no for commercial use از همه بدتر بوده و به شما اجاره استفاده از محتوا را تنها برای برنامه های رایگان و غیر تجاری می دهد. در خصوص تمامی لایسنس ها حتماً متن آنها را به طور دقیق بخوانید، بعضی از آنها به تعداد مشخصی و یا تا حد مشخصی اجازه ی استفاده ی تجاری می دهند نه تا ابد. در مورد سایت ها و بلاگ های ایرانی اول از همه به انتهای سایت رجوع کنید: مثلا در پایین سایت فلان نوشته شده: باز نشر مطالب تنها با ذکر نام و آدرس سایت مجاز می باشد. این یعنی حق ندارید که آزادانه مطالب را کپی کنید و حتما باید لینک منبع را ذکر کنید. البته اصلا ذکر نشده که استفاده ی تجاری آزاد است یا نه و اگر قصد دارید برنامه ای پولی بنویسید حتما باید با مدیران سایت مربوطه مکاتبه کنید. همچنین کپی مطالب کتابها نیز کاملا ممنوع است چرا که در ابتدای تمامی کتابها ذکر شده: هر گونه کپی برداری پیگرد قانونی دارد. هیچ نویسنده ای دوست ندارد محتوای کتابش توسط یک شخص ثالث تبدیل به یک اپلیکیشن شده و دهها میلیون تومان به فروش برسد و مطمئنا از سوی نویسنده و ناشر جریمه ی سنگینی را متحمل خواهید شد. در ادامه تعدادی سایت برای دانلود محتوا معرفی می شود:

pixabay.com: دانلود انواع عکس (اکثراً رایگان برای مصارف تجاری)
freesound.org: دانلود انواع صوت و موسیقی، از صدای کلیک و سگ و گربه تا یک ملودی کوتاه با پیانو (همه ی محتوا رایگان نیستند)
google material design: آیکن های متریال گوگل مناسب برای سبک نوین طراحی متریال (Materail Design)
resizeappicon.com: ایجاد فایلهای آیکن اپلیکیشن اندروید با رزولیشن های مختلف بصورت آنلاین
openclipart.org: دانلود عکس های برداری رایگان
iconarchive.com: دانلود آیکن (هنگام جستجو License را بر روی commercial free تنظیم کنید و بازهم به License منابع توجه کنید)
stackoverflow.com: دریافت نمونه کد و پرسیدن سوالات در خصوص برنامه نویسی

 

در این جلسه با روش اجرای فایل های صوتی و ویدئو با اندروید آشنا شدیم. همچنین نحوه ی تغییر icon اپلیکیشن آموزش داده شد و در پایان سایتهای محتوایی رایگان و شیوه ی استفاده از منابع مختلف بیان شد. امیدواریم تا این جلسه با طور کامل با اندروید استودیو و نحوه ی کار با بخش های مختلف آن آشنا شده باشید و به قول معروف بتوانید گلیم خودتان را از آب بیرون بکشید.

 

دانلود سورس کد

منبع: http://apdroid.ir

درباره بهزاد

باید دنیا را کمی بهتر از آنچه تحویل گرفته ای،تحویل دهی خواه با فرزندی خوب؛ خواه با باغچه ای سرسبز؛ خواه با اندکی بهبود شرایط اجتماعی. و اینکه بدانی اگر حتی فقط یک نفر با بودن تو ساده تر نفس کشیده است، یعنی تو موفق بوده ای...

پاسخی بنویسید

آدرس ایمیل شما منتشر نمی شود.فیلدهای الزامی علامت گذاری شده اند. *

*