• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

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

    发布者: 土豆服务器 | 发布时间: 2025-6-16 12:21| 查看数: 102| 评论数: 0|帖子模式

    这里推荐两种方法,就是两个标签 <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添加背景音乐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:https://www.jb51.net/html5/775126.html
    免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

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