思路：在页面中内嵌微信开发的代码块，可让ios手机自动播放背景音乐
注意：代码引入了微信js接口，实际开发需配置jsjdk
html代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no" /><script src="/libs/jquery/2.1.1/jquery.min.js"></script><script src="js/music.js"></script><!-- 引入微信JS接口 --><script src="http://res./open/js/jweixin-1.2.0.js"></script><style>.music-control{position: absolute;top: .2rem;right: .2rem;z-index: 1001;}.music-control>img{width: 30px;height: 30px;}.Mrotate{animation: Mrotate 3s linear infinite;}@keyframes Mrotate {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style></head><body style="background: #3b3b3b;"><!-- 音乐控制开关 --><div class="music-control"><img name="music_play.png" class="music-play Mrotate" onclick="Mplay()"><img name="music_pause.png" class="music-pause" style="display: none;" onclick="Mpause()"></div><audio src="music/bgMusic.MP3" id="myaudio" controls="controls" autoplay preload hidden loop></audio></body></html>
music.js
$(function(){//给所有页面的img图片加上path路径var imgPath = "images/";$("img").each(function(){imgName = this.name;this.src = imgPath+imgName;})// 解决ios音乐不自动播放的问题autoPlayAudio();})// 背景音乐播放function Mplay(){$(".music-play").hide()$(".music-pause").show()var globalAudio=document.getElementById("myaudio");globalAudio.pause();}// 背景音乐暂停function Mpause(){$(".music-play").show()$(".music-pause").hide()var globalAudio=document.getElementById("myaudio");globalAudio.play();}// 微信接口初始化背景音乐function autoPlayAudio() {wx.config({debug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(function() {var globalAudio=document.getElementById("myaudio");globalAudio.play();});};
附上使用的图片
测试结果：
①在本地vscode中使用Live Server运行并在手机微信浏览器打开，背景音乐可自动播放【达到需求目的】
②在本地pc端直接点击html打开，没有自动播放音乐
总结：
该方法适用于微信h5小游戏制作背景音使用
