移动端背景音乐js

var playState=true;
var spanId=1;

function _$(name){
    return document.getElementById(name);
}
function playMusic(){
    var oMusicWrap=_$("audio-container");
    var sBgHtml,sBoxHtml,sTxtHtml;


    if(oMusicWrap!=undefined){
        oMusicWrap.innerHTML='<audio id="msBgSound" loop="loop" autoplay="autoplay" src="1.mp3"></audio>';
    }

    var oMusic=_$("msBgSound");
    oMusic.play();
    var oMusicDiv=document.createElement("div");
    oMusicDiv.setAttribute("id","bgSoundDiv");
    oMusicDiv.style.cssText="position:fixed;right:20px;top:20px;z-index:9999;visibility:visible;cursor:pointer";
    oMusicDiv.onclick=controlMusic;

    if(document.body.offsetWidth>400){
         sBgHtml="<img id='soundImg'  src='img/music_note_big.png'/>";
         sBoxHtml="<div id='noteBox' style='height: 100px;width: 44px;position: absolute;left: -20px;top: -80px'></div>";
    }else{
        sBgHtml="<img id='soundImg' width='30px'  src='img/music_note_big.png'/>";
        sBoxHtml="<div id='noteBox' style='height: 100px;width: 44px;position: absolute;left: -5px;top: -80px'></div>";
    }
    sTxtHtml="<div id='musicText' style='color: #ffffff;position: absolute;left: -40px;top:30px;width: 60px'></div>";

    oMusicDiv.innerHTML=sBgHtml+sBoxHtml+sTxtHtml;
    document.body.appendChild(oMusicDiv);
    setTimeout("popupNode()",100);
    addThisClass(_$("soundImg"),'playing');

}
    //music control
    function controlMusic(){
        var oS=_$("msBgSound"),
            oI=_$("soundImg");
        if(oS.paused){
            oS.play();
            oI.src="img/music_note_big.png";
            playState=true;
            popupNode();
            _$("musicText").innerHTML="播放";
            _$("musicText").style.visibility="visible";
            addThisClass(oI,'playing');
            setTimeout(function(){
                _$("musicText").style.visibility="hidden";
            },2000);
        }else{
            playState=false;
            oS.pause();
            oI.src="img/music_note_big.png";
            _$("musicText").innerHTML="暂停";
            _$("musicText").style.visibility="visible";
            removeThisClass(oI,'playing');
            setTimeout(function(){
                _$("musicText").style.visibility="hidden";
            },2000);
        }
    }

    //popup node control
    function popupEnd(event){
        var oNodeSpan=event.target;
        if(oNodeSpan.parentNode == _$("noteBox")){
            _$("noteBox").removeChild(oNodeSpan);
        }
    }
    function popupNode(){
        var oBox=_$("noteBox");
        var oSpanNode=document.createElement("span");
        oSpanNode.style.cssText="visibility:visible;position:absolute;background-image:url('img/music_note_small.png');width:15px;height:25px;";
        oSpanNode.style.left=Math.random()*20+20;
        oSpanNode.style.top="75px";
        var nThisNode='musicNode-'+spanId;
        oSpanNode.setAttribute("id",nThisNode);
        spanId+=1;
        var scale=Math.random()*0.4+0.4;
        oSpanNode.style.webkitTransform="rotate("+Math.floor(360*Math.random())+"deg) scale("+scale+","+scale+")";
        oSpanNode.style.transform="rotate("+Math.floor(360*Math.random())+"deg) scale("+scale+","+scale+")";
        oSpanNode.style.webkitTransition="top 2s ease-in,opacity 2s ease-in,left 2s ease-in";
        oSpanNode.style.transition="top 2s ease-in,opacity 2s ease-in,left 2s ease-in";

        oSpanNode.addEventListener("webkitTransitionEnd",popupEnd);
        oSpanNode.addEventListener("transitionend",popupEnd);
        oBox.appendChild(oSpanNode);

        setTimeout("document.getElementById('"+nThisNode+"').style.left='0px';",100);
        setTimeout("document.getElementById('"+nThisNode+"').style.top='0px';",100);
        setTimeout("document.getElementById('"+nThisNode+"').style.opacity='0';",100);

        if(playState){
            setTimeout("popupNode()",600);
        }

    }

    //add+remove class
    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addThisClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }

    function removeThisClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }