html5教程-h5添加音乐

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

 网页头部加入CSS代码

 /* music */     @- webkit -keyfr am es  rev erseRotataZ{         0%{-webk IT  -t ransform: rotateZ(0 deg );}         100%{-webkit-transform: rotateZ(- 360 deg);}     }     @-webkit-keyframes rotataZ{         0%{-webkit-transform: rotateZ(0deg);}         100%{-webkit-transform: rotateZ(360deg);}     }      # musicControl { position:fixed;right:10px;top:20px ;m  arg in-top:0;dis play :inline-block;z -i ndex:99999999}     #musicControl a { display:inline-block;width:25px;h ei ght:25px;overflow:hidden;background:url('./src/images/mcbg.png') no-re PE at; 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.stop PR opagation(); //阻止冒泡      }     function just_play(id){         $('#mc_play audio').get(0).play();         $('#mc_play').attr('class','on');         if (typeof(id)!='un define d'){             $('#music_play_filter').hide();         }         event.stopPropagation(); //阻止冒泡      }      function is_weixn(){         return false;          VAR  ua = navigator.userAgent.toLowerCase();         if(ua.match(/Mic rom essenger/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('mou SEM ove',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;mar gin -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();         }     } 

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

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

总结

以上是 为你收集整理的 html5教程-h5添加音乐 全部内容，希望文章能够帮你解决 html5教程-h5添加音乐 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-h5添加音乐的详细内容...