查看: 5604|回复: 20

播放器代码教程

[复制链接]

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-1-9 00:05 | 显示全部楼层 |阅读模式
第一步,加播放器的代码(不用别人做的JS播放器),我只要最简单的。
其实要说最简化的播放背景音乐的代码,则下面的代码是最简单的了
<embed src="背景音乐网址">

呵呵,我用的是:
<embed src="背景音乐网址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >
loop="-1" 表示无限次循环播放,可设置播放次数,用具体数字代替即可,比如我希望它播放两次,则loop="2"
controls="ControlPanel"这个控制选项可省略
width="0" height="0"表示隐藏播放。想设置播放器的大小,设置值即可,比如width="480" height="25"
我是放在文章里的,所以直接把文章切换到代码模式粘贴上刚才的代码就可以了。
第二步,实现连续播放多首歌曲

播放器会弄了,用百度或者搜刮找到歌曲的地址,替换代码中“背景音乐网址”就可以播放歌曲了。但是这样只能是一首歌曲啊。没关系,记得当初用winamp或者千千静听的时候不是有个播放列表吗?对,用m3u格式。新建一个记事本文档,在里面写上如下代码保存为“任意名.m3u”:
<ASX version ="3.0">
<Entry>
<Ref href = "以.mid.wma.mp3等结尾的音乐网址1"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等结尾的音乐网址2"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等结尾的音乐网址3"/>
</Entry>
需要更多歌曲可重复“<Entry>……</Entry>”代码
</ASX>

嗯,然后?把保存的文件(例如musci.m3u)上传到你的个人主页或者随便其他水木地方(我是传到googlepage的)。再把m3u的IE地址放到第一步中的“背景音乐地址”处就可以实现连续播放的目的了。不信,试试看。

因为当你打开博客的时候,虽然不能自动播放,但是播放器首先要加载第一首歌曲,当遇到错误无法识别的歌曲地址时就会自动跳转到第二首而播放第二首歌曲。

不过这里需要注意的是,第二首歌曲的地址里不能带有汉字,否则跳转到第二首歌曲的时候它也不会自动播放,第三首,第四首歌曲之后就没限制了,只要歌曲地址对就行。

黑色播放器
<CENTER><EMBED style="FILTER: xray()"
src=http://doom.tzinfo.com/n0wAy/InTheWaitingLine.mp3
width=300 height=50 type=audio/mpeg Pausini--Volevo Dirti
Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1"
volume="0" autostart="true" loop="-1" 32-01.wma Path Winding
The - Kern></EMBED></CENTER>
棕色播放器
<CENTER><EMBED style="FILTER: invert()" src=音乐连接地址 width=300
height=50 type=audio/mpeg Pausini--Volevo Dirti Che Ti
Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1" volume="0"
autostart="true" loop="-1" 32-01.wma Path Winding The -
Kern></EMBED></CENTER>
闪光播放器外加蒙胧化
<CENTER>
<TABLE style="BORDER-RIGHT: #f1dda1 2px ridge; BORDER-TOP:
#bdb76b 2px ridge; BORDER-LEFT: #f1dda1 2px ridge;
BORDER-BOTTOM: #bdb76b 2px ridge; BACKGROUND-COLOR: white"
borderColor=#ffffff cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B2686448.4.gif
border=0><TBODY><TR><TD width=300 height=20 cellPadding="0"
cellSpacing="0"><TABLE align=center border=0><TBODY><TR><TD
style="FILTER: alpha(opacity=60,style=3)">
< align=center><EMBED style="FILTER: invert(); WIDTH:
290px; HEIGHT: 28px" src=音乐连接地址 type=audio/x-ms-wma
autostart="true" loop="-1"
volume="0"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
花播放器
< align=center><TABLE style="BORDER-COLLAPSE: collapse"
height=24 cellSpacing=0 cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B258184577.gif
border=1><TBODY><TR><TD style="FILTER:
Chroma(Color='#000000')">< align=center><EMBED src=音乐连接地址
width=300 height=24 type=audio/mpeg Pausini--Volevo Dirti
Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1"
volume="0" autostart="true" loop="-1" 32-01.wma Path Winding
The - Kern></P></TD></TR></TBODY></TABLE>
播放器蒙胧化
<P align=center><TABLE style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=3, StartX=20, StartY=40, FinishX=0,
FinishY=0)gray(); WIDTH: 300px; HEIGHT:
60px"><TBODY><TR><TD><EMBED src=音乐连接地址 width=270 height=40
type=audio/mpeg loop="true" autostart="true" panel="0">
</TD></TR></TBODY></TABLE></P>
两端朦胧化
<CENTER><TABLE style="FILTER: Alpha(Opacity=300,
FinishOpacity=0, Style=2, StartX=20,StartY=30, FinishX=0,
FinishY=0)invert()"><TBODY><TR><TD><EMBED style="FILTER:
xray()" src=音乐地址 loop="true" width=300 height=30
type=audio/mpeg
showstatusbar="0"></EMBED></TD></TR></TBODY></TABLE></CENTER>
再补充一些
以前经常有人会问我如何在页面中加入播放器?对于一些新手来说,可以在编辑时点击插入播放器而无需用到HTML代码。但是,千篇一律的款式是不是会让人久而生厌呢?其实,要想让你自己的网页变得生动,一款漂亮的,合乎页面整体设计的播放器就显得极其重要了。现在为你推荐一些漂亮的播放器,你只需复制代码放入你的文章里,就可以使用了。
一、几款最常用的播放器

