1.背景
微信里做H5活动页面，对音乐使用autoplay, android没问题，IOS半天播不出来，因此考虑对音乐进行预加载（不是preload）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>audio</title> <style> .m-toggle { background: url('https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg'); background-size: 100% 100%; background-repeat: no-repeat; position: absolute; right: 10px; top: 50px; width: 28px; height: 28px; display:none; } </style> </head> <body> <div class="m-toggle yinyu" onClick="audioplay()"></div> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var audio = document.createElement("audio"); audio.src = "http://m10.music.126.net/20180605235031/35cf08b189d5470e37afa4bc61324559/ymusic/4d26/bdc3/0fcb/6c5ef34075e5fbf3557c8e06e0ec7b70.mp3";
audio.loop = true; audio.addEventListener("canplaythrough", function() { $(".yinyu").show(); console.log('musice loaded!') audio.play(); }, false); audio.load(); function audioplay(){ if(audio.paused){ audio.play(); }else{ audio.pause(); } } </script> </body> </html>
2.此方案参考: https://www.phpsong.com/1445.html