2005/07/05 | 添加背景音乐
类别(心路历程) | 评论(3) | 阅读(814) | 发表于 08:27
添加背景音乐一般不需要修改网页模板,只需在后台设置中输入一下代码就可以了.
一、学会添加背景音乐

方法一:使用< bgsound>标签
<bgsound>标签共有五个属性,其中balance是设置音乐的左右均衡,delay是进行播放延时的设置,loop是循环次数的控制,src则是我们音乐文件的路径,volume是音量设置。一般我们不需要做复杂的设置,我们可以简单地使用如下格式套就可以了:
 < bgsound src="music.wma" loop="-1">

其中,loop是循环次数,等于-1时,是无限循环。src后面带的music.wma是要播放的文件的路径及其文件名,例如我想播放《我思念的城市》,那么我在网上搜到这首歌的url,我可以将代码改为:
 < bgsound src="http://61.236.103.106/music/wma/xw/wsndcs.wma" loop="3">

这样就可以循环播放3次《我思念的城市》了,这种方法的特点是,当页面打开时音乐播放,如果将页面最小化以后播放音乐会自动暂停。

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

<embed>标签也有很多参数,但我们只挑最简单的讲一下,击中要害即可。

示例代码:< embed src="xidian.mp3" autostart="true" loop="true" hidden="true">< /embed>

复杂代码如下:
<div style="position: absolute; width: 105px; height: 24px; z-index: 3; left: 733px; top: 439px" id="layer3">
<embed src="http://61.236.103.106/music/wma/xw/wsndcs.wma" autostart="true" loop="true" hidden="" width="102" height="25"><noembed>你的浏览器版本过低,不支持音乐播放,请升级</noembed></div>

其中,参数“autostart”是控制打开页面时音乐是否自动播放,后面引号中的值为true就可自动播放,为false需手动点击才开始播放;参数“loop”是控制循环播放的,后面引号中的值为true就可循环播放,为false只播放一次,为数字则播放指定次数,譬如loop="5"则播放5次。hidden设置是否隐藏媒体播放器。因为embed实际上类似一个Web页面的音乐播放器,所以如果没有隐藏,则会显示出你系统默认的媒体插件的,例如微软自带的Windows Media Player。

使用这种种方法只要不将窗口关闭,它会一直播放。

二、打造PP的音乐播放器

是不是见到别人主页上有PP的音乐播放器?自己也忍不住想要做一个?其实不会做,也没关系,本着鲁迅拿来主义的思想,我们直接copy他们的代码过来就好。

下面是代码,你所需要做的是按Ctrl+F,以mp3或者wma或者mid等音乐格式后缀作为关键词,填写要播放的音乐文件的地址就可以了,然后改成你的,再将这段代码添加到你的后台设置代码中去即可。这仅仅是一种方法,不同音乐播放机都可以用这种方法实现。

<align='center'>
<A href="http://bbs.xidian.edu.cn/"><IMG height=50 src="http://202.117.112.11/logo.gif" width=100 border=0></A>
<!-- 古典播放机 begin -->

<div align="center">
<div>
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="phx" width="0" height="0"codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>
<param name="URL" value="http://www.wuyabai.com/music/WithanOrchid.wma">
<param name="currentPosition" value="0">
<param name="playCount" value="100">
<param name="autoStart" value="-1">
<param name="currentMarker" value="0">
<param name="volume" value="70">
<param name="uiMode" value="full">
<param name="enabled" value="-1">
<param name="enableContextMenu" value="-1">
<param name="enableErrorDialogs" value="0">
</object>
</div>

<img src="http://www.blogbus.com/blogbus/blog/userfiles/9812/1080487868.gif">
<br>
<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536074.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536369.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536074.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536369.gif' onclick=phx.controls.Previous();>

<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536092.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536163.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536092.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536163.gif' onclick=phx.controls.play();>
<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536105.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536174.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536105.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536174.gif' onclick=phx.controls.pause();>

<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536115.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536186.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536115.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536186.gif' onclick=phx.controls.stop();>
<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536125.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081537562.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536125.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081537562.gif' onclick=phx.controls.next();>
<input type=image width="16" height="16" src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536230.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536139.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536230.gif' onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081536139.gif' onclick=phx.settings.mute=phx.settings.mute==true?false:true;>
</div>
<p align='center'>请耐心等待缓冲,勿重复点击播放</p>

<p align='center'><a href="http://www.wuyabai.com/music/WithanOrchid.wma" target="_blank"Title="想要你就点嘛^_^">歌曲下载</a>
<input type=image src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081567276.gif' onmouseover= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081567289.gif' onmouseout= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081567276.gif'
onmousedown= src='http://www.blogbus.com/blogbus/blog/userfiles/9812/1081567289.gif'
onclick=phx.URL="http://www.wuyabai.com/music/WithanOrchid.wma";phx.controls.play();></p>
</div>
</div>
</td>
</tr>
</table>
<!-- 古典播放机 end -->

三、如何得到自己想放的音乐?

