网页中插入背景音乐自动播放功能 HTML5页面播放音乐

背景音乐代码标签 embed ，这个基本HTML都支持

用法一：<embed src="css/bnxb.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"

HTML5页面播放音乐其实也很简单，只需要用到<audio>这个HTML5的标签就可以了.

用法：<audio id="bgMusic" src="css/bnxb.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事件调用