HTML中如何添加背景音乐

发布网友发布时间：2022-04-20 16:56

我来回答

共14个回答

热心网友时间：2022-04-20 00:22

1、首先要创建一个简单的网页，网页上只有一个DIV文本内容；

2、在这个网页中DIV的文本内容中，可以添加有背景音乐的网页；

3、要为网页添加背景音乐，可以使用embed标签，并为其添加src属性，这是用来指定音乐所在路径的，embed src="tt.mp3" hidden="true"；

4、为了隐藏背景音乐以这个多媒体控件，embed标签添加了hidden隐藏属性，要让背景音乐在打开网页后就自动播放，我们可以添加 autostart属性，autostart="true"；

5、默认下多媒体控件只会播放一次，播放完就停止了，如果想让背景音乐不停的播放，那可以添加loopn属性，loop="true"。

热心网友时间：2022-04-20 01:40

有4个方法：
1. 可以用传统的方法插入背景音乐
<body>

<bgsound src="你要播放的音乐url">
</body>

2. 广泛兼各种浏览器的方法
<embed src="背景音乐的路径" loop=“是否循环播放”></embed>

3.插入一个flash播放器，然后播放相应的音乐。个人不推荐这种方法，因为flash已经没前途了，比如，现在的手机浏览器几乎都不直接支持flash了。

4.用HTML5的<audio>标签来添加音乐。我个人推荐楼主用这个方法，因为现在几乎所有的浏览器都兼容html5，除了少数古董浏览器，例如IE8等等。
<audio controls="controls" hidden="hidden" autoplay="autoplay" loop="loop">

<source src="你要播放的音乐.ogg" type="audio/ogg" />
<source src="你要播放的音乐.mp3" type="audio/mpeg" />
</audio>
上面这段代码可以让播放器隐藏起来，不影响网页布局。

热心网友时间：2022-04-20 03:15

<!DOCTYPE HTML><html><body><audio src="/i/song.ogg" controls="controls"></audio></body></html>HTML5 规定了一种通过 "audio" 元素来包含音频的标准方法。直接可以这样写：
<audio src="white.mp3" controls="controls"></audio>
其中src后的url就是你的歌曲位置和名字，至于controls，如果出现该属性，则向用户显示控件，比如播放按钮，也就是用户自己点击播放，暂停等！如果想要网页一载入，自己就自动播放，可以这样写<audio src="white.mp3" autoplay="autoplay"></audio>,这样就自动播放了！

热心网友时间：2022-04-20 05:06

1,如果你的目标人群还有IE6这些用户，采用传统标签
<body>
<bgsound src="你要播放的音乐url">
</body>
2，如果你的用户是当前的大学生、智能手机用户，那么完全可以采用被广泛支持的HTML5的<video>标签播放背景音乐。
<audio controls="controls" hidden="hidden" autoplay="autoplay" loop="loop">
<source src="你要播放的音乐.ogg" type="audio/ogg" />
<source src="你要播放的音乐.mp3" type="audio/mpeg" />
</audio>
注意：一定要设置隐藏，自动播放，循环。

热心网友时间：2022-04-20 07:14

网页添加背景音乐

一、学会添加音乐文件

为网页添加背景音乐的方法一般有两种，第一种是通过普通的<bgsound>标签来添加，另一种是通过<embed>标签来添加。

（一）使用<bgsound>标签

用Dreamweaver打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在<body></body>之间输入“<”在弹龅拇?胩崾究蛑醒≡馼gsound。
Dreamweaver自动输入“<bgsound”代码后按空格键，代码提示框会自动将bgsound标签的属性列出来供你选择使用。bgsound标签共有五个属性，其中balance是设置音乐的左右均衡，delay是进行播放延时的设置，loop是循环次数的控制，src则是我们音乐文件的路径，volume是音量设置。一般在添加背景音乐时，我们并不需要对音乐进行左右均衡以及延时等设置，所以仅需要几个主要的参数就可以了。最后的代码如下：

<bgsound src="music.mid" loop="-1">

其中，loop="-1"表示音乐无限循环播放，如果你要设置播放次数，则改为相应的数字即可。

这种添加背景音乐的方法是最基本的方法，也是最为常用的一种方法，对于背景音乐的格式支持现在大多的主流音乐格式，如WAV、MID、MP3等。如果要顾及到网速较低的浏览者，则可以使用MID音效作为网页的背景音乐，因为MID音乐文件小，这样在网页打开的过程中能很快加载并播放，但是MID也有不足的地方，它只能存放音乐的旋律，没有好听的和声以及唱词。如果你的网速较快，或是觉得MID音乐有些单调，也可以添加MP3的音乐。只要将上述代码中的happy.mid改为happy.mp3即可。

