如何在网页上添加音乐

一、学会添加音乐文件
为网页添加背景音乐的方法一般有两种，第一种是通过普通的< bgsound>标签来添加，另一种是通过< embed>标签来添加。
(一)使用< bgsound>标签

BGSOUND 元素可出现在文档中的任何位置。
bgsound元素可以为网页添加背景音乐，支持的音频格式：WAV、MID、MP3等。

属性：
src－所插入背景的URL（网址）。
loop－设置循环的次数，当值是-1或者Infinite 的时候表示无限循环。
volume－音量，值为-10000到0之间，（不算直观）0是最大音量。
balance－声道，值为-1000到1000之间的值，负值将声音发送左声道，正值将声音发送右声道，0为立体声。
delay－是进行播放延时的设置
--------------------------------------------------------------------------------
举例：<bgsound src="http://www.xxx.com/xxx.mp3" loop="-1" volume="-5000" balance="0">
白话：<bgsound空格src="音乐网址" mce_src="音乐网址"空格loop="循环次数" volume="音量数值"空格balance="左右声道值">

一般volume和balance属性无特殊要求可省略。
 bgsound的控制
<bgsound  id=aa loop=-1>基本标签是bgsound不用说了，预设属性是loop=-1就是无限循环，id是给bgsound起的名字，以便以后调用。

<input type=button value=左声道 >用一个按钮把bgsound也就是aa（刚才给bgsound起的名字)赋予一个属性banlance

并且值给-10000
<input type=button value=立体声 >释意同上

<input type=button value=右声道 >还是同上啦

<input type=button value=静音 >同上-_-

<input type=button value=撤消静音 >同上-_-

<input type=button value=第一首 http://www.aaa.com/1.mp3'">

估计大家对这里比较感兴趣，根据上面说的这段代码的释意就是说用一个按扭把bgsound也就是aa刚起过名字嘛，

插入的网址定义为hhttp://www.aaa.com/1.mp3，
※注意双引和单引是怎么引的，否则不会成功的哦

也许你要问为什么要这样定义属性呢？因为我们可以随时更换，看下面，只要插入这样的链接就可以换歌啦，方法有很多，慢慢研习，如果实在不会就直接复制吧！下面这些方法任意一种都可以。当src的值为空""时，也就是不给它网址，那么背景音乐就可以停止了。
<bgsound loop=-1>

方法1：
<input type=button value=第一首 οnclick="aa.src='http://www.aaa.com/1.mp3'">
<input type=button value=第二首 οnclick="aa.src='http://www.aaa.com/2.mp3'">
<input type=button value=停止 οnclick="aa.src=''">

方法2：
<a href=# οnclick="aa.src='http://www.aaa.com/1.mp3'">第一首</a>
<a href=# οnclick="aa.src='http://www.aaa.com/2.mp3'">第二首</a>
<a href=# οnclick="aa.src=''">停止</a>

方法3：
<a href="http://www.aaa.com/1.mp3" οnclick="aa.src=this.href;return(false)">第一首</a>
<a href="http://www.aaa.com/2.mp3" οnclick="aa.src=this.href;return(false)">第二首</a>
<a href="" οnclick="aa.src=this.href;return(false)">停止</a>

效果
补充：bgsound为什么要好久才能听到音乐？那是因为bgsound要把数据全部下载下来再播放，不像播放器那样有缓冲，可以实时缓冲播放。所以，bgsound音乐要么保证插入链接的速度，要么尽量保持文件小些

最后的代码如下：

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

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

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

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

DHTML bgsound 属性

标签属性

标签属性	属  性	描         述
BALANCE	balance	设置或获取表明背景声音的音量如何分配在左右扬声器的值。
	canHaveHTML	获取表明对象是否可以包含丰富的 HTML 标签的值。
	disabled	获取表明用户是否可与该对象交互的值。
ID	id	获取标识对象的字符串。
	isContentEditable	获取表明用户是否可编辑对象内容的值。
	isDisabled	获取表明用户是否可与该对象交互的值。
	isMultiLine	获取表明对象的内容是包含一行还是多行的值。
LOOP	loop	设置或获取声音或视频剪辑在激活时的循环播放次数。
	nextSibling	获取对此对象的下一个兄弟对象的引用。
	nodeName	获取特定结点类型的名称。
	nodeType	获取所需结点的类型。
	nodeValue	设置或获取结点的值。
	outerHTML	设置或获取对象及其内容的 HTML 形式。
	outerText	设置或获取对象的文本。
	parentElement	获取对象层次中的父对象。
	parentNode	获取文档层次中的父对象。
	parentTextEdit	获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。
	previousSibling	获取对此对象的上一个兄弟对象的引用。
	readyState	获取对象的当前状态。
	scopeName	获取为该元素定义的命名空间。
	sourceIndex	获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。
SRC	src	设置或获取要播放的声音的 URL。
	tagName	获取对象的标签名称。
	tagUrn	设置或获取在命名空间声明中指定的统一资源名称(URN)。
	uniqueID	获取为对象自动生成的唯一标识符。
VOLUME	volume	设置或获取声音的音量设置。

 

行为

