用声音打动“观众”——在网页中添加音乐播放功能
站长空间
在浏览网站时我们经常会遇到打开网页的同时伴随着背景音乐,这样便给网页增添了几分温馨的感觉,同时给我们浏览网站带来一些惬意。有的网站还嵌入了一个播放器,这些播放器中内置了一些歌曲,能够随机播放,我们也可以根据需要选择喜欢的歌曲来播放。这些动听的音乐是如何添加到网页中去的呢?今天我们就一起来打造一个属于自己的音乐网页。
常见的三种音乐网页:
1.背景音乐网页
当我们打开某个网页时,只能听到音乐,看不到播放器,这样的网页就添加了背景音乐。如:http://www.hongit.com/lyb/index.asp
2.音乐播放工具条
在网页的指定位置会有一个工具条出现,我们可以通过工具条中的按钮控制音乐播放。也可以在节目列表中选择播放的歌曲。如:http://www.zly.org.cn/bbs/music.htm
3.网络电台链接
当我们打开该网页时,会收听的网络电台的节目。如:http://www.hongit.com/index4/musicradio.htm
制作音乐播放工具条
某些网页的指定位置会出现一个播放器的工具条,这个工具条可以随机播放内置的音乐文件,我们还可通过“上一首”、“下一首”按钮来选择自己需要的歌曲进行播放,非常方便。那么这种可控制的工具条是怎么制作出来的呢?
1.简单播放器的制作
在制作可控制播放器前,我们先来看看如何制作一个简单的网页播放器。将<embed SRC="http://www.hongit.com/d2y/rm/011.rm" autostart="true" LOOP="ture" width="235" height="94">源代码复制到网页的
语句中间,这样就可以快速添加一个简单的播放器(图1)。
2.制作可控制播放器
制作可控制的播放器就比较复杂一点,首先我们下载一个music.rar插件(http://219.226.5.150/download/music.rar),我们将这个插件添加到相应的网页中就可以实现播放功能。
解压后分别得到img、js两个文件夹和list.htm、music.htm两个网页文件。其中img文件夹保存着网页中显示的媒体播放器的面板图片,js文件夹里存放的是几个播放控制文件,list.htm是浏览者用于查看播放列表的弹出页面,music.htm就是我们要在主页上加载的播放条页面。
(1)添加要播放的音乐文件
将准备好的音乐文件添加到播放器控件中,用记事本打开js文件夹中的播放列表文件bglist.js,在此找到mkList语句,这里就是我们添加的歌曲列表文件,其中http://202.102.43.37/hy/yinyue/001/09.mp3是歌曲链接地址,我们也可以改为本地歌曲地址,后面的文字就是歌曲在播放器中显示的名称,我们可以根据需要添加多个歌曲文件。添加后再根据情况定期对歌曲列表进行更新。
(2)将播放器绑定到网页中
为了防止点击主页链接而影响歌曲播放的连续性,我们可以使用框架的形式将Music.htm网页和指定的网页固定在一个框架中。这样在点击该页的链接时,将不会影响歌曲的连续播放。
添加框架时,在FrontPage中单击“文件→新建”命令,并在右侧的任务窗格中选择“其他网页模板”,弹出“网页模板”窗口,切换到“框架网页”中,在此我们可以选择一种合适的框架模式,如:“页脚”等。确定后,在编辑区内显示出框架模式,随后用鼠标调整框架的大小,我们以上框架显示播放器面板,下框架显示指定网页内容为例。这样我们可以将绑定music.htm的框架调整为一条即可。指定的主页框架要显示整个页面,因此尽快调整大一些。随后在该框架上单击右键选择“框架属性”命令,弹出一个框架属性对话框,单击“框架属性”按钮,在打开的界面中去除“显示框架”复选框中的钩,这样以后在浏览时就不会显示边框。
框架调整后,单击上框架中的“设置初始页”按钮,在弹出的“插入新链接”窗口中选择Music.htm文件。在下框架中选择指定的网页,随后单击预览。怎么样,播放器工具条已经嵌入到我们的网站中了(图2)。

确定后就可以保存下来,以后上传框架网页时别忘了将music文件夹中的各个文件和音乐文件都上传到网页中。
嵌入网络音乐电台
现在网上出现了很多网络电台,浏览者可以一边上网一边收听广播,如果要将网络电台嵌入到自己的小站中,就可以随时收听到网络电台的广播了。下面我们就以中央人民广播电台的音乐之声网络电台为例来看看如何在网页中添加电台。
首先我们找到网络电台的网址,音乐之声网络电台网上 发布的格式为mms格式,其网址为mms://vstream.sina.com.cn/900。随后启动FrontPage新建或打开需要添加电台的网页,随后单击Web组件,在“插入Web组件”列表的左侧窗口中选择“高级控件”,在右侧窗口选择“ActiveX控件”,单击“下一步”选择“windows media player”命令,随后单击“确定”按钮,弹出“windows media player属性”窗口(图3),在“源”文件名域文本框中键入网络电台网址,随后单击“确定”按钮,预览一下,是不是这个网页可以广播了。

添加页面背景音乐
给网页添加背景音乐有两种方式,一是直接将源代码复制到网页中;二是使用FrontPage、Dreamweaver网页编辑工具来添加网页背景音乐。
1.直接添加背景音乐
添加背景音乐时,用FrontPage、Dreamweaver网页编辑工具并切换到“代码”标签项下,找到<BODY>和</BODY>语句,在语句中间键入<embed SRC="http://www.hongit.com/d2y/rm/011.rm" autostart="true" HIDDEN LOOP="ture" width="25" height="21">语句,单击“预览”按钮即可试听声音。
从该语句中我们可以看到网页的背景音乐链接的是一个rm文件,当然我们还可以将它换成mid、wav、mp3等格式,建议选择rm和mid格式的文件做背景音乐。在该语句中autostart="true"表示自动播放,HIDDEN LOOP="TRUE"表示音乐播放器面板,如果要想显示播放器可以从语句中将该字段删除。Width和height是播放器面板的宽带和高度,在此我们根据需要进行输入。
提示:复制背景音乐代码时,为了网页的美观,我们应该将该语句复制到HTML源代码的最下端,播放面板就会出现在网页的下方,不影响网页的布局。
2.使用网页工具制作背景音乐
如果你对源代码不太熟悉,我们可以使用FrontPage、Dreamweaver等网页制作工具制作网页背景音乐,如在FrontPage添加背景音乐时,单击Web组件,在“插入Web组件”列表中的左侧窗口中选择“高级控件”,在右侧窗口选择“插件”,随后打开“插件属性”对话框(图4),在“数据源”输入播放文件的路径及文件名,勾选“隐藏插件”复选框,这样就可以为网页添加背景音乐。

提示:在“插件”中添加播放器时,我们还要在源代码中手工输入autostart="true"语句才能自动播放。如果想添加一个优秀的播放器,可以使用“高级控件”项中的ActriveX控件来完成。