zoukankan      html  css  js  c++  java
  • js-html音乐播放

    <img src="images/music.png" id="music" class="rotate">
    <audio src="images/music.mp3?v=982" autoplay="autoplay" loop id="muc"></audio>

    css

    /*音乐*/#music {

        position: fixed;
        top: 3%;
        right: 16px;
        z-index: 9999999;
      }
    .rotate {
       animation: circle 2s linear infinite;
      }
    @keyframes circle{

    100% {
         transform: rotate(360deg);
      }
    }

    js

    var mus = document.getElementById("music");
    var audio = document.getElementById("muc");
    mus.onclick = function() {
                 if(audio.paused) {
                              audio.play();
                              mus.classList.add("rotate");
                 } else {
                             audio.pause();
                             mus.classList.remove("rotate");
                  }
    }

    function audioAutoPlay(id) {
        var audio = document.getElementById(id),
        play = function() {
              audio.play();
        document.removeEventListener("touchstart", play, false);
        };
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function() {
              play();
        }, false);

        document.addEventListener('YixinJSBridgeReady', function() {
             play();
        }, false);
        document.addEventListener("touchstart", play, false);
        }
    audioAutoPlay('music');

    针对IOS以上代码不支持打开页面自动播放

    搬运工: http://www.mamicode.com/info-detail-1505268.html

    2018-5-12日周六加班!!!!因为项目下午要上线,需要兼容ios音乐自动播放,且已经解决问题,在此做一个笔记也可以帮助看到这篇笔记的盆友

    1.首先是要链接js:

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

    2.页面添加:

    document.addEventListener("WeixinJSBridgeReady", function () {
         WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                  document.getElementById('allMusic1').play();
          });
    }, false);

     ok以上就是我项目中兼容ios时写的代码

  • 相关阅读:
    告别ThinkPHP6的异常页面, 让我们来拥抱whoops吧
    ThinkPHP6 上传图片代码demo
    【ThinkPHP6:从TP3升级到放弃】1. 前言及准备工作
    PHP数字金额转换大写金额
    提高PHP开发效率, PhpStorm必装的几款插件
    5分钟弄懂Docker!
    GitHub 上排名前 100 的 IOS 开源库简介
    GitHub 上排名前 100 的 Android 开源库简介
    android线程消息传递机制——Looper,Handler,Message
    Android Activity:四种启动模式,Intent Flags和任务栈
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/7772701.html
Copyright © 2011-2022 走看看