设为首页收藏本站

安徽论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 8004|回复: 0

HTML5简单实现添加背景音乐的几种方法

[复制链接]

85

主题

0

回帖

267

积分

中级会员

Rank: 3Rank: 3

积分
267
发表于 2022-3-26 10:56:45 | 显示全部楼层 |阅读模式
网站内容均来自网络,本站只提供信息平台,如有侵权请联系删除,谢谢!
这里推荐两种方法,就是两个标签 <embed> 或者<audio >
常用 <audio > +css布局 隐藏播放器 做网站比较实用!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>html5添加音乐</title>
  5.     <meta charset="utf-8">
  6.    
  7. <embed src="C:\Users\傲慢与偏见\Music\泠鸢yousa - 相思引.mp3" hidden="flase" autostart="true" loop="true">

  8. <!--embed标签写在<head>里面的title标签下-->
  9. 说明:
  10. 1、src毫无疑问写路径.
  11. 2、使用hidden="true"表示隐藏音乐播放按钮,相反使用hidden="false"表示开启音乐播放按钮。
  12. 3、使用autostart="true" 表示是打开网页加载完后自动播放。
  13. 4、使用loop="true"表示 循环播放 如仅想播放一次则为:loop="false"

  14. </head>

  15. <body>
  16. <audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"
  17.             src="C:\Users\傲慢与偏见\Music\泠鸢yousa - 相思引.mp3">      
  18. </audio>
  19. 说明:
  20. 1、使用autoplay="autoplay",则背景音乐将在音网页打开后就自动马上播放。

  21. 2、使用controls="controls",则为了在页面内显示显示控件,如播放按钮。

  22. 3、使用"loop="loop",则是为了是背景音乐重复播放。

  23. 4、使用preload="auto",则音频在页面加载的同时进行加载,并预备播放。

  24. 5、使用src="",即是在""内加入背景音乐的保存路径,如:src=""。

  25. 注:若是想播放按钮隐藏,则使用以下语句:

  26. 直接使用css 的display控制audio标签的显示:
  27. <style type="text/css">
  28. audio{
  29.          display: none;
  30.      }
  31. </style>
  32. </body>
  33. </html>
复制代码
还有个<bgsound>标签:
<bgsound> 标签 为 IE
<embed> 为其它
一般用法 :
  1. <bgsound src=" " autostart="true" loop="false" />

  2. <embed src=" " autostart="true" loop="false" />
复制代码
我搞了半天bgsound就是没声音 ,可能的原因:<bgsound >标签在IE内核里是不会被直接读取的,所以em…
解决:在判断为IE内核时 把两个标签都加载进去 ,而已<embed>标签要在<bgsound>前,并且将自动播放设置为 autostart=“false”;
到此这篇关于HTML5简单实现添加背景音乐的几种方法的文章就介绍到这了,更多相关HTML5添加背景音乐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
                                                                                               
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
免责声明
1. 本论坛所提供的信息均来自网络,本网站只提供平台服务,所有账号发表的言论与本网站无关。
2. 其他单位或个人在使用、转载或引用本文时,必须事先获得该帖子作者和本人的同意。
3. 本帖部分内容转载自其他媒体,但并不代表本人赞同其观点和对其真实性负责。
4. 如有侵权,请立即联系,本网站将及时删除相关内容。
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表