【HTML】添加网页背景音乐

2024-06-30 04:17:53

方式一：

<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

【HTML】添加网页背景音乐相关推荐

HTML5添加网页背景音乐
HTML5添加网页背景音乐方式一: 这种方式会显示播放器. 方式二: 这个方式主要是支持的播放器多.一定程度上解决了浏览器兼容的问题. 方式三: 这个不显示播放器. 方式四: 方式五:
audio插入背景音乐_HTML5 标签audio添加网页背景音乐代码
html5 是 HTML 5 的新标签,定义声音,好比音乐或其余音频流.html 能够在开始标签和结束标签之间放置文本内容,这样老的浏览器就能够显示出不支持该标签的信息.ide HTML5 Audio ...
HTML网页背景音乐怎么在谷歌,谷歌浏览器如何添加背景音乐
问题: 在网页中用下面两种方法添加网页背景音乐: 1. 2. 这两种办法,在IE浏览器上都能顺利播放出背景音乐,但是在谷歌和火狐浏览器上没有背景音乐. 两种解决方案: 1.使用HTML5.0的标签: ...
HTML网页背景音乐怎么在谷歌,谷歌浏览器怎么添加背景音乐
谷歌浏览器如何添加背景音乐问题: 在网页中用下面两种方法添加网页背景音乐: 1. 2. 这两种办法,在IE浏览器上都能顺利播放出背景音乐,但是在谷歌和火狐浏览器上没有背景音乐. 两种解决方案: 1. ...
html背景音乐播放与暂停,js控制网页背景音乐播放与停止的方法
本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: js控制背景音乐bgsound的方法(开始与停止) var bg_sound=document.creat ...
endnote如何添加网页类参考文献
endnote如何添加网页类参考文献如图点击下面的小图标进入编辑页面后,选择你要的参考文献类别,如图,选择web page. 在上一步操作后,下面的编辑框中的选项发生了一些变化,根据你目前所获得的 ...
比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: <!DOCTYPE htm ...
ppt转html并编辑文字,ppt转视频加字幕和音乐制作的ppt添加精美的文字说明然后添加温和背景音乐...
新年假期已经结束啦,转眼今天又到了开始奋斗的日子,首先祝大家开工大吉哈.个人是感觉过了个假年的,总感觉假期还没开始就已经结束了,真是开工日黑眼圈+胖三圈,不想上班+不敢上班+上不动班....可恨的是还 ...
给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: function btnClic ...

最新文章

热门文章