多个html5页面背景音乐,HTML5页面背景音乐代码 网页背景音乐通用代码

这篇文章主要为大家详细介绍了HTML5页面背景音乐代码 网页背景音乐通用代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

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

79abc717c7cb35b0be98581da8f6a7ef.png

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实现背景音乐自动播放了。你学会了吗

30b0a7aa2154d9a6403f0fab6a356dae.gif

以上就是HTML5页面背景音乐代码 网页背景音乐通用代码的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值