h5添加音乐

http://changziming.com/post-209.html

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

  <span id="musicControl">
          <a id="mc_play" class="stop" onclick="play_music();">
              <audio id="musicfx" loop="loop" autoplay="autoplay">
                  <source src="./src/audio/audio.mp3" type="audio/mpeg">
              </audio>
          </a>
   </span>
  

  　　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;25px;height:25px;overflow:hidden;background:url('./src/images/mcbg.png') no-repeat;background-size:100%;}
      #musicControl a audio{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{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();
            }
        } 

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

  • demo演示：http://changziming.com/demo/audioplay/