前言

近期的一个小案例中,需要在H5页面中加入一个.mp3背景音乐,在大部分Android手机上可以正常自动播放,但在iOS手机上却不能(都是在微信内打开的),网上有很多相应的解决方案,经过实践,找到一个适合的初步解决了这个问题,特此记录,以作备忘~~

H5页面背景音乐添加

首先是在H5页面中添加背景音乐并播放,主要是使用audio标签,具体的html代码如下:

<span id="musicControl">
    <a id="mc_play" class="on" onclick="play_music();">
        <audio id="musicfx" loop="loop" autoplay="autoplay" preload="auto">
            <source src="music.mp3" type="audio/mpeg">
        </audio>
    </a>
</span>

控制播放/暂停的js脚本:

function play_music() {
    if ($('#mc_play').hasClass('on')) {
        $('#mc_play audio').get(0).pause();
        $('#mc_play').attr('class', 'stop');
    } else {
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class', 'on');
    }
    $('#music_play_filter').hide();
    event.stopPropagation(); //阻止冒泡
}
function just_play(id) {
    $('#mc_play audio').get(0).play();
    $('#mc_play').attr('class', 'on');
    if (typeof (id) != 'undefined') {
        $('#music_play_filter').hide();
    }
    event.stopPropagation(); //阻止冒泡
}
window.setTimeout(function () {
    var play_filter = document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function () {
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function () {
        just_play(1);
    });
    play_filter.addEventListener('touchend', function () {
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function () {
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function () {
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function () {
        just_play(1);
    });
    play_filter.addEventListener('mousemove', function () {
        just_play(1);
    });
}, 200);// js脚本需要放在html底部,且需加上适当的延迟加载,
         // 否则会出现无法添加addEventListener的方法的错误
window.onload = function () {
    just_play(1);
}

这里由于是拷贝网上的代码并做了适当的修改,相应的css样式不再赘述。至此H5页面上就完成背景音乐的添加及播放功能,在大部分Android手机上是可以自动播放的。

iOS手机上无法自动播放的问题处理

下面将针对iOS手机上无法自动播放的问题做进一步的处理。其实处理的方式也很简单,且有不同的办法,这里记录其中一种方式。

首先引用一个js脚本库:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

然后在<script></script>中加上如下一段代码即可:

function autoPlayAudio() {
    wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: []
    });
    wx.ready(function () {
        var globalAudio = document.getElementById("musicfx");
        globalAudio.play();
    });
};
// 解决ios音乐不自动播放的问题
autoPlayAudio();

当然这种方式仅限于微信内部打开使用,浏览器中可能还是不行。所以只是初步解决这个问题,其他的还需要更深入的去研究~~

参考来源

主要参考了这两篇文章,受用!

https://blog.csdn.net/yerongtao/article/details/78110262

https://www.cnblogs.com/bky-seed/archive/2017/12/14/8036569.html


作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Html5系列
posted 阅读(70 ) 评论(0 )

评论内容: