การใช้ HTML5 เพื่อควบคุมสวิตช์เพลงพื้นหลัง

บางครั้งเราเพิ่มเพลงพื้นหลังลงในหน้าทำให้ผู้ใช้สามารถเปิดและปิดเพลงพื้นหลังด้วยตัวเองโดยเฉพาะหน้ามัลติมีเดียที่ทำจาก HTML5 มือถือ แท็กเสียงของ HTML5 สามารถรับสถานะการเล่นเสียงได้และเพลงพื้นหลังสามารถปิดและเปิดใช้งานได้โดยการสัมผัสปุ่ม

การเรนเดอร์มีดังนี้:

สร้างหน้า HTML5 วางแท็ก <oadio> ตั้งค่าแหล่งที่มาของไฟล์เสียงและตั้งค่าการเล่นแบบวนซ้ำ เตรียมรูปภาพสองภาพแสดงให้เห็นถึงสองสถานะของการเปิดและหยุดเพลงพื้นหลังคุณสามารถคลิก

XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด

1. <audioid = music2src = music.mp3loop = loop> เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง </เสียง>
2. <ahref = javaScript: playpause ();> <imgsrc = pause.gifwidth = 48Height = 50id = music_btn2Border = 0> </a>

เมื่อเราคลิกปุ่มภาพสวิตช์เราเรียกสคริปต์ JavaScript และฟังก์ชัน PlayPause () ในฟังก์ชั่นให้ตัดสินสถานะการเล่นเสียงเสียง หากหยุด (หยุดชั่วคราว) โทร. play () เพื่อเล่นต่อ หากอยู่ในสถานะการเล่นการเล่น PAUSE () จะถูกระงับทันที เมื่อสลับระหว่างสองรัฐโปรดดูรหัส:

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 = 'pause.gif';
11. -
12. -

หากคุณใช้รหัส jQuery คุณสามารถเขียนได้เช่นนี้:

JavaScript รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด

1. <audioid = musicsrc = http: //cctv3.qiniudn.com/zuixingfuderen.mp3autoplay=autoplayloop=loop> เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง </เสียง>
2. <AID = AUDIO_BTN> <imgsrc = play.gifwidth = 48Height = 50id = music_btnborder = 0> </a>
3. <script>
4. $ (#AUDIO_BTN) .CLICK (function () {
5. varmusic = document.getElementById (เพลง);
6. if (music.paused) {
7. music.play ();
8. $ (#music_btn) .attr (src, play.gif);
9. }อื่น{
10. music.pause ();
11. $ (#music_btn) .attr (src, pause.gif);
12. -
13. -
14. </script>