ios系统微信H5页面背景音乐自动播放

yoken 阅读：20680 2021-09-12 16:33:52 评论：12702

思路：在页面中内嵌微信开发的代码块，可让ios手机自动播放背景音乐

注意：代码引入了微信js接口，实际开发需配置jsjdk

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/music.js"></script>
    <!-- 引入微信JS接口 -->
    <script src="http://res.wx.qq.com/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>
        <img name="music_play.png" class="music-play Mrotate" onclick="Mplay()">
        <img name="music_pause.png" 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小游戏制作背景音使用

转载保留链接！网址：http://80920140.com/post/1135.html

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源； 2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任； 3.作者投稿可能会经我们编辑修改或补充。