点击即可将『Google后花园』加入Google工具栏 点击即可将『Google后花园』加入Google Reader 点击即可将『Google后花园』加入Google HomePage 

假如你有Gmail邮箱,你就可以加入Google Garden中文社区

2007年5月19日星期六

添加Blogger所缺少的页面元素:Music Player

  Blogger所提供可添加页面元素已经够多了,但是偏偏少了一个Music Player(音乐播放器)页面元素。这对那些爱好音乐,希望通过音乐展现自己个性的人们,该是一个多大的遗憾啊。好在Blogger给我们提供了自行添加的途径,有一定代码编写能力的Blogger用户可以轻松搞定,或者你可以到一些网站去申请一个更好看的播放器。但是本文要介绍的是一种比较简单的实现方式,页面的显示效果也不差,操作步骤如下图:

在可添加页面元素列表中,找到下图的类型,按图示操作。

  我们可以到Blogger控制台,添加一个“HTML/JavaScript页面元素”,然后编辑这个页面元素,直接修改Html,向其中添加代码来实现。

  准备好待添加的代码,如下:

<script>document.write('<embed quality="high" loop="0" autogotourl="0" autostart="0" showstatusbar="1" height="69" type="application/x-mplayer2" src="http://hi.baidu.com/fujianwzh/music/music.pls" mediawrapchecked="true" invokeurls="0" width="100%" enablecontextmenu="0"> ');</script>

  你可以直接复制以上的代码使用,或者自行进行一些修改。
  虽然类似的方法有多个,但是以上代码有着明显的优点:代码简单,而且兼容IE和FireFox
  缺点是:如果用户的电脑没有安装任何播放器,那就实现不了这个效果了。对网页美化要求很苛刻的人士来说,这个代码也并不适用。
  不过,本人对这些缺点倒不是非常在意。

  你可能会注意到这样的一行代码:
src="http://hi.baidu.com/fujianwzh/music/music.pls"
  其实这是一个播放列表文件,可以按顺序播放多个文件,这样看上去才更像音乐播放器。不管怎么说,总不能让每个访问者总是反复地听一首重复而又单调的歌曲吧。你也可以用记事本自行编辑这个文件,修改成你自己喜欢的歌曲,或者干脆替换成其他的不同类型的列表文件。

  请看这个播放列表文件的格式:
<ASX Version="3.0" PREVIEWMODE="NO">

<entry>
<ref href="http://www.zj1015.com/song/333/05439_1.mp3" />
</entry>

<entry>
<ref href="http://www.gddaming.com/mlh.wma" />
</entry>

</ASX>
  我想,这个播放列表文件修改起来应该没有什么难度可言吧。

  有关Embed语法的一些简单说明:
Embed
  (一)、基本语法:
  embed src=url
  说明:embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE 都支持。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
  示例:<embed src="your.mid">

  (二)、属性设置:

  1、自动播放:
语法:autostart=true、false
说明:该属性规定音频或视频文件是否在下载完之后就自动播放。
true:音乐文件在下载完之后自动播放;
false:音乐文件在下载完之后不自动播放。
示例:<embed src="your.mid" autostart=true>
   <embed src="your.mid" autostart=false>

  2、循环播放:
语法:loop=正整数、true、false
说明:该属性规定音频或视频文件是否循环及循环次数。
属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;
属性值为true时,音频或视频文件循环;
属性值为false时,音频或视频文件不循环。
示例:<embed src="your.mid" autostart=true loop=2>
   <embed src="your.mid" autostart=true loop=true>
   <embed src="your.mid" autostart=true loop=false>

  3、面板显示:
语法:hidden=ture、no
说明:该属性规定控制面板是否显示,默认值为no。
ture:隐藏面板;
no:显示面板。
示例:<embed src="your.mid" hidden=ture>
   <embed src="your.mid" hidden=no>

  4、开始时间:
语法:starttime=mm:ss(分:秒)
说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
示例:<embed src="your.mid" starttime="00:10">

  5、音量大小:
语法:volume=0-100之间的整数
说明:该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
示例:<embed src="your.mid" volume="10">

  6、容器属性:
语法:height=# width=#
说明:取值为正整数或百分数,单位为像素。该属性规定控制面板的高度和宽度。
height:控制面板的高度;
width:控制面板的宽度。
示例:<embed src="your.mid" height=200 width=200>

  7、容器单位:
语法:units=pixels、en
说明:该属性指定高和宽的单位为pixels或en。
示例:<embed src="your.mid" units="pixels" height=200 width=200>
   <embed src="your.mid" units="en" height=200 width=200>

  8、外观设置:
语法:controls=console、smallconsole、playbutton、pausebutton、stopbutton、volumelever
说明:该属性规定控制面板的外观。默认值是console。
console:一般正常面板;
smallconsole:较小的面板;
playbutton:只显示播放按钮;
pausebutton:只显示暂停按钮;
stopbutton:只显示停止按钮;
volumelever:只显示音量调节按钮。
示例:<embed src="your.mid" controls=smallconsole>
   <embed src="your.mid" controls=volumelever>

  9、对象名称:
语法:name=#
说明:#为对象的名称。该属性给对象取名,以便其他对象利用。
示例:<embed src="your.mid" name="sound1">

  10、说明文字:
语法:title=#
说明:#为说明的文字。该属性规定音频或视频文件的说明文字。
示例:<embed src="your.mid" title="第一首歌">

  11、前景色和背景色:
语法:palette=color|color
说明:该属性表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名,还可以是transparent(透明)。
示例:<embed src="your.mid" palette="red|black">

  12、对齐方式:
语法:align=top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom
说明:该属性规定控制面板和当前行中的对象的对齐方式。
center:控制面板居中;
left:控制面板居左;
right:控制面板居右;
top:控制面板的顶部与当前行中的最高对象的顶部对齐;
bottom:控制面板的底部与当前行中的对象的基线对齐;
baseline:控制面板的底部与文本的基线对齐;
texttop:控制面板的顶部与当前行中的最高的文字顶部对齐;
middle:控制面板的中间与当前行的基线对齐;
absmiddle:控制面板的中间与当前文本或对象的中间对齐;
absbottom:控制面板的底部与文字的底部对齐。
示例:<embed src="your.mid" align=top>
   <embed src="your.mid" align=center>

3 条评论:

  1. 详解,太好了,Embed基本明白了!

    回复删除
  2. 如果你是一个学生,你知道我想要做什么是有趣的,而不是写一篇学期论文或文凭。我们可以帮助你,当你与朋友一起放松。大学生论文网

    回复删除

注意:只有此博客的成员才能发布评论。

Google Garden 中文社区 Google Group