提示：在FrontPage中加入背景音乐要比Dreamweaver相对方便一些，只要在“背景”对话框中进行相关设置即可。

（二）使用<embed>标签

使用<embed>标签来添加音乐的方法并不是很常见，但是它的功能非常强大，如果结合一些播放控件就可以打造出一个Web播放器。

它的使用方法与第一种基本一样，只是第一步的代码提示框里不要选择gbsound，改而选择embed即可。然后再选择它的属性进行相应的设置，从图中可看出embed的属性比gbsound的五个属性多许多。最后的代码如下：<embed src="music.mp3" autostart="true" loop="true" hidden="true"></embed>。
其中autostart用来设置打开页面时音乐是否自动播放，而hidden设置是否隐藏媒体播放器。因为embed实际上类似一个Web页面的音乐播放器，所以如果没有隐藏，则会显示出你系统默认的媒体插件的。

对于这两种方法，笔者认为二者之间都各有优缺点：第一种方法当页面打开时音乐播放，如果将页面最小化以后播放音乐会自动暂停，如果使用第二种方法则不会出现这种情况，只要不将窗口关闭，它会一直播放。所以希望大家在运用过程中根据自己的情况来选择添加音乐的方法。

学会了简单的添加网页音乐方法后，就应该在界面和功能上下点功夫了。我们可以利用《网页音乐播放器》打造一个时尚的音乐播放器。一、学会添加音乐文件

为网页添加背景音乐的方法一般有两种，第一种是通过普通的<bgsound>标签来添加，另一种是通过<embed>标签来添加。

（一）使用<bgsound>标签

用Dreamweaver打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在<body></body>之间输入“<”在弹出的代码提示框中选择bgsound。
Dreamweaver自动输入“<bgsound”代码后按空格键，代码提示框会自动将bgsound标签的属性列出来供你选择使用。bgsound标签共有五个属性，其中balance是设置音乐的左右均衡，delay是进行播放延时的设置，loop是循环次数的控制，src则是我们音乐文件的路径，volume是音量设置。一般在添加背景音乐时，我们并不需要对音乐进行左右均衡以及延时等设置，所以仅需要几个主要的参数就可以了。最后的代码如下：

<bgsound src="music.mid" loop="-1">

其中，loop="-1"表示音乐无限循环播放，如果你要设置播放次数，则改为相应的数字即可。

这种添加背景音乐的方法是最基本的方法，也是最为常用的一种方法，对于背景音乐的格式支持现在大多的主流音乐格式，如WAV、MID、MP3等。如果要顾及到网速较低的浏览者，则可以使用MID音效作为网页的背景音乐，因为MID音乐文件小，这样在网页打开的过程中能很快加载并播放，但是MID也有不足的地方，它只能存放音乐的旋律，没有好听的和声以及唱词。如果你的网速较快，或是觉得MID音乐有些单调，也可以添加MP3的音乐。只要将上述代码中的happy.mid改为happy.mp3即可。

提示：在FrontPage中加入背景音乐要比Dreamweaver相对方便一些，只要在“背景”对话框中进行相关设置即可。

（二）使用<embed>标签

使用<embed>标签来添加音乐的方法并不是很常见，但是它的功能非常强大，如果结合一些播放控件就可以打造出一个Web播放器。

它的使用方法与第一种基本一样，只是第一步的代码提示框里不要选择gbsound，改而选择embed即可。然后再选择它的属性进行相应的设置，从图中可看出embed的属性比gbsound的五个属性多许多。最后的代码如下：<embed src="music.mp3" autostart="true" loop="true" hidden="true"></embed>。

热心网友时间：2022-04-20 09:39

热心网友时间：2022-04-20 12:20

第一种：在页面代码中的<style></style>之间加入<bgsound src="音乐url" loop="-1"> 这段代码。

在这里要说的是，“loop”中的数值是音乐循环的次数，可设置为任意正整数，若设为“-1”的话，音乐将永远循环。

这种背景音乐是打开叶子后直接播放的，在网页上不会有显示。这是最简单的一种。

第二种：这种方法则略微复杂一些，但可设置的参数也较多。仍是在网页代码中的<style></style>标签之间加入一个“Embed”标签，其最简形式就像这样：

<EMBED src="音乐url" autostart="true" loop="true" width="80" height="20">

不同的是，在这里我们可以设置更多内容，以下是具体的说明：