一种方法是利用网页提供的上传机制,自己上传,然后得到URL插入就可以了。但,我们有必要亲自上传么?现在是网络时代,网络上什么资源都可以找得到的。告诉你几个找歌曲的搜索引擎吧,你自己找。

百度MP3: mp3.baidu.com/
可以搜索歌词、mp3、rm、wma、flash、铃声等,搜索后可以看到文件大小、该文件的下载速度,还可以在线试听哦。
雅虎的一搜网:http://music.yisou.com/,用百度搜索不到,就用它了,速度也很快,后起之秀,势头强劲啊!
后备的两个音乐搜索引擎:
搜刮网:http://www.sogua.com/,没怎么用过,感觉不如前两者好。
Google:http:www,google.com,搜索引擎的老大,怎么搜索,要看个人搜索技巧了,
例如百度,你点一下视听嘛,看到弹出来的小试听窗口没有?上面有歌曲出处的URL啊,睁大眼睛看看。

四、播放列表的制作

你用过winmap没有?Foobar呢?那至少也用过windows自带的Media player播放器吧?播放器大都支持播放列表功能,支持m3u和pls等格式的播放列表文件。如果我们自己做一个播放列表,再上传到网上,我想我们就可以随心所欲地播放歌曲了。

以m3u格式为例,照着下面的代码模仿就是了
#EXTM3U
#EXTINF:-1,王菲 - 我愿意
music.popsing.com:8699/popsing/1051/28.wma

#EXTINF:-1,我们的爱 FIR
www.aqlife.com/uploadfile/2004101404742128.wma

#EXTINF:-1,陈淑桦 - 梦醒时分
www.sdjnmz.com/MZHONG/Htdocs/zhengzhihua/《梦醒时分》.wma
#EXTM3U
#EXTINF:-1,许巍-我思念的城市
61.236.103.106/music/wma/xw/wsndcs.wma

#EXTINF:-1,戴佩妮-什么都舍得
wma.cnyule.com/wma_d/009/16.Wma

其中,第一行的#EXTM3U是表示了文件的格式,这一行一定要有。#EXTINF这一句,是写文件的信息,可有可无,-1这个参数是表示播放时间由歌曲而定。看到歌曲链接没有?按你喜欢的顺序放好就可以了。上传到网上,将m3u文件的URL放在同wma和mp3的位置上,就可以连续听到你排列好的歌曲了。

Google是个好朋友,你不明白的或想了解更多的,可以找他问问啊。

五、关于背景音乐的播放

添加背景音乐会影响页面打开的速度,请斟酌使用!由于背景音乐来源不定,有可能造成页面读入的暂时停顿或其他令人疑惑的障碍。此外,还有些人不喜欢弹出来的网页带有背景音乐。并且blog无法保证您选用的外来音乐一定可以播放。如果一定要添加背景音乐的话,推荐使用midi格式或者wma格式的,因为文件比mp3要小,打开页面的速度会稍微快一点点。一般可用的是wma格式。
网页背景音乐代码:

将这段代码插入到您的<head></head>之间
当您打开网站时即可听到背景音乐:
<bgsound src=china.mid loop="-1">
这种当网页最小化之后,音乐会消失

网页背景音乐的代码:
<embed src="http://XXX.com/XXX.mp3" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1" height="1"></embed>
1.mid表示音效文件
<embed src="1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1" height="1"></embed>
上面的网页背景音乐代码可以加入FLASH动画的绝对地址(或相对地址)
<embed width=1 height=1 autostart="true" loop="true" controls=PlayButton console=clip1 nolabels=true type="audio/x-pn-realaudio-plugin" src="1.ram"> </embed>
ram格式的音乐文件专用网页背景音乐代码:
<embed src="1.mid" align="center" border="0" width="1" height="1" width="100" autostart="true" loop="true">
指定播放器的大小(width、heigh)、是否自动(autostart标记)、是否循环播放(loop标记),而浏览者则可以自主地决定是否播放音乐。
此代码可以当作网页中插入FLASH动画的代码用。只要把1.mid替换为FLASH动画的相对地址或决对地址就OK了。
<embed src="1.mp3" align="center" border="0" width="1" height="1" width="100" autostart="true" loop="true">
此代码可以加mp3形式的音乐为网页背景音乐
<EMBED src="http://XXX.com/XXX.mp3" width="0" height="0" border=0 autostart="ture" loop="ture"></EMBED>
1.mid表示音效文件
<bgsound src="1.mid" loop=3>
表示将1.mid音效文件插入到页面为背景音乐,并循环播放3次。
<embed src="1.mid" hidden="true">
1.mid表示音效文件
<bgsound src="1.mid" loop="infinte">
1.mid表示音效文件
<embed src="1.mid" hidden="true" loop="true">
1.mid表示音效文件
<bgsound src=1.mid loop="-1">
1.mid表示音效文件
网页音乐播放器代码
rm文件在线播放
<embed height=25 src=www.xiakedao.com/biyun/ren/a.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" controls="PlayButton">
autostart="false" 打开页面时处于候命状态,autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值,播放器面板有些不同
midi、au、avi文件在线播放
<EMBED SRC="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid"; width="47" height="24" AUTOSTART=TRUE>autostart="false" 打开页面时处于候命状态,autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值,播放器面板有些不同
asf文件在线播放
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body topmargin="0" leftmargin="0">
<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=7.0 height=53 id=NSPlay0 name=NSPlay type=application/x-oleobject width=87 VIEWASTEXT standby="Loading Microsoft Windows Media Player components..." border="0"><param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="1">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="65280">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<param name="Filename" value="http://music.sdcatv.net/biyun/wlsd/down/yin/gequ/asf/5.asf";>
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIstyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="-1">
<param name="ShowAudioControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="-1">
<param name="ShowStatusBar" value="-1">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="-1">
<param name="Volume" value="0">
<param name="WindowlessVideo" value="0">
</object>
其中<param name="AutoStart" value="0"> 0为打开页面处于待命状态,为1时打开页面直接播放 </body>
</html>

流式收听mp3方法:
*.mp3,http://*.mp3,http://...琱ttp://*.mp3
把上面的的文件另存为*.m3u,就可实现在线播放*.mp3(支持连续播放)

mpeg影象在线播放:
等等,让它下载<img border="0" dynsrc="http://music.cnvnet.com/video/0321.mpeg ;
" start="fileopen">

rm影像在线播放 代码:
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=114 height=100>
<param name="_ExtentX" value="3016">
<param name="_ExtentY" value="2646">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/002.ram";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>

加几个控制器
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=300>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="7938">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object> <object id="vid2" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=30>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="794">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram";>
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>

<embed src="http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv"
autostart="true" loop="true" width="200" height="150" >
把这个网址http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv换成你要看的电影就行了




有图像的rm格式:
<OBJECT classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' height=288 id=video1 width=305 VIEWASTEXT>
<param name='_ExtentX' value='5503'>
<param name='_ExtentY' value='1588'>
<param name='AUTOSTART' value='-1'>
<param name='SHUFFLE' value='0'>
<param name='PREFETCH' value='0'>
<param name='NOLABELS' value='0'>
<param name='SRC' value='http://media.cdut.edu.cn/ram/new/xiaoxin1.ram'>
<param name='CONTROLS' value='Imagewindow,StatusBar,ControlPanel'>
<param name='CONSOLE' value='RAPLAYER'>
<param name='LOOP' value='0'>
<param name='NUMLOOP' value='0'>
<param name='CENTER' value='0'>
<param name='MAINTAINASPECT' value='0'>
<param name='BACKGROUNDCOLOR' value='#000000'>
</OBJECT>
无图像的rm格式:如相声,歌曲。。。
<object ID='video2' WIDTH='300' HEIGHT='62' CLASSID='CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA'>
<param name='_ExtentX' value='9657'>
<param name='_ExtentY' value='847'>
<param name='AUTOSTART' value='-1'>
<param name='SHUFFLE' value='0'>
<param name='PREFETCH' value='0'>
<param name='NOLABELS' value='0'>
<param name='SRC' value='http://210.242.69.206/ramgen/broadcast/BCC/encoder/hipop.rm'>
<param name='CONTROLS' value='StatusBar,controlpanel'>
<param name='CONSOLE' value='Clip1'>
<param name='LOOP' value='0'>
<param name='NUMLOOP' value='0'>
<param name='CENTER' value='0'>
<param name='MAINTAINASPECT' value='0'>
<param name='BACKGROUNDCOLOR' value='#000000'>
</object>
最简单的media格式的播放器。。自动识别有无图像,但是版本是你机器的!
<embed src='mms://61.175.132.221/tv/mtv/f4/makeawish.wmv' width=200 height=200 autostart=true loop=true></embed>
有图像的media播放器,自动调用网上的插件。
<object id=nstv classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width=280 height=265 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>
<param name='URL' value='http://202.99.11.42/xiangsheng/ymjr.wma'>
<PARAM NAME='UIMode' value='full'><PARAM NAME='AutoStart' value='true'>
<PARAM NAME='Enabled' value='true'>
<PARAM NAME='enableContextMenu' value='false'>
<param name='WindowlessVideo' value='true'></object>
无图像的media播放器。。。同上。
<object id=nstv classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>
<param name='URL' value='http://202.99.11.42/xiangsheng/ymjr.wma'>
<PARAM NAME='UIMode' value='full'><PARAM NAME='AutoStart' value='true'>
<PARAM NAME='Enabled' value='true'>
<PARAM NAME='enableContextMenu' value='false'>
</object>
只是界面不同的media的调插件播放器。。建议不用这个,,你可以看!
<embed src='http://av.wanwa.com/fileroot/AV/Ramfiles/23809.ram' type='audio/x-pn-realaudio-plugin' console='Clip1' controls='ControlPanel,StatusBar' height='60' width='275' autostart='true'></embed>


0

评论Comments