快捷搜索:   服务器  PHP  安全  IIS  linux 安全

网页中插入背景音乐自动播放功能 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事件调用

顶(0)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论