HTML5页面背景音乐代码 网页背景音乐通用代码

网页背景音乐是个比较老旧的问题和技术了，上世纪90年代就是十分流行的了，给自己的网页加上一段背景音乐轻快而且于感染力，随着网页技术的发展，除了少部分音乐站点、个人博客、游戏站点外几乎很少有使用到网页背景音乐的地方，当然了这也是错新网小编的个人看法。言归正传，来介绍一下我们今天的内容：HTML5页面背景音乐代码 网页背景音乐通用代码。我们分2个部分来讲。

1、网页背景通用常用代码embed标签

用法一：<embed src="css/cuoxin.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/cuoxin.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实现背景音乐自动播放了。你学会了吗。