h5添加背景音乐

app中环境配置

---

ios WKWebView 和UIWebView 播放没有声音的方案

WKWebView设置

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];  
    config.allowsInlineMediaPlayback = YES;  
    config.mediaPlaybackRequiresUserAction = false;  

    displayWebView=[[WKWebView alloc] initWithFrame:rect configuration:config];  
    displayWebView.UIDelegate=self;  
    displayWebView.navigationDelegate=self;  

UIWebView设置

[self.webView setMediaPlaybackRequiresUserAction:NO];

H5案例分享：解决H5中背景音乐无法自动播放问题

<!-- 音乐 start-->
<div class="musicinfo" id="musicinfo">
    <audio id="musicid" src="/styles/audio/message.mp3" preload="preload" autoplay="autoplay"  loop="loop">您的浏览器不支持 audio标签。</audio>
</div>
<!-- 音乐 end-->
<script type="text/javascript">
    // 音乐播放
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);

        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }
    function musicPlay(isPlay) {
        var audio = document.getElementById('musicid');
        if (isPlay && audio.paused) {
            audio.play();
        }
        if (!isPlay && !audio.paused) {
            audio.pause();
        }
    }
    autoPlayMusic();
</script>