h5添加音乐

时间2024-01-26 17:25:03发布访客分类HTML浏览442

导读：收集整理的这篇文章主要介绍了html5教程-h5添加音乐，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。加入HTML代码，因为是绑定在每一页的右上...

收集整理的这篇文章主要介绍了html5教程-h5添加音乐，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），定位用了fixed，所以在页面底部/body之前加上htML代码

　　source 标签里面对应的音频链接换为自己的音频连接哦。

 网页头部加入CSS代码

 /* music */     @-webkit-keyframes reverseRotataZ{
         0%{
    -webkIT-transform: rotateZ(0deg);
}
         100%{
    -webkit-transform: rotateZ(-360deg);
}
     }
     @-webkit-keyframes rotataZ{
         0%{
    -webkit-transform: rotateZ(0deg);
}
         100%{
    -webkit-transform: rotateZ(360deg);
}
     }
     #musicControl {
     position:fixed;
    right:10px;
    top:20px;
    margin-top:0;
    display:inline-block;
z-index:99999999}
     #musicControl a {
     display:inline-block;
    width:25px;
    height:25px;
    overflow:hidden;
    background:url('./src/images/mcbg.png') no-rePEat;
    background-size:100%;
}
     #musicControl a audio{
    width:100%;
    height:56px;
}
     #musicControl a.stop {
     background-position:left bottom;
}
     #musicControl a.on {
     background-position:0px 1px;
    -webkit-animation: reverseRotataZ 1.2s linear infinite;
}
     #music_play_filter{
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    z-index:99999998;
}

添加对应的JS控制方法

 function play_music(){
         if ($('#mc_play').hasClass('on')){
                 $('#mc_play audio').get(0).pause();
                 $('#mc_play').attr('class','stop');
         }
else{
                 $('#mc_play audio').get(0).play();
                 $('#mc_play').attr('class','on');
         }
             $('#music_play_filter').hide();
             event.stopPRopagation();
 //阻止冒泡      }
     function just_play(id){
             $('#mc_play audio').get(0).play();
             $('#mc_play').attr('class','on');
         if (typeof(id)!='undefined'){
                 $('#music_play_filter').hide();
         }
             event.stopPropagation();
 //阻止冒泡      }
      function is_weixn(){
             return false;
             VAR ua = navigator.userAgent.toLowerCase();
         if(ua.match(/Micromessenger/i)=="micromessenger") {
                 return true;
         }
 else {
                 return false;
         }
     }
         var play_filter=document.getElementById('music_play_filter');
     play_filter.addEventListener('click', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchstart', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchend', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchmove', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mousedown', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mouseup', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mouSEMove',function(){
             just_play(1);
     }
    );
     window.onload=function(){
         if (!is_weixn()){
                 just_play();
         }
     }

这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态。

加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），定位用了fixed，所以在页面底部/body之前加上html代码

　　source 标签里面对应的音频链接换为自己的音频连接哦。

 网页头部加入CSS代码

 /* music */     @-webkit-keyframes reverseRotataZ{
         0%{
    -webkit-transform: rotateZ(0deg);
}
         100%{
    -webkit-transform: rotateZ(-360deg);
}
     }
     @-webkit-keyframes rotataZ{
         0%{
    -webkit-transform: rotateZ(0deg);
}
         100%{
    -webkit-transform: rotateZ(360deg);
}
     }
     #musicControl {
     position:fixed;
    right:10px;
    top:20px;
    margin-top:0;
    display:inline-block;
z-index:99999999}
     #musicControl a {
     display:inline-block;
    width:25px;
    height:25px;
    overflow:hidden;
    background:url('./src/images/mcbg.png') no-repeat;
    background-Size:100%;
}
     #musicControl a audio{
    width:100%;
    height:56px;
}
     #musicControl a.stop {
     background-position:left bottom;
}
     #musicControl a.on {
     background-position:0px 1px;
    -webkit-animation: reverseRotataZ 1.2s linear infinite;
}
     #music_play_filter{
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
    z-index:99999998;
}

添加对应的JS控制方法

 function play_music(){
         if ($('#mc_play').hasClass('on')){
                 $('#mc_play audio').get(0).pause();
                 $('#mc_play').attr('class','stop');
         }
else{
                 $('#mc_play audio').get(0).play();
                 $('#mc_play').attr('class','on');
         }
             $('#music_play_filter').hide();
             event.stopPropagation();
 //阻止冒泡      }
     function just_play(id){
             $('#mc_play audio').get(0).play();
             $('#mc_play').attr('class','on');
         if (typeof(id)!='undefined'){
                 $('#music_play_filter').hide();
         }
             event.stopPropagation();
 //阻止冒泡      }
      function is_weixn(){
             return false;
             var ua = navigator.userAgent.toLowerCase();
         if(ua.match(/MicroMessenger/i)=="micromessenger") {
                 return true;
         }
 else {
                 return false;
         }
     }
         var play_filter=document.getElementById('music_play_filter');
     play_filter.addEventListener('click', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchstart', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchend', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('touchmove', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mousedown', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mouseup', function(){
             just_play(1);
     }
    );
     play_filter.addEventListener('mousemove',function(){
             just_play(1);
     }
    );
     window.onload=function(){
         if (!is_weixn()){
                 just_play();
         }
     }

这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态。

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Class CSS div HTML post-format-gallery Prop

若转载请注明出处： h5添加音乐
本文地址： https://pptw.com/jishu/587057.html

HTML5之按钮背景不同动画特效设计【BootStrap】陌生=》熟悉=》惊喜