اذهب الي المحتوي
أوفيسنا

lشغل موسيقى في صفحة html


الردود الموصى بها

كل عام و جميعكم بخير

 

أبحث عن html player لتشغيل ملفات .mp3 بدون الحاجة لاستعمال انترنت ستكون كواجهة استوانة تعليمية

على أن يتم تشغيل الملف الذي يختاره المستخدم من صندوق الاختيارات الذي يحتوي على مثلا الدرس الأول، الدرس الثاني ... وهكذا

بمجرد اختياره يظهر في المشغل مع أزرار التشغيل والإيقاف والرجوع والتقديم مع وجود زرين للدرس السابق والتالي.

فهل أجد هذا الأمر، جربت كثيرًا لكن لم استطع عمل تشغيل العنصر الذي تم اختياره

  اشكركم

رابط هذا التعليق
شارك

  • 2 months later...

كل عام وأنت بكل خير وسعادة

أقترح عليك جعل قيمة كل عنصر في القائمة اسم الملف الصوتي الخاص باسم الدرس

وتشغيل الملف في الوسم audio

مثال:

 <select id="mysong" onchange="myFunction()">
  <option value="1">Lesson 1</option>
  <option value="2">Lesson 2</option>
  <option value="3">Lesson 3</option>
  <option value="4">Lesson 4</option>
</select> 

<p id="player"></p>

<script>
function myFunction() {
    var x = document.getElementById("mysong").value;
    document.getElementById("player").innerHTML = '<audio controls><source src="lessons/' + x + '.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>';
}
</script>

حيث أن اسماء الملفات الصوتية هي 1 للدرس الأول و2 للدرسالثاني وهكذا وجميعها بامتداد mp3

وتوجد هذه الملفات في مجلد اسمه lessons

 

رابط هذا التعليق
شارك

اشكرك أخي العزيز

 

 لكن هل يوجد script  لدعم المتصفح الذي لا يعمل مع html5?

مثلا لو الدارس لا يوجد لديه متصفح يدعم html5  فإن الدروس لن تفتح لديه

فهل من حل لهذه الحالة في حالة عدم دعم متصفح المستخدم لهذا الكود؟

 في انتظار ردودكم

جزاكم الله كل الخير.

 

رابط هذا التعليق
شارك

  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • تصفح هذا الموضوع مؤخراً   0 اعضاء متواجدين الان

    • لايوجد اعضاء مسجلون يتصفحون هذه الصفحه
×
×
  • اضف...

Important Information