大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
这篇文章主要为大家详细介绍了HTML5页面背景音乐代码 网页背景音乐通用代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。
网页背景音乐是个比较老旧的问题和技术了，上世纪90年代就是十分流行的了，给自己的网页加上一段背景音乐轻快而且于感染力，随着网页技术的发展，除了少部分音乐站点、个人博客、游戏站点外几乎很少有使用到网页背景音乐的地方，当然了这也是织梦361小编的个人看法。言归正传，来介绍一下我们今天的内容：HTML5页面背景音乐代码 网页背景音乐通用代码。我们分2个部分来讲。
1、网页背景通用常用代码embed标签
用法一：
hidden=”true”表示隐藏播放，即不显示播放器的外观，若要想显示，把”true” 替换为”false”即可，这样为默认是最小化播放，若还想具体显示播放器的大小，另加上height=”高度值” width=”宽度值” 就可以了。
autostart=”true”表示当前页一载入则自动播放，若不希望播放改为autostart=”false”
即可…
loop=”true”表示无限次循环播放音乐直到当前页关闭为止，不想循环播放替换为 loop=”false”就OK了
用法二：
loop=”-1″表示无限次循环播放，可设置播放次数，用具体数字代替即可，比如我希望它播放两次，则loop=”2″
controls=”ControlPanel”这个控制选项可省略
width=”0″ height=”0″表示隐藏播放，和前面的一样。
若欲设置播放器的外观，则替换为具体的数值就可以了，比如width=”123″ height=”100″
2、HTML5页面播放音乐代码标签
用法：
路径选在音乐所在位置就行了。
关于点击按钮音乐开启/停止播放的效果做了个简单的例子
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
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);
}
最后我们还需要在body的onload事件调用，这样一个流程下来就实现了HTML5在iPhone实现背景音乐自动播放了。你学会了吗
。
以上就是HTML5页面背景音乐代码 网页背景音乐通用代码的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持361模板网。
感谢打赏，我们会为大家提供更多优质资源！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189869.html原文链接：https://javaforall.net
