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

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

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

做了个漂亮的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程序中添加复制版权信息的代码,这里介绍的文章头部或者底部显示版权信息,以及复制自动复制版权信息的代码及其使用方法比较简单,操作也非常方便,适合广大朋友借鉴使用…

修改zblog版权信息及对删除的个人看法

我博客底部的内容有Powered By Z-Blog,这部分是保留zblog的版权信息的,这说明本博客系统采用的是zblog程序,并有表示感谢的意思,所以除非人家明说授权任你修改删除,否则最好保留…

zblog博客管理手记

没有放任自己的zblog博客不管,偶尔还是做了一些小小的修改和调整,并处理一些特别垃圾的评论。这也许就是所谓的博客打理了吧,博客成长的一些细节和小小的经历,随手而记,也可以供以后遇到类似问题时查找参考…

zblog邮箱设置为必填选项

前两天花满山也和我提到个人博客网站很多垃圾留言评论的问题,这个问题让我很汗颜,垃圾评论已经严重损害了个人博客网站的健康,同时给广大人民群众带来非常严重的负面影响,所以我解决此问题并顺便介绍了zblog…

zblog验证码加字母后无法显示不全

zblog1.8版中,把验证码修改为数字0-9,再加26个小字母,发现后台登录不了了,不要担心,经过乾元轩个人博客网站的亲身体验,找到一种简单的解决方案了,方法很简单,只需要几步就可以让zblog模板…

靠谱助手 BlueStacks安卓模拟器使用说明程序下载

注意:本文提供安卓模拟器BlueStacks和靠谱助手的使用介绍和程序下载,需要的话,请继续往下文看。BlueStacks安卓模拟器下载地址:http://pan.baidu.com/s/1pJ8u4…

发表评论

访客

看不清,换一张

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