zoukankan      html  css  js  c++  java
  • 一种解决h5页面背景音乐不能自动播放的方案

    • 场景:微信、浏览器、App
    • 普通解决方案:采用audio标签的autoplay属性
    • 现象:
    1. 大部分IOS系统和少部分Android微信不支持自动播放
    $解决方案:监听WeixinJSBridgeReady事件、DOMContentLoaded事件
    微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"。
    发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
    所以,为了保险起见,可以同时监听两个事件,以增强其适用性。
    代码如下:
    <audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>

    document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('bg-music');
                audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        audioAutoPlay();
    });
     
    1. 部分Android浏览器和所有IOS下Safari浏览器不支持自动播放
      解决方案:通过手势事件播放音乐
      (1) 监听body的touchstart事件,回调中播放音乐;
      缺点:部分元素的touch事件可能会阻止冒泡,需要在对应的地方调起播放音乐函数
      (2) 可以增加透明层,点击到透明层,播放音乐,关闭透明层;
      缺点:第一次点击按钮元素可能不响应,造成用户体验上的伤害。
    1. 部分App不支持webview音乐自动播放
      解决方案:1.壳浏览器支持;2.通过手势事件播放音乐
     
      完整代码:
    // 音乐播放
    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 media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }
     
  • 相关阅读:
    mdx 根据维度Hierarchy节点的名字来filter节点,搜索节点
    学习C++.Primer.Plus 8 函数探幽
    学习C++.Primer.Plus 7 函数
    学习C++.Primer.Plus 6 分支语句和逻辑操作符
    学习C++.Primer.Plus 5 循环和关系表达式
    学习C++.Primer.Plus 4 复合类型
    NYoj_171聪明的kk
    NYoj_104最大和
    希尔排序
    NYoj_49开心的小明
  • 原文地址:https://www.cnblogs.com/wmhuang/p/5452259.html
Copyright © 2011-2022 走看看