網頁背景音樂是個比較老舊的問題和技術了，上世紀90年代就是十分流行的了，給自己的網頁加上一段背景音樂輕快而且于感染力，隨著網頁技術的發展，除了少部分音樂站點、個人博客、游戲站點外幾乎很少有使用到網頁背景音樂的地方，當然了這也是武林網小編的個人看法。言歸正傳，來介紹一下我們今天的內容：HTML5頁面背景音樂代碼 網頁背景音樂通用代碼。我們分2個部分來講。

1、網頁背景通用常用代碼embed標簽

用法一：<embed src="css/vevb.mp3" hidden="true" autostart="true" loop="true">

hidden="true"表示隱藏播放，即不顯示播放器的外觀，若要想顯示，把"true" 替換為"false"即可，這樣為默認是最小化播放，若還想具體顯示播放器的大小，另加上height="高度值" width="寬度值" 就可以了。

autostart="true"表示當前頁一載入則自動播放，若不希望播放改為autostart="false"

即可...

loop="true"表示無限次循環播放音樂直到當前頁關閉為止，不想循環播放替換為 loop="false"就OK了

用法二：<embed src="css/bnxb.mp3" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >

loop="-1" 表示無限次循環播放，可設置播放次數，用具體數字代替即可，比如我希望它播放兩次，則loop="2"

controls="ControlPanel"這個控制選項可省略

width="0" height="0"表示隱藏播放，和前面的一樣。

若欲設置播放器的外觀，則替換為具體的數值就可以了，比如width="123" height="100"

2、HTML5頁面播放音樂代碼<audio>標簽

用法：<audio id="bgMusic" src="css/vevb.mp3" autoplay preload loop="loop"></audio>

路徑選在音樂所在位置就行了。

關于點擊按鈕音樂開啟/停止播放的效果做了個簡單的例子

<a class="play" id="audioBtn" style="cursor:pointer;" onclick="autoPlay()"></a>

<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

css樣式代碼:

.pause {            height: 50px;            background: url(images/musicbtn.png) no-repeat;            display: block;            background-position: 0 bottom;        }         .play {            height: 50px;            background: url(images/musicbtn.png) no-repeat;            display: block;        }

JS代碼:

function autoPlay() {            var myAuto = document.getElementById('bgMusic');            var btn = document.getElementById('audioBtn');            if (myAuto.paused) {                myAuto.play();                btn.classList.remove("pause");                btn.classList.add("play");            } else {                myAuto.pause();                 btn.classList.remove("play");                btn.classList.add("pause");            }         }

另外iPhone不會開啟自動播放，需要再加一個js

<script type="text/javascript">        function audioAutoPlay() {            var audio = document.getElementById("bgMusic"),            play = function () {                audio.play();                document.removeEventListener("touchstart", play, false);            };            audio.play();            document.addEventListener("WeixinJSBridgeReady", function () {                play();            }, false);            document.addEventListener('YixinJSBridgeReady', function () {                play();            }, false);            document.addEventListener("touchstart", play, false);        }</script>

最后我們還需要在body的onload事件調用，這樣一個流程下來就實現了HTML5在iPhone實現背景音樂自動播放了。你學會了嗎。