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, ' '); } }
移动端背景音乐js
最新推荐文章于 2021-10-10 18:35:41 发布