تطبيق وصل wassll لمتابعة مخصصات المحروقات

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

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

ننشئ عنصر ملف صوتي في html و هو audio و تحديد ملف صوتي من الملفات.

<button onclick="playMusic()">تشغيل</button>
<button onclick="pause()">إيقاف</button>
<button onclick="load()">تحديث</button>
<audio id="music" src="مسار الملف"></audio>

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

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

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

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

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

 

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

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

شكل الكود في ملف html.

<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>

شكل الكود في ملف javascript.

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%.

 

تسريع الصوت playbackRate

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

كود الـ html.

<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>

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

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 ثانية بعكس الأولى.

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