STU网页作业

学生制作HTML网页设计作业时添加插入背景音乐的简单代码

更新时间:2021-11-18   文章分类:网页技术课堂

很多HTML网页设计课程作业要求给页面添加背景音乐,今天给大家讲解下常用的网页插入音乐的简单标签。另附示例代码、使用说明及标签说明,用的到的同学直接复制代码即可使用。


插入网页背景音乐


网页背景音乐<embed>标签

使用说明:

<embed>标签需要写在顶部</head>上方,title标签下面。

代码示例:

<embed src="music/音乐.mp3" hidden="flase" autostart="true" loop="true">

标签说明:

· src="" 在引号内添加写音乐文件路径。

· hidden="true"表示隐藏音乐播放按钮;hidden="false"表示开启音乐播放按钮。

· autostart="true" 表示是打开网页加载完后自动播放。

· loop="true"表示 循环播放;loop="false"表示仅播放一次。


网页背景音乐<audio>标签

使用说明:

<audio>标签一般在正文</body>内即可。同时可配合CSS隐藏播放器。

代码示例:

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="music/音乐.mp3">       

</audio>

标签说明:

· src="" 在引号内添加写音乐文件路径。

· autoplay="autoplay",则背景音乐将在音网页打开后就自动马上播放。

· controls="controls",则为了在页面内显示显示控件,如播放按钮。

· "loop="loop",则是为了是背景音乐重复播放。

· preload="auto",则音频在页面加载的同时进行加载,并预备播放。

隐藏播放器:

若是想播放按钮隐藏,直接使用css 的display控制audio标签的显示。

<style type="text/css">

 audio{display: none; }

</style>



STU网页公众号

STU网页设计(STU-WORKS)专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生网页成品免费下载...

qq code back_top

微信扫码咨询