代码如下
(EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg
loop="-1" autostart="FALSE" volume="0")

代码如下
(EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50
type=audio/mpeg volume="0" autostart="TRUE" loop="true")
代码如下
(EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05
type=audio/mpeg loop="-1" autostart="false" volume="0")

代码如下
(EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45
type=audio/mpeg loop="-1" autostart="true" volume="0")
重要提示:
1 复制时务必将(EMBED。。。)前后的括号()替换成<>。这点非常重要。
2 WIDTH代表播放器宽度,HEIGHT代表高度,后面的数值可依自己喜好进行调整。
3 AUTOSTART="TRUE" 这里TRUE代表自动播放,如果换成FALSE则代表手动播放。
二、装饰美化你的播放器
有了基本的款式后,我们就可以根据自己的想象力,巧用HTML的表格,根据自己的图片素材,装饰美化自己的播放器啦。只要你有足够的创意,调整代码,就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。
首先我们可以为黑色播放器加上一个边缘
(中间绿底的部分为原黑色播放器代码)
 

<TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP:
#000000 3px dashed; BORDER-LEFT: #000000 3px dashed;
BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0
bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><P align=center><EMBED style="FILTER: Xray"
src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300
height=45 type=audio/mpeg volume="0" autostart="false" loop="-
1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
当然也可以为蓝色播放器加上粉色边缘
(中间粉底部分为原蓝色播放器代码)
 

 
代码如下
 
<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP:
#ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted;
BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=0 cellPadding=0
align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5
border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg volume="0" autostart="false"
loop="-1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
还可以将播放器置于一个单独的表格里,并加上表格的透明特效,播放器上的花纹就是表格的底图。(中间紫底部分的为原蓝色播放器代码)
 
 
 
代码如下:
<TABLE borderColor=#4f3256 align=center
background=http://upload.yourblog.org/20057/kaka967.20050722115212.png
border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE>
还可以利用动态的GIF背景做成动态播放器
(中间蓝底部分为原来的灰色播放器代码
 
 
代码如下:
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0
background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif
border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=60,style=3)">
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=45 type=audio/mpeg volume="0" autostart="false"
loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE>
甚至还可以将动态背景只在播放器底部运行
中间棕底字体为原灰色播放器代码
 

 
代码如下
<TABLE height=40 cellSpacing=0 cellPadding=0 width=300
background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif
border=1>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Chroma (Color='#000000')" height=40
cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=40 type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE></TD><
/TR></TBODY></TABLE>

这么多五彩缤纷的播放器是不是很吸引你呢?只要你肯花心思,你可以用HTML
表格做成两层或三层的播放器来,呈现你自己不同于他人的特色。这是一个崇尚个性的年代,模仿固然能让你找到捷径,但是创造性才是决定你是否能吸引人的关健。言归正传,如果这个贴能让你有所启发,就达到我们的本意了。也希望今后能看到更多独具特色的播放器出现。

签到天数: 17 天

[LV.4]偶尔看看III

鲜花(0) 鸡蛋(0)
发表于 2008-1-13 18:51 | 显示全部楼层
不错呀~收藏起来用!感谢

签到天数: 54 天

[LV.5]常住居民I

鲜花(5) 鸡蛋(0)
发表于 2008-1-20 21:57 | 显示全部楼层
这个帖子不错!适合新手用做单曲播放!感谢小酷推荐!

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-2-26 17:46 | 显示全部楼层
好好学习,天天向上。。。。。

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-3-18 09:42 | 显示全部楼层
很好看!我也下载收藏了!

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-4-29 13:08 | 显示全部楼层
楼主讲的好详细,还有实例,太感谢了,我收藏了,一个一个把它们用在我的帖子里去~~~

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-5-24 23:05 | 显示全部楼层
感谢小酷详细地讲解,辛苦了!

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-5-28 05:02 | 显示全部楼层
谢谢,学习并收藏了

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-5-31 16:58 | 显示全部楼层
偷走了哈~~谢谢~~

该用户从未签到

鲜花(0) 鸡蛋(0)
发表于 2008-6-11 00:56 | 显示全部楼层
收藏了楼主,谢谢了,辛苦了!
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

网站地图|小黑屋|Archiver|中画网 ( 蜀ICP备11021737号-2 )|网站地图

GMT+8, 2024-5-18 16:21 , Processed in 0.048084 second(s), 28 queries , MemCached On.

上网要文明 发言要理性

Powered by Discuz! © 2008-2023 YinHuaBBS.CN

快速回复 返回顶部 返回列表