تقدم هذه المقالة رمز المثال لمشغل موسيقى الويب HTML5 ، ومشاركته مع الجميع ، على النحو التالي:
1 وظيفة مقدمةيتم إطلاق ملصقات الصوت والفيديو في HTML5 ، بحيث يمكننا تشغيل الصوت والفيديو مباشرة دون مساعدة من الإضافات الأخرى. نستخدم أدناه ملصق الصوت H5 وسماتها وطرقها ذات الصلة لصنع مشغل موسيقى بسيط. ويشمل بشكل أساسي الوظائف التالية:
1. لعب التوقف ، الأخير والقادم
2. اضبط شريط التقدم في مستوى الصوت واللعب
3. قم بتبديل الأغنية الحالية وفقًا للقائمة
لنلقي نظرة على التأثير النهائي:
يتم تقسيم بنية مشغل الموسيقى هذا بشكل أساسي إلى ثلاثة أجزاء: معلومات الأغنية ، والمشغل ، وقائمة التشغيل. ضع ثلاث علامات صوتية لأول مرة في المشغل للتشغيل:
<udio id = music1> لا يدعم المتصفح علامات الصوت <المصدر src = media/beyond -glorious years .mp3> </outher = ME DIA/DANIEL POWTER -FREE LOOP.MP3> </ourge> </uadio> <Audio ID = Music3> لا يدعم المتصفح علامة الصوت <Source Src = Media/Jay Chou ، Fei Yuqing -thing من الأميال على بعد الأميال .
تتوافق قائمة التشغيل التالية أيضًا مع ثلاث علامات صوتية:
<div id = playlist> <ul> <li id = m0> ما وراء السنوات المتعددة </li> <li id = m1> حلقة دانييل powter free </li> <li id = m2> jay chou ، fei yuqing- ألف ميل خارج </li> </ul> </iv>
بعد ذلك ، سوف ندرك الوظائف المذكورة أعلاه. ، يتغير نمط قائمة التشغيل أيضًا.
قبل القيام بالوظائف ، يجب أولاً الحصول على علامات الصوت الثلاث للحصول على المعرف وحفظه في صفيف لاستخدام المتابعة.
varmic1 = document.getElementByid (music1) ؛2 اللعب والتوقف:
يمكننا إكمال وظيفة زر التشغيل الآن.
ثم احكم على حالة اللعب ، واتصل بالوظيفة المقابلة ، وقم بتعديل القيمة والقائمة النمط المقابل للعلم:
وظيفة playmusic () {if (flag && mlist [index] .paused) {mlist [index] .play () ؛ . الوسائط/play.png) ؛}}يتم استدعاء وظائف متعددة في الكود أعلاه. دعنا نلقي نظرة على كيفية تنفيذ هذه الوظائف وأي الوظائف تتوافق معها.
3 بار التقدم ووقت التشغيل:الأول هو وظيفة شريط التقدم ، للحصول على كامل مدة الأغنية ، ثم حساب موضع شريط التقدم وفقًا لتقدم التشغيل الحالي وطول شريط التقدم.
وظيفة ProgressBar () {var lenth = mlist [index] .Duration ؛ style.left = 60+parsefloat (cur/lenth)*300+px ؛} ، 10)}}فيما يلي وظيفة تغيير الوقت. نظرًا لأن المدة التي نحصل عليها يتم حسابها في ثوانٍ ، يجب علينا استخدام البيان IF للحكم على الوقت لتحويل الوقت ، وتغيير وقت التشغيل إلى بضع ثوان لعرضه.
وظيفة playtimes () {timer2 = setInterval (function () {cur = parseint (mlist [index] .currentTime) ؛ // seconds var minate = parsein <10) {playtime.innerhtml = 0+دقيقة+: 0+cur ٪ 60+؛} آخر {playtime.innerhtml = 0+minute+:+cur ٪ 60+؛}} {if (cur ٪ 60 <10) {) {) { playtime.innertext = دقيقة+: 0+cur ٪ 60+؛} آخر {playtime.innertext = دقيقة+:+cur ٪ 60+؛}} ، 1000) ؛} 4 اضبط التقدم المحرز في اللعب وحجمه:بعد ذلك ، دعنا نكممل تقدم تقدم التشغيل وضبط وظيفة الصوت من خلال شريط التقدم.
يتم تطبيق وظيفة التقدم في التشغيل باستخدام كائن الحدث. أضف أولاً الأحداث إلى شريط التقدم.
. ؛
فيما يلي ضبط وظيفة الصوت. شريط الصوت وفقًا لموضع السحب.
volbtn.addeventListener (mousedown ، function (event) {var e = event || window.event ؛ var that = this ؛ // حدث السحب والإفلات الافتراضي للكرة E.PreventDefault () ؛ ousemove = function (event) { var e = event || window.event ؛ فهرس]. ؛ 5 مفتاح الأغنيةأخيرًا ، دعنا ننفذ وظائف تبديل الأغاني الأكثر تعقيدًا.
دعنا ننظر أولاً إلى الزر التالي للتبديل. Re -calculate ؛ بعد أن اكتشفنا ما أعلاه ، يمكننا البدء في تنفيذ الوظيفة.
// وظيفة الأغنية السابقة () -1 ؛} clearlistbgc () ؛ .Play () ؛ } function nextm () {clearinterval ( GetElementByid (فهرس) () ؛الرمز التالي هو النقر على القائمة لتبديل الأغنية.
m0.onclick =) {clearinterval ( ). ؛} = url (وسائل الإعلام/pause.png) ؛ () ؛ = url (وقفة) الفهرس) ؛يشبه تبديل الأغنية عن طريق تشغيل القائمة فكرة التبديل عبر الزر ، ولكن يتم تعيينها فقط وفقًا لعنصر القائمة المقابل لتعيين الأغنية التي يجب تشغيلها.
هناك عدة طرق تسمى وظائف الأغاني أعلاه.
الأول هو تبديل معلومات الأغنية:
الوظيفة changeInfo (index) {if (index == 0) {musicName.innerhtml = glorious singer.innerhtml =} if (index == 1) {musicname.innerhtml = freee loop ؛ } if (index == 2) {musicname.innerhtml =ثم أفرغ الموقتين:
// ضع شريط التقدم 0function cleanprogress (timer1) {if (timer1! = undefined) {clearinterval (timer1) ؛} style.width = 0 ؛ (timer2! = غير محدد) {clearinterval (timer2) ؛}}أوقف الموسيقى التي يتم تشغيلها واستعادة وقت التشغيل.
Function SPOPM () {if (mlist [index] .played) {mlist [index] .pause () ؛أخيرًا ، قم بتغيير نمط قائمة التشغيل التالية:
وظيفة clearlistbgc () {document.getElementByid (m0) .style.backgroundcolor = #e5e5e5 ؛ getElementByid (m0) .style.color = documentفي هذه المرحلة ، نكممل بشكل أساسي مشغل الموسيقى.
المؤلف: جيري التعليم
المصدر: http://www.cnblogs.com/jeehedu/
ما سبق هو كل محتويات هذا المقال.