src 背景音乐的地址（即url）。
autostart 是否自动播放，“true”为音乐文件读取完后立即播放，“false”则不立即播放，默认值为“false”

loop 循环次数，设置为“true”为永远循环，“false”为仅播放一次，若设为任意一正整数，则循环所输入的次数。
volume 设置音量，取值范围是“0-100”，默认值为系统当前音量。
starttime 设置音乐开始播放的时间，格式是“分：秒”，
如：starttime＝"00:10"，就是从第10秒开始播放。
endtime 设置音乐结束播放的时间，具体格式同上。
width 设置音乐播放控制面板的宽度。
height 设置音乐播放控制面板的高度。
controls 设置音乐播放控制面板的外观，
“console”为通常面板；
“smallconsole”为小型面板。
“playbutton”为是否显示播放按钮；
“pausebutton”为是否显示暂停按钮；
“stopbutton”为是否显示停止按钮；
“volumelever”为是否显示音量调节按钮

热心网友时间：2022-04-20 15:18

第一种：在页面代码中的之间加入这段代码。

在这里要说的是，“loop”中的数值是音乐循环的次数，可设置为任意正整数，若设为“-1”的话，音乐将永远循环。

这种背景音乐是打开叶子后直接播放的，在网页上不会有显示。这是最简单的一种。

第二种：这种方法则略微复杂一些，但可设置的参数也较多。仍是在网页代码中的标签之间加入一个“Embed”标签，其最简形式就像这样：

不同的是，在这里我们可以设置更多内容，以下是具体的说明：

src 背景音乐的地址（即url）。
autostart 是否自动播放，“true”为音乐文件读取完后立即播放，“false”则不立即播放，默认值为“false”

loop 循环次数，设置为“true”为永远循环，“false”为仅播放一次，若设为任意一正整数，则循环所输入的次数。
volume 设置音量，取值范围是“0-100”，默认值为系统当前音量。
starttime 设置音乐开始播放的时间，格式是“分：秒”，
如：starttime＝"00:10"，就是从第10秒开始播放。
endtime 设置音乐结束播放的时间，具体格式同上。
width 设置音乐播放控制面板的宽度。
height 设置音乐播放控制面板的高度。
controls 设置音乐播放控制面板的外观，
“console”为通常面板；
“smallconsole”为小型面板。
“playbutton”为是否显示播放按钮；
“pausebutton”为是否显示暂停按钮；
“stopbutton”为是否显示停止按钮；
“volumelever”为是否显示音量调节按钮，

热心网友时间：2022-04-20 18:33

在title标签下方添加音乐代码 <embed src="/pour-time/img/nuanuande.mp3" hidden="true" autostart="true" loop="true">

src音乐路径替换成您的路径，路径要填绝对路径

hidden="true" 意思是隐藏播放器按钮hidden="false"开启autostart="true" 意思是打开网页加载完后自动播放loop="true" 循环播放如仅播放一次代码为：loop="false"

热心网友时间：2022-04-20 22:04

将<bgsound src="潇洒走一回叶倩文 .wma" loop="-1">这段代码放在<head></head>即<head><bgsound src="潇洒走一回叶倩文 .wma" loop="-1"></head>注意：1、点wma之前的名称你最好是将音乐重命名时复制的全名2、点wma是音乐的格式（如果是mp3格式的就点mp3）你的音乐跟网页置一同一个文件夹

热心网友时间：2022-04-21 01:52

html5之前的语言代码，都不能直接插入音频标签的，所以，如果你用dw，那就直接选择插入多媒体吧，里面自带的有代码，选择后，自己生成代码的。

热心网友时间：2022-04-21 05:57

<bgsound src="音乐文件地址" loop=#>

#=循环数 -1为无限
注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐。

热心网友时间：2022-04-21 10:18

用音频播放器标签：
<audio src="song.mp3" controls="controls" autoplay="autoplay">
</audio>
不过要注意兼容性问题，mp3格式可以在IE、chrome、safari浏览器中播放，火狐及欧鹏浏览器暂时不支持，需要转格式为wav或者Ogg。
多浏览器兼容性写法：
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" autoplay="autoplay">
<source src="song.mp3" type="audio/mpeg" autoplay="autoplay">
</audio>

热心网友时间：2022-04-21 15:13

可以在Html代码中加入标签：
<bgsound src="音乐地址" loop="-1">//不显示播放器只是背景音乐,loop:循环
<embed src="音乐地址" hidden="true/false">//显示播放器，设置hidden可隐藏
另外还可以在flash中添加