باستخدام HTML5 للتحكم في مفاتيح الموسيقى الخلفية

في بعض الأحيان ، نضيف موسيقى الخلفية إلى الصفحة ، مما يسمح للمستخدمين بتشغيل وإيقاف الموسيقى الخلفية بأنفسهم ، وخاصة صفحات الوسائط المتعددة المصنوعة على أساس HTML5 المحمول. يمكن لعلامة الصوت HTML5 الحصول على حالة تشغيل الصوت ، ويمكن إيقاف تشغيل موسيقى الخلفية وتشغيلها عن طريق لمس الزر.

العروض كما يلي:

قم بإنشاء صفحة HTML5 ، ووضع علامة <Oudio> ، وتعيين مصدر ملف الصوت ، وقم بتعيين تشغيل الحلقة. قم بإعداد صورتين ، مما يشير إلى حالتين للتشغيل والتوقف عن الموسيقى الخلفية ، يمكنك النقر.

XML/HTML رمز نسخ المحتوى إلى الحافظة

1. <OudioId = music2src = music.mp3loop = loop> لا يدعم المتصفح علامة الصوت. </audio>
2. <ahref = javaScript: playpause () ؛> <imgsrc = pause.gifwidth = 48height = 50id = music_btn2border = 0> </a>

عندما نقرنا على زر Switch Image ، أطلقنا على البرنامج النصي JavaScript ودالة PlayPause (). في الوظيفة ، احكم على حالة تشغيل الصوت الصوتي. إذا تم إيقاف (توقف مؤقت) ، اتصل .Play () لمواصلة اللعب. إذا كان في حالة التشغيل ، والتشغيل. الإيقاف المؤقت () سيتم تعليقه على الفور. عند التبديل بين الدولتين ، يرجى الاطلاع على الرمز:

رمز JavaScript محتوى نسخ إلى الحافظة

1. FunctionPlayPause () {
2. varmusic = document.getElementById ('music2') ؛
3. varmusic_btn = document.getElementById ('music_btn2') ؛
4. if (music.paused) {
5. music.play () ؛
6. music_btn.src = 'play.gif' ؛
7. }
8. آخر{
9. music.pause () ؛
10. music_btn.src = 'epave.gif' ؛
11. }
12. }

إذا كنت تستخدم رمز jQuery ، فيمكنك كتابته مثل هذا:

رمز JavaScript محتوى نسخ إلى الحافظة

1. <OudioId = MusicSrc = http: //cctv3 </audio>
2. <aid = audio_btn> <imgsrc = play.gifwidth = 48height = 50id = music_btnborder = 0> </a>
3. <script>
4. $ (#audio_btn) .click (function () {
5. varmusic = document.getElementById (music) ؛
6. if (music.paused) {
7. music.play () ؛
8. $ (#music_btn) .attr (SRC ، play.gif) ؛
9. }آخر{
10. music.pause () ؛
11. $ (#music_btn) .ATTR (SRC ، ePASE.GIF) ؛
12. }
13. }) ؛
14. </script>