背景音乐 · TP5常用代码

背景音乐部分跟视频播放部分出了点小问题，后来解决了，记录一下。背景音乐基本需求：在背景右上角定位一个音乐开关，打开H5时自动播放，播放时开关一直旋转，点击关闭音乐，开关不旋转，还有如果播放视频时，音乐自动停止。 [TOC] ## 前言做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说明 ### 创建背景音乐对象：如果手机支持背景音乐自动播放，则创建完对象后自动播放音乐。如果手机不支持自动播放背景音乐，则需要网友点击下页面或者点击下音乐播放按钮。 ~~~ var bgMusic = new GbgMusic(src,top,left); //top、left可以省略默认是15px; ~~~ ### 阻止自动播放 ~~~ bgMusic.stopAuto(); ~~~ ### 停止音乐 ~~~ bgMusic.pause(); ~~~ ### 播放音乐 ~~~ bgMusic.play(); ~~~ ### 返回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{width: 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; } ~~~ ## 参考网址 H5页面背景音乐，C33 360°旋转效果 https://www.cnblogs.com/shizq/p/5658539.html H5分享页面背景音乐及播放视频 https://blog.csdn.net/weixin_42423019/article/details/80733601