التحكم بعناصر الملفات الصوتية في جافاسكربت JavaScript الدرس|33| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الخميس، 2 يوليو 2020

التحكم بعناصر الملفات الصوتية في جافاسكربت JavaScript الدرس|33|


التحكم بالملفات الصوتية 

سندرس اليوم عن التحكم بعناصر  الملفات الصوتية في جافاسكربت سوف نستخدم موقع  w3schools من خلاله سوف نجد جميع عناصر الجافاسكريت, لكن سنتعلم بدرس اليوم كيف نتحكم بالعناصر الصوتية.

سننشى عنصر ملف صوتي في html و هو audio و تحديد ملف صوتي.
<budy>
        <button onclick="playMusic()">تشغيل</button> 
        <button onclick="pause()">إيقاف</button> 
        <button onclick="load()">تحديث</button>
        <audio id="music" src="مسار الملف"></audio>
</budy>

شرح أكواد الـ html

أنشأنا ثلاث ازرار و هي للتشغيل و التحديث و الإيقاف و خاصية الضغط onclick و أنشانا ملف صوتي و حددنا له id لكي يتم تعريفه و استدعاءه عبر الجافاسكربت.

و نكتب بملف الجافاسكربت

var music = document.getElementById("music");
function playMusic(){
    music.play();
}
function pause(){
    music.pause();
}
function load(){
    music.load();

شرح أكواد الجافاسكربت

وضعنا متغير أسمه music و استدعينا الملف الصوتي به عبر الايدي و من ثم استخدمنا الـ function لوضع الأوامر للأزرار الثلاثة التشغيل و الإيقاف و التحديث.
ونتيجة المتصفح تكون


عند الضغط على زر تشغيل سوف يشتغل الملف الصوتي و عند الضغط على إيقاف سوف يتوقف عن العمل و عند الضغط على تحديث سيحدث الأمر و عند التشغيل مرة أخرى سيبدأ من جديد.

عنصر التحكم بالصوت volume

من خلال هذا العنصر يمكننا التحكم بإرتفاع الصوت و انخفاضة حسب النسب المحددة

كود الـ html
<body>
    <button onclick="playMusic()">تشغيل</button>
    <button onclick="pause()">ايقاف</button>
    <button onclick="load()">تحديث</button>
    <button onclick="stopVolume()">ايقاف الصوت</button>
    <button onclick="playVolume()">تشغيل الصوت</button>
    <audio id="music" src="hazt.mp3"></audio>
</body>

كود الجافاسكربت

var music = document.getElementById("music");
function playMusic(){
    music.play();
}
function pause(){
    music.pause();
}
function load(){
    music.load();
}
function stopVolume(){
    music.volume = 0;
}
function playVolume(){
    music.volume = 1;
}


انشأنا function بإسم stopVolume وحددنا المتغير مع الخاصية volume و اعطيناها الأوامر عند الضغط على الزر ينفذ الامر و يصبح مستوى الصوت 0% أي إيقاف, و انشأنا function ثانية بإسم playVolume و حددنا مستوى الصوت 100%.

الخاصية src

تستخدم الخاصية src لمعرفة مصدر او مسار الملف الصوتي في حال كان الصوت ضمن مجلد العمل او من موقع ما على الانترنت و تعديل الملف الصوتي و إستبداله بآخر.

لمعرفة المسار
 لنجرب هذا عبر الـ Console نكتب اسم المتغير و نقطه src و نضغط إنتر
music.src

لاحظنا في الصورة السابقة عند كتابة اسم المتغير ثم الخاصية src أعطانا مسار الملف الصوتي.

لتعديل المسار او المصدر
نستخدم اسم المتغير ثم نقطة و بعدها إشارة التعيين = و إشارتين اقتباس  و نضع ضمنها مصدر الملف الجديد كما نلاحظ بالصورة.

music.src = "مصدر الجديد"

تسريع الصوت playbackRate

عن طريق هذه الخاصية نستطيع التحكم بسرعه الملف الصوتي سواء نريده سريعاً حسب نسبة نحددها له أو نسبة بطيئة أيضاً نحددها له.

كود الـ html
<body>
    <button onclick="playMusic()">تشغيل</button>
    <button onclick="pause()">ايقاف</button>
    <button onclick="load()">تحديث</button>
    <button onclick="stopVolume()">ايقاف الصوت</button>
    <button onclick="playVolume()">تشغيل الصوت</button>
    <button onclick="speedUp()">تسرع الصوت</button>
    <button onclick="slowDown()">ابطاء الصوت</button>
    <audio id="music" src="hazt.mp3"></audio>
</body>

كود الـ جافاسكربت

var music = document.getElementById("music");
function playMusic(){
    music.play();
}
function pause(){
    music.pause();
}
function load(){
    music.load();
}
function stopVolume(){
    music.volume = 0;
}
function playVolume(){
    music.volume = 1;
}
function.speedUp(){
    music.playbackRate +=0.10;
}
function.slowDown(){
    music.playbackRate -=0.10;
}


انشأنا function بإسم speedUP و خاصيتها ان التسريع يكون 10 و ايضاً function ثانية بعكس الأولى.


عند الضغط على التسريع سيصبح المقطع الصوتي سريعاً جداً و عند الضغط على زر التخفيض سيصبح المقطع الصوتي بطيئ.

للتواصل معنا 
قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997
حساب تويتر 

هناك 5 تعليقات:

  1. سلام عليكم ،،،،، دروسك اكثر من رائعه ،،، ان شاء الله مزيد من التقدم والنجاح ،،، كيف صحتك و كيف حالك ،،، هل ما ذلنا في البال و الخاطر ام اين مكانا ،،صح الصح بقلب ازرق .

    ردحذف
    الردود
    1. الحمدلله بخير دامك بخير, شكراً لك, انتي تعرفي اين مكانك في البال و القلب و الخاطر 💙💙💙

      حذف
    2. 634 62E 628 627 631 20 62D 628 64A 628 62A 64A 20 627 644 635 63A 64A 631 629 20 634 648 20 633 645 647 627 20

      اثبت لي ان مكاني هناك :-)

      حذف

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام