zoukankan      html  css  js  c++  java
  • 解决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>
  • 相关阅读:
    LCD编程_显示文字
    LCD编程_画点线圆
    LCD编程_简单测试
    LCD编程框架组织
    LCD编程_LCD控制器
    编程——抽象出重要的结构体
    LCD裸板编程_框架
    S3C2440_LCD控制器
    关于加密与解密的问题。
    [13期]mysql-root全手工注入写马实例实战
  • 原文地址:https://www.cnblogs.com/hlhs/p/11157401.html
Copyright © 2011-2022 走看看