• 解决iphone 微信H5自动播放音乐问题


    • 首先, 在html中定义audio 标签的 autoplay属性
    • <audio id="musicStar" src="文件路径" autoplay="true" preload="auto" loop="loop"></audio>
    • 其次,在body结尾处添加重定义的audioAutoPlay方法
    • function audioAutoPlay(id){
              var audio = document.getElementById(id);
              var play = function(){
                  audio.play();
                  audio.pause();
                  document.removeEventListener("touchstart",play, false);
              };
              audio.play();
              document.addEventListener("touchstart",play, false);
      }
    • 最后,需要在页头微信浏览器准备好以后,调用 audioAutoPlay方法
    • document.addEventListener("WeixinJSBridgeReady", function () {
                  audioAutoPlay('musicStar');
                  /**musicStar为音乐audio的 id**/
          }, false);
    • 综合所有

    • <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no">
          <meta content="yes" name="apple-mobile-web-app-capable">
          <meta content="black" name="apple-mobile-web-app-status-bar-style">
          <meta content="telephone=no" name="format-detection">
          <meta name="msapplication-tap-highlight" content="no">
          <script>
          /**微信环境中**/
              document.addEventListener("WeixinJSBridgeReady", function () {
                  audioAutoPlay('musicStar');
              }, false);
          </script>
      </head>
      <body>
      ...
      <audio id="musicStar" src="source/music.mp3" autoplay="true" preload="auto" loop="loop"></audio>
      </body>
      <script>
          function audioAutoPlay(id){
                  var audio = document.getElementById(id);
                  var play = function(){
                      audio.play();
                     //audio.pause(); 可以在控制打开页面不播放,在没有触屏点击的过程中的一段时间后播放,如预加载完成后播放设置audio的autoplay属性为false
                                                                  
                  document.removeEventListener("touchstart",play, false);
           };
                  audio.play();
                  audio.pause(); 
                  document.addEventListener("touchstart",play, false);
          }
          //如需要加载完成后的某个时间播放,可在相应的状态先后执行暂停播放,设置音乐播放,无需点击屏幕,都可自动播放,并且点击屏幕后也不会暂停。
          //暂停播放调用
          function completeFun(){
              musicStar.pause();
              musicStar.play();
          }
      </script>
      </html>
  • 相关阅读:
    Python 标准库 BaseHTTPServer 中文翻译
    DBA Scripts
    cordova开发自己定义插件
    ASUS主板ALC887声卡,RTL81XX网卡,黑苹果驱动安装
    com.apple.installer.pagecontroller 错误 -1 pkg安装错误
    Apple 远程推送APNS 服务
    bitbucket git push 项目503失败
    在xcode5下利用Source Control 做 git 项目管理
    iOS设备定位服务开启判定
    has been modified since the precompiled header地图错误
  • 原文地址:https://www.cnblogs.com/hlhs/p/11157401.html
Copyright © 2020-2023  润新知