背景音樂部分跟視頻播放部分出了點小問題，后來解決了，記錄一下。 背景音樂基本需求：在背景右上角定位一個音樂開關，打開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