zoukankan      html  css  js  c++  java
  • 【前端】h5音乐播放demo 可关闭可播放

    复制如下代码,直接可预览(记得把超链接换成自己本地路径)

    <!DOCTYPE html>

    <html>

     

     <head>

      <meta charset="UTF-8">

      <title>music</title>

      <!--jq类似文件需要-->

      <script src="../../../static/js/common/zepto.min.2.js"></script>

     

      <style type="text/css">

       /*音乐*/  

       audio {

        display: inline;

        float: left;

       }

       

       .music:active {

        text-decoration: none;

       }

       

       .music {

        2.5rem;

        height: 2.5rem;

        text-align: center;

        /*line-height: 80px;*/

        background: url(https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/common/off.png);

        background-size: 100%;

        position: absolute;

        top: 1.6rem;

        right: 1rem;

        float: left;

        z-index: 10000;

        border-radius: 50%;

       }

       

       .music-off {

        background: url(https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/images/common/on.png);

        background-size: 100% 100%;

       }

       

       .music-ani {

        animation: musicRound 1s infinite linear;

        -webkit-animation: musicRound 1s infinite linear;

       }

       

       @keyframes musicRound {

        0% {

         transform: rotate(0deg)

        }

        100% {

         transform: rotate(360deg);

        }

       }

       

       @-webkit-keyframes musicRound {

        0% {

         -webkit-transform: rotate(0deg)

        }

        100% {

         -webkit-transform: rotate(360deg);

        }

       }

       

       .disn {

        display: none;

       }

      </style>

     </head>

     

     <body>

      <!--music-->

      <div class="music music-ani"></div>

      <audio id="audio01" src="http://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/active_common/reliable_art/reliable_art.mp3" loop="loop"></audio>

      <!--end-->

      <!--music文件放尾部,负责播放有影响-->

      <script src="https://topmdrt-static.oss-cn-shenzhen.aliyuncs.com/static/js/common/music.js"></script>

      <!--苹果系统播放兼容问题需要引入-->

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

      

     </body>

     

    </html>

     

    效果如下:

     

    更多学习交流qq:844271163

     music.js文件内容

    $('audio').get(0).play();$('.music').addClass('on music-off');$('.music').on('click',function(){if($(this).hasClass('on')){$('audio').get(0).pause();$(this).removeClass('on music-off');$(this).removeClass('music-ani')}else{$('audio').get(0).play();$(this).addClass('on music-off');$(this).addClass('music-ani')}});var timerHide;function audioAutoPlay(id){var audio=document.getElementById(id);audio.play();document.addEventListener("WeixinJSBridgeReady",function(){audio.play()},false)}audioAutoPlay('audio01');

     

  • 相关阅读:
    drf认证组件
    播放音频
    推荐
    makefile编写
    qt文件操作mv
    qt文件http网络下载
    为qt在window上用源代码编译库 (部分转载)
    qt线程池(转)
    crc校验
    树莓派网络配置查询
  • 原文地址:https://www.cnblogs.com/xiaohuizhang/p/8624308.html
Copyright © 2011-2022 走看看