当前位置:首页 > 数字化与技术

【技术】html5网页添加音乐按钮并自动循环播放方法

文玑阁9年前 (2018-01-25)数字化与技术33860

做了个漂亮的html5页面,想要添加一个音乐效果,并且打开网页自动运行,还能循环播放,处理方法可以这样做。见代码:

首先,实现音乐播放功能,看代码实现:

<audio controls="controls">
  <source src="你的url/i/song.ogg" type="audio/ogg">
  <source src="你的url/i/song.mp3" type="audio/mpeg">
  <embed height="200" width="200" src="你的url/i/song.mp3" />
</audio>

这里设置了.ogg格式和.mp3格式,可以兼容部分浏览器和移动终端。具体.ogg和.mp3格式等格式转换可以用酷狗音乐或者其他格式转换软件。

其次,如要打开网页自动播放音乐,就加一个代码 autoplay="autoplay":

<audio controls="controls" autoplay="autoplay">
  <source src="你的url/i/song.ogg" type="audio/ogg">
  <source src="你的url/i/song.mp3" type="audio/mpeg">
  <embed height="200" width="200" src="你的url/i/song.mp3" />
</audio>

最后,如果要循环播放,就加代码 loop="loop":

<audio controls="controls" autoplay="autoplay" loop="loop">
  <source src="你的url/i/song.ogg" type="audio/ogg">
  <source src="你的url/i/song.mp3" type="audio/mpeg">
  <embed height="200" width="200" src="你的url/i/song.mp3" />
</audio>

方法简单,可以尝试一下。

分享给朋友:

相关文章

关于zblog程序手机版的一点想法

玩博客的人,特别是老家不在自己目前所在地或者常常出远门的人,都会遇到这个问题,博客,特别是自己苦心经营的个人网站可能会在自己回老家或者其他没有网络使用的情况下被自己冷落,于是我研究了一下zblog手机…

关于博客留言评论

谁人开个人博客,都希望留言多多,评论多多,不过,要是有很多垃圾留言评论,想必也是甚为苦恼,挚诚的评论才是令人愉快、令人满足的,即便只是短短几个字的言语…

Windows组件没有Internet信息服务(IIS)选项解决设置方法

通过控制面板的添加删除程序,不少人都会遇到Windows组件没有Internet信息服务(IIS)选项的情况,当然这针对需要安装IIS服务器的人来说,但是我们可以通过一些方法来恢复Windows组件中…

ZBtoSnWb新浪微博插件无法调用摘要解决

使用ZSXSOFT开发的zblog新浪微博插件更新文章或者修改文章的时候,摘要无法显示,通过对插件的修改可以修复这一个问题,这个修改方法也简单,只需要在该插件include.asp文件的代码里加入一句…

linux系统root密码忘记修改办法

linux系统root密码忘记修改办法

linux系统Root密码忘了怎么办?解决办法(图解请下载附件) Root密码忘了就这么办!这个方法菜鸟实践证明可行!1.在开机启动的时候能看到这个引导目录(3秒将进入默认),用上下方向键选择你要进入…

zblog2.1首页title标题显示顺序调整

zblog2.1首页title标题显示顺序调整

ZBLOG升级为Z-Blog 2.1 Phoenix Build 130128之后,对模板进行了优化,所有展示网页的head部分都集成到一个文件里,详见根目录\zb_users\THEME\主题包\T…

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。