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

最新推荐文章于 2023-11-09 10:36:26 发布

TurtleOrange

最新推荐文章于 2023-11-09 10:36:26 发布

阅读量1.2k

点赞数

分类专栏：分享实践前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/TurtleOrange/article/details/109487139

版权

分享同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

实践

30 篇文章 0 订阅

订阅专栏

前端

30 篇文章 0 订阅

订阅专栏

思路：在页面中内嵌微信开发的代码块，可让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="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 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();
     });
 };