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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • findwindowex函数用法_内核防止findwindow

    findwindowex函数用法_内核防止findwindow函数功能:该函数获得一个顶层窗口的句柄,该窗口的类名和窗口名与给定的字符串相匹配。这个函数不查找子窗口。在查找时不区分大小写。函数型:HWNDFindWindow(LPCTSTRIpClassName,LPCTSTRIpWindowName);参数:IpClassName:指向一个指定了类名的空结束字符串,或一个标识类名字符串的成员的指针。IpWindowName:指向一个指定了窗口名(窗…

    2022年8月13日
    13
  • 数据库 之关系模型

    数据库 之关系模型关系模型的数据结构:以二维表的形式表示实体和实体之间联系的数据模型。其是一张规范化的二维表,它由表名,表头和表体三部分构成。2.关系模型:分量:每一行对应的列的属性值,即为元组中的一个属性值。候选码:可唯一标识一个元组的属性或属性集。3.关系模式:关系模式是对关系的描述,是关系模型的“型”,一般表示为:关系名(属性1,属性2,属性n)4.关系模型的数据操纵主要包括查询,插入,删除和修改。…

    2022年7月16日
    16
  • java IO流详解

    java IO流详解

    2021年6月13日
    120
  • Typora ——一款Markdown编辑器入门教程

    Typora ——一款Markdown编辑器入门教程Typora——Markdown编辑器入门教程附上目录:文章目录Typora——Markdown编辑器入门教程一.序二.前言那么,什么是富文本格式?什么是Markdown?**Markdown编辑器和常见的富文本编辑器有什么区别?**二.Typora简介什么是Typora?当然,typora的魅力不止于此:三.Typora的安装四.配合扩展体验更佳1.配合Pandoc扩展程序实现导出2…

    2022年5月18日
    47
  • qq刷屏代码如何停止(微信刷屏代码vbs)

    最近有些人向小编反应QQ刷屏代码没办法关,小编认为有必要发布一下关程序的代码,专门针对上次的QQ刷屏代码:sety=getobject(“winmgmts:\\.\root\cimv2”)setx=y.execquery(“select*fromwin32_processwherename=’wscript.exe'”)foreachiinxi.terminat…

    2022年4月17日
    110
  • 学会阅读Java字节码

    学会阅读Java字节码1 Class 文件基础 1 文件格式 Class 文件的结构不像 XML 等描述语言那样松散自由 由于它没有任何分隔符号 所以 以上数据项无论是顺序还是数量都是被严格限定的 哪个字节代表什么含义 长度是多少 先后顺序如何 都不允许改变 2 数据类型仔细观察上面的 Class 文件格式 可以看出 Class 文件格式采用一种类似于 C 语言结

    2025年10月28日
    4

发表回复

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

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