HTML——添加网页背景音乐[通俗易懂]

HTML——添加网页背景音乐[通俗易懂]方式一:<videocontrols=””autoplay=””name=”media”><sourcesrc=”音乐”type=”audio/mpeg”></video><videocontrols=”true”autoplay=”true”name=”media”loop=”true”hidden=”true”>…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

方式一:

<video controls="" autoplay="" name="media"> <source src="音乐" type="audio/mpeg"></video>
<video controls="true" autoplay="true" name="media" loop="true" hidden="true"> <source src="音乐链接" type="audio/mpeg"></video>

 

方式二:

在<head></head>中的title标签之下添加以下这行代码

<embed src="music/We Don't Talk Anymore.mp3" autostart="true" loop="true" hidden="true"></embed>

这个方式主要是支持的播放器多。一定程度上解决了浏览器兼容的问题。

说明:

1、src=””,在””内添加你音乐的保存路径。
2、使用hidden=”true”表示隐藏音乐播放按钮,相反使用hidden=”false”表示开启音乐播放按钮。
3、使用autostart=”true” 表示是打开网页加载完后自动播放。
4、使用loop=”true”表示 循环播放 如仅想播放一次则为:loop=”false”
 

方式三:

<audio autoplay="" loop=""> <source src="http://mi.0w0.im/Letter_Song.mp3"></audio>

    这个不显示播放器。

 

方式四:

<bgsound src=背景音乐链接地址 loop=-1>
<bgsound src="音乐保存的绝对路径" autostart=true loop=infinite> 

说明:1、使用autostart=true,表示音乐在网页加载同时加载音乐,打开网页时音乐自动播放。

方式五:

<audio src="music/We Don't Talk Anymore.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>

说明:

1、使用autoplay=”autoplay”,则背景音乐将在音网页打开后就自动马上播放。

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

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

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

5、使用src=””,即是在””内加入背景音乐的保存路径,如:src=”web网页制作\03.mp3″。

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

    直接使用css 的display控制audio标签的显示:

<style type="text/css">
     audio{
             display: none;
         }
</style>

 

参考文章

https://www.w3school.com.cn/html/html_audio.asp 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/189688.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月10日 下午7:22
下一篇 2026年3月10日 下午8:01


相关推荐

  • pycharm中import pandas 无效

    pycharm中import pandas 无效C Users Administrato condarc 文件中 channels 中的 https 改为 http 如下 channels http mirrors tuna tsinghua edu cn anaconda pkgs main http mirrors tuna tsinghua edu cn anaconda pkgs rhttp mirrors tuna tsinghua edu cn anaconda pkgs msys2

    2026年3月27日
    2
  • C语言switch语句的用法详解_c语言switch语句例题

    C语言switch语句的用法详解_c语言switch语句例题C语言虽然没有限制ifelse能够处理的分支数量,但当分支过多时,用ifelse处理会不太方便,而且容易出现ifelse配对出错的情况。例如,输入一个整数,输出该整数对应的星期几的英文表示:#includeintmain(){inta;printf(“Inputintegernumber:”);scanf(“%d”,&a);if(a==1){printf(“Mo…

    2022年8月30日
    4
  • 数电设计–交通灯控制系统「建议收藏」

    数电设计–交通灯控制系统「建议收藏」一、课程设计的内容题目:交通灯控制系统交通灯控制系统时典型的数字电路系统,通过该系统的设计、仿真、制板、答辩和报告等环节,同学可得到数字电路及系统的综合训练。本课程要求设计一个十字路口的交通灯控制器,控制A、B两条交叉道路上的车辆通行。具体要求如下:(1)在十字路口,主、支干道分别设置一组信号灯,每组信号灯由红、黄、绿等表示允许通行,红灯表示禁止通行,黄灯表示该车道上已过停车线的车辆继续通信,未过停车线的车辆停止通行。(2)主、支干道交替通行,主干道每次放行30s,支干道每次放行20s。(3)每

    2026年3月6日
    4
  • 申请成为EFL Developer.

    申请成为EFL Developer.申请成为EFLDeveloper.

    2022年5月20日
    36
  • Java设计模式之创建型:单例模式

    Java设计模式之创建型:单例模式

    2021年10月4日
    48
  • python—-简史

    python—-简史然软件产业的历史相对于人类历史只是白驹过隙,但世界上却存在非常多的编程语言,「Python」 就是其中之一。Python语言算得上一门“古老”的编程语言,Python流行这么久,必然有它

    2022年7月5日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号