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


相关推荐

  • phpmyadmin设置密码,不用登录直接进入

    phpmyadmin设置密码,不用登录直接进入

    2021年9月23日
    44
  • bat中使用mshta调用vbs语句获取精准计算的日期

    bat中使用mshta调用vbs语句获取精准计算的日期1.在bat中,获取指定的日期格式是比较麻烦的。因为cmd环境中,日期格式随着系统的时间格式设置而变化,通常系统默认的时间格式是“\’”符号作为连接符。日期通常用在文件名上,比如日志的文件名。那么日期的格式就只能用“-”符号代替,更改系统日期格式会显得容易被外界因素改变,导致不稳定。当然也可以用bat中的set来进行替换,但这样费代码量。2.对于计算日期来说,bat是难以准确做到的,也需要堆积代码量才能完成。特别是到了每个月的一号时,无法确定昨天是否是31号还是30号还是28号。那么bat就只能陷入迷茫

    2025年6月7日
    0
  • JS Array ECMAScript5 Methods

    JavaScript的新版本(ECMAScript5)中,为数组新增了一些方法。这些方法包括:forEach(f[,o]):此方法类似于for/in循环,其作用是遍历整个数组并执行函数的某些

    2021年12月22日
    33
  • html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置

    html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式。一般在网页中一些特殊版块布局时,会遇到这类需求,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,还可以通过CSS设置图片等元素为鼠标指针样式,比如有些网站鼠标指针是各种各样小图片样式,当然这个是通过csscursor设置鼠标样式。CSS鼠标样式cursor语法…

    2022年5月29日
    44
  • 关于递归和迭代[通俗易懂]

    关于递归和迭代[通俗易懂]首先明确递归和迭代的概念。递归:程序调用自身的编程技巧(将大问题化解为相同结构的小问题,从待解问题一直分解到已知答案的最小问题,在逐级返回得      到原解)    使用递归的两个阶段:    1)递推:把复杂的问题的求解推到比原问题简单一些的问题的求解;    2)回归:当获得最简单的情况后,逐步返回,依次得到复杂的解.迭代:从已知式出发

    2022年6月6日
    39
  • beanutils.copyproperties属性值丢失_beanutils.populate用法

    beanutils.copyproperties属性值丢失_beanutils.populate用法问题场景例如有个对象要提交,提交一次,第二次提交我们希望是对上次提交的完善。。那么用其他方式实现很麻烦,本身的BeanUtils.copyProperties也是不大支持。解决方案hutool开源库为我们提供了更为强大的Bean工具-BeanUtil,只需要一句代码就搞定BeanUtil.copyProperties(oldDetail.get(),userDetail,true,Copy…

    2022年10月4日
    0

发表回复

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

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