背景音乐插件

前言###

做h5专题的时候我们经常需要添加背景音乐，重复的添加audio标签和控制已经让人厌烦，先本人本着社会主义精神将背景音乐所需要的代码进行封装(其实很早之前华哥就做过了)。使用的是函数式封装，而没有使用对象，因为感觉太简单不需要创建对象。

使用方法###

<script src="http://www1.pconline.com.cn/zt/20160621/Gbgmusic_min.js"></script>
<script>
 var bgMusic = new GbgMusic("http://www1.pconline.com.cn/zt/20160608/biyadi/bg.mp3");
</script>

API说明###

1. 创建背景音乐对象：
   如果手机支持背景音乐自动播放，则创建完对象后自动播放音乐。如果手机不支持自动播放背景音乐，则需要网友点击下页面或者点击下音乐播放按钮。

var bgMusic = new GbgMusic(src,top,left); //top、left可以省略默认是15px;

1. 阻止自动播放

 bgMusic.stopAuto();

1. 停止音乐

 bgMusic.pause();

1. 播放音乐

 bgMusic.play();

1. 返回dom形式的音乐对象

 bgMusic.getAudio();

demo###

http://www1.pconline.com.cn/zt/20160621/bgmusic.html

插件地址###

压缩版插件地址：http://www1.pconline.com.cn/zt/20160621/Gbgmusic_min.js

源代码###

/*初始化GbgMusic获取背景音乐对象*/
function GbgMusic(src,top,right){
      return new _GbgMusic(src,top,right);
}
function _GbgMusic(src,top,right){
      this.src=src;
      this.top=top;
      this.right=right;
      this.audio=null;
      this.musicBtn=null;
      this.hasStop=false;
      this.init();
}
//背景音乐初始化，背景音乐默认是自动播放且循环播放
_GbgMusic.prototype.init=function(){
      var musicBtn=this.musicBtn=document.createElement("div"),
          audio = this.audio=document.createElement("audio"),
          styleNode = document.createElement("style");
          styleNode.innerText=".GmusicBtn{ 80px;height: 80px;overflow: hidden;position: absolute;top:"+(this.top?this.top:15)+"px;right:"+(this.right?this.right:15)+"px;z-index: 1000;background-image: url(http://www1.pconline.com.cn/zt/20160309/changma/image/other/playerBtn.png);background-repeat: no-repeat;background-position:0px 0px;}@-webkit-keyframes Grotate{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}.Grotate{-webkit-animation:Grotate 5s linear infinite;}";
        var bodyNode=document.getElementsByTagName("body")[0];
        var frag = document.createDocumentFragment();
        frag.appendChild(styleNode);
        frag.appendChild(musicBtn);
        frag.appendChild(audio);
        bodyNode.appendChild(frag);
        musicBtn.className="GmusicBtn Grotate";
        audio.src=this.src;
        audio.setAttribute("loop","loop");
        audio.setAttribute("autoplay","autoplay");
        var that = this;
        bodyNode.addEventListener("touchstart",function(){
            if(!that.hasStop){
                that.musicPlay();
            }
            bodyNode.removeEventListener("touchstart",arguments.callee);
        },false)
       musicBtn.addEventListener("touchstart",function(e){
           e.stopPropagation();
           if(!audio.paused){
               that.musicPause();
           }else{
               that.musicPlay();
           }
       },false)
}
_GbgMusic.prototype.musicPlay=function(){
      var audio=this.audio,
      musicBtn=this.musicBtn;
      if(audio.paused){
          musicBtn.style.backgroundPositi 0px";
          musicBtn.className="GmusicBtn Grotate";
          audio.play();
      }
}
_GbgMusic.prototype.musicPause=function(){
      var audio=this.audio,
      musicBtn=this.musicBtn;
      if(!audio.paused){
          this.hasStop=true;
          musicBtn.style.backgroundPositi -80px";
          musicBtn.className="GmusicBtn";
          audio.pause();
      }
}
//停止自动播放
_GbgMusic.prototype.stopAuto=function(){
      var audio=this.audio,
      musicBtn=this.musicBtn;
      this.hasStop=true;
      audio.removeAttribute("autoplay","autoplay");
      musicBtn.style.backgroundPositi -80px";
      musicBtn.className="GmusicBtn";
      audio.pause();
}
// 播放音乐
_GbgMusic.prototype.play=function(){
      this.musicPlay();
}
// 暂停音乐
_GbgMusic.prototype.pause=function(){
      this.musicPause();
}
//返回audio对象
_GbgMusic.prototype.getAudio=function(){
      return this.audio;
}