行   为	描            述
clientCaps	提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。
download	下载文件并在下载完成后通知一个指定的回调函数。
homePage	包含关于用户主页的信息。

 

集合

集  合	描          述
all	返回对象所包含的元素集合的引用。
attributes	获取对象标签属性的集合。
behaviorUrns	返回标识附加到该元素行为的统一资源名称(URN)字符串的集合。

 

事件

事   件	描           述
onlayoutcomplete	当打印或打印预览版面处理完成用来自于源文档的内容填充当前 LayoutRect 对象时触发。
onmouseenter	当用户将鼠标指针移动到对象内时触发。
onmouseleave	当用户将鼠标指针移出对象边界时触发。
onreadystatechange	当对象状态变更时触发。

 

方法

方   法	描            述
addBehavior	给元素附加一个行为。
applyElement	使得元素成为其它元素的子元素或父元素。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
clearAttributes	从对象中删除全部标签属性和值。
cloneNode	从文档层次中复制对对象的引用。
componentFromPoint	通过特定事件返回对象在指定坐标下的位置。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
dragDrop	初始化拖曳事件。
fireEvent	触发对象的指定事件。
getAttribute	获取指定标签属性的值。
getAttributeNode	获取由 attribute.name 属性引用的 attribute 对象。
getElementsByTagName	获取基于指定元素名称的对象集合。
insertAdjacentElement	在指定位置插入元素。
mergeAttributes	复制所有读/写标签属性到指定元素。
normalize	合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
removeAttribute	删除对象的给定标签属性。
removeAttributeNode	从对象中删除删除 attribute 对象。
removeBehavior	分离元素的行为。
setAttribute	设置指定标签属性的值。
setAttributeNode	设置 attribute 对象为对象的一部分。
swapNode	交换文档层次中两个对象的位置。

 

样式

样式标签属性	样式属性	描         述
behavior	behavior	设置或获取 DHTML 行为的位置。
text-autospace	textAutospace	设置或获取自动留空和文本的窄空间宽度调整。
text-underline- position	textUnderlinePosition	设置或获取对象的 textDecoration 属性中设置的下划线的位置。

 

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

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

其中autostart用来设置打开页面时音乐是否自动播放，而hidden设置是否隐藏媒体播放器。因为embed实际上类似一个Web页面的音乐播放器，所以如果没有隐藏，则会显示出你系统默认的媒体插件的。

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

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

二、打造时尚音乐播放器

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

提示：《网页音乐播放器》是一个网页插件，运行制作好的页面后，它会调用系统自带的Windows Media播放器来播放事先设定好的MP3歌曲。

(一)简单设置

首先下载播放插件(下载地址：http//www.mh.fy.cn/soft/music.rar)，解压后进入目录，其中music.htm就是我们要在主页上加载的播放条页面，list.htm是浏览者用于查看播放列表的弹出页面，js文件夹里存放的是几个播放控制文件，img里则是一些播放界面的图片文件。

使用网页编辑软件打开music.htm，找到以下代码：

< script Language="Javascript">
var blnAutoStart = true
var blnRndPlay = false
var blnStatusBar = false
var blnShowVolCtrl = true
var blnShowPlist = true
var blnUseSmi = false
var blnLoopTrk = true
var blnShowMmInfo =false
< /script>

在这里可以对播放器进行基本的设置。以上各句依次含义是：是否自动播放，是否循序播放，是否显示状态栏，是否显示音控状态，是否允许显示播放清单，是否使用SMI模式，是否循环播放，是否显示歌曲信息。你可以根据自己的需要对它们进行设置，其中true为“是”，false为“否”。另外，为了使你的播放条更具个性色彩，你还可以在music.htm代码中找到< marquee> ......< /marquee>语句，将其中的主页名称修改为你自己主页的名称。

(二)添加播放列表

打开js文件夹中的播放列表文件bglist.js，在这里就可以把你喜欢的歌曲添加到列表上来了，具体的添加格式为mkList"歌曲路径" "歌曲说明" ，其中“歌曲路径”可以是你上传到主机上的本地地址，也可以指定网络上的MP3地址，“歌曲说明”是用来滚动显示在播放条上的，可以是演唱者和歌曲的名称。比如要添加周杰伦的《龙卷风》，我们先在网络上找到可以实时播放的链接地址，然后再把它添加到列表上：mkList"http://202.102.43.37/hy/yinyue/周杰伦/09.mp3""周杰伦——龙卷风"。

提示：为了保持你的主页音乐常听常新，我们可以间隔一段时间就对播放列表更新一次。

(三)安装播放器

为了防止点击主页链接而影响歌曲播放的连续性，我们要把播放页面music.htm以框架形式安装到主页上去。

以FrontPage 2003为例，执行“新建→其他网页模板”弹出“网页模板”窗口，选择“框架网页→页脚”，“确定”后在上框架里设置初始网页指向你的主页，下框架里则指向music.htm，然后在框架属性中去掉框架边框并适当调整下框架的高度(图4)，框架高度足以容纳播放条的高度即可。预览满意后就可以保存页面了，然后把你的网站指向这个新页面就可以了。