生物导航网博客欢迎您......

 
在Blog中添加音乐播放器详解
[ 2006-5-30 14:14:29 | By: help ]
 

此教程主要适用于oblog。因不同博客系统不同,但方法都大同小异。有欠缺的地方,希望能指出,非常感谢!

from: http://www.china-nurse.com/blog/user1/154/archives/2006/2176.shtml#20069

首先我们需要做以下准备:

1.获得音乐资源的URL,大家可以到百度mp3搜索中找。音乐不能太大,否则文件传输会成问题。最好为wma格式的,同种音质比mp3要小的多。把地址http://复制下来备用

2.建议先备份你的模板,不小心把模板改乱了,可以用恢复模板来恢复。(发表日志、修改公告跳过此步)

450)this.style.width=450;">

第一种:直接添加(适用于发表新日志,修改模板、公告)

我不懂代码?没问题!因为oblog系统提供了可视化的操作界面,因此我们可以很方便的插入想要的音乐而不用去碰那些复杂枯燥的代码。这种方法最简便、快捷,比较适合于新手。

1.根据文件格式,点击按钮插入音乐,450)this.style.width=450;" border=0>为插入Winodws Media,支持avi、wmv、wma、asf、mov、mp3格式;450)this.style.width=450;" border=0>为插入Real Media,支持rm、ra、ram、mp3格式。通常我们使用的是wma、mp3格式,点击450)this.style.width=450;" border=0>即可。

2.按照提示把地址贴上去,修改长、宽,是否自动播放,确定。如果觉得太大或太小可再用鼠标自行调整直到满意为止。只播放不显示则宽度:0 ,高度:0 。

 

第二种:代码添加(适用于修改模板、公告)

这种方法比较灵活。我们可以在这里设置播放器是否循环播放、音量的大小、面板的外观等

1,登陆→管理中心→修改公告或修改主模板

450)this.style.width=450;" border=0>

2,点击“源码”,然后把下面这段代码粘贴进去。 如下,点击代码进行演示:

<embed src="http://219.153.7.151:8576//265mu2/0138/5.Wma" autostart="true" loop="1" width="170" height="25"></embed>

450)this.style.width=450;" border=0>

其中"http://219.153.7.151:8576//265mu2/0138/5.Wma" 用你自己音乐的URL替换。

如果你只是想隐藏控制画面,很简单,将width和height都设置为0就可以了。

相关属性 :

autostart=true为设置是否自动播放,true 是,false 否 (内定值)。

loop="true"为设置是否循环播放,true 是, false 只播放一次,为数字则播放指定次数,如loop="5"则播放5次。

HIDDEN="true"
是否完全隐藏控制画面,true 为是,no 为否 (内定)。

WIDTH="整数" 和 HIGH="整数"
设定控制面板的高度和宽度。
width="170" height="25"为分别设置宽170、高25。

VOLUME="0-100"
设定音量的大小,数值是0到100之间。内定则为使用系统本身的设定。

CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板   
smallconsole 较小的面板   
playbutton 只显示播放按钮   
pausecutton 只显示暂停按钮   
stopbutton 只显示停止按钮   
volumelever 只显示音量调节按钮

添加背景音乐可以在公告中添加也可以在模板中添加。直接在公告中添加,不需要更新全站,比较简便,但不能改变位置。在模板中添加需要更新全站,但可以随意添加到模板的任意位置。

这里介绍一种两全其美的方法:利用HIDDEN将播放器隐藏添加在公告中,再将控制按钮放在模板任意位置。

代码如下:修改公告,添加

<EMBED name=wma src="/blog/http://219.153.7.151:8576//265mu2/0138/5.Wma hidden=true type=audio/mpeg autostart="false" loop="-1">

修改模板,在您想添加的位置添加

<SPAN style="BACKGROUND-COLOR: #000000"><FONT color=#cccc33><STRONG>
<MARQUEE style="WIDTH: 87; HEIGHT: 19" scrollAmount=2 bgColor=#000000><FONT color=#cccc33><STRONG>+…聆听…+</STRONG></FONT></MARQUEE></STRONG></FONT></SPAN><FONT> </FONT>
<A href="javascript:document.wma.play()" target=_self>
<FONT style="BACKGROUND-COLOR: #cd0351" color=#ffffff><U> &nbsp;PLAY&nbsp;;</U></FONT></A>&nbsp;<A href="javascript:document.wma.stop()" target=_self><FONT style="BACKGROUND-COLOR: #cd0351" color=#ffffff><U>&nbsp;STOP</U></FONT></A>

当您想更换歌曲时就可以直接修改公告中的代码,而不用修改模板,而它的控制按钮又在您想要的位置。

 

第三种:申请时尚音乐播放器

如果你觉得这样的播放器太普通了,也可以去申请个性时尚的音乐在线播放器,这种播放器支持同时加入多首歌曲在线播放,功能比较完整,界面美观。

几个申请播放器的网址:

WoBox音乐盒:http://www.blogworld.com.cn/music/index.jsp

我的MP3:http://mp3.mz99.com/

我的音乐盒:http://www.94200.com/freebgm/

翠竹:http://mf.cuiz.net/czplayer/reg.asp (注册时间:10:00~13:00 & 20:00~23:00)

宠儿:http://www.onlybeloved.com/player2/user_reg.asp

鸳鸯鹭鸶- http://web.168173.com/starjason/player/index.asp

逆天网络- http://www.ahlq315.com/a/

幸福城市- http://www.popo4.com/bgmusic/

 注册申请选个自己喜欢的款式,先添加歌曲,把你喜欢的音乐统统添加进去,提取代码,把代码复制下来。然后按照上述方法进行修改就可以了!

 

说明:

1.插入背景音乐会使页面声色不少,但最好不要自动播放,因为很多人是一边上网一边听歌,这样就变成协奏曲了。因此尽量让浏览者自己选择,这样即不会减慢网页速度,又能够让浏览者分享自己的音乐。

2.如何确定播放器在页面中的位置:
如果你怕出现错误,有一个非常笨的办法,在你想放播放器的地方,随便敲几个汉字进去,然后切换到源码页面,ctrl+f搜索你刚才键进去的字,然后在这个字的位置把播放器的代码贴上去就好了,呵呵,高手别笑俺~~

有兴趣的就赶快试一试吧!

 
  • 标签:音乐 
  •  
    Re:在Blog中添加音乐播放器详解
    [ 2006-8-22 21:25:41 | By: you3you1(游客) ]
     
    you3you1(游客)

    我刚从你这边学会怎么添加播放器,马上就有人问我怎么添加,我就向他们推荐了你的网页,以此聊表我对你的谢意.

     
     
    Re:在Blog中添加音乐播放器详解
    [ 2006-8-22 19:48:28 | By: you3you1(游客) ]
     
    you3you1(游客)

    真是非常感谢!!


    以下为blog主人的回复:

     u are welcome!

     
     
    Re:在Blog中添加音乐播放器详解
    [ 2006-8-11 23:06:48 | By: Co.(游客) ]
     
    Co.(游客)

    有些播放器好像跟oblog有冲突啊..

    进入模版的原码编辑面板就自动关IE了

     
    发表评论:
    生物导航网博客欢迎您......

    生物导航网博客欢迎您......
    时 间 记 忆
    <<  < 2007 - >  >>
    1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30 31
    最 新 评 论
    生物导航网博客欢迎您......

    专 题 分 类
    生物导航网博客欢迎您......
    最 新 日 志
    生物导航网博客欢迎您......
    最 新 留 言
    生物导航网博客欢迎您......
    搜 索
    用 户 登 录
    生物导航网博客欢迎您......
    友 情 连 接
    博 客 信 息
    生物导航网博客欢迎您......


    Powered by Oblog.