前端h5音乐播放demo 可关闭可播放

Posted xiaohuizhang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端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 {

    width: 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‘);

 

以上是关于前端h5音乐播放demo 可关闭可播放的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序音频播放之音乐播放器

H5的音视频自动播放问题

H5音乐播放方案

h5 音乐播放

安卓多米音乐播放器怎么设置音效

Js控制HTML5 Audio 音乐播放和关闭