找回密码
 快速注册

QQ登录

只需一步,快速开始

查看: 21337|回复: 3

关于HTML 音乐播放器代码|音乐播放器网页代码大全

[复制链接]
眼镜蛇 发表于 2010-10-26 13:20:58 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?快速注册

×
HTML音乐播放器网页代码大全

白色代码:
  1. <EMBED src=http://www.wenliren.com/testmusic.mp3 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></EMBED>
复制代码


黑色代码:
  1. <EMBED style="FILTER: Xray" src=http://www.wenliren.com/testmusic.mp3 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></EMBED>
复制代码


灰色代码:
  1. <EMBED style="FILTER: Gray" src=http://www.wenliren.com/testmusic.mp3 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></EMBED>
复制代码


棕色代码:
  1. <EMBED style="FILTER: Invert" src=http://www.wenliren.com/testmusic.mp3 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></EMBED>
复制代码

其中:width=100 height=40 中的数字分别表示播放器的宽度和高度,注意:都选择0将隐藏播放器(隐藏时一定要选择自动播放)
autostart="true"中true或1表示自动播放,false或0表示手动播放
loop="true" 中的true或1表示重复播放,false或0表示只播放一次


  1. <EMBED src=http://www.wenliren.com/music.MP3 width=200 height=30 type=audio/x-pn-realaudio-plugin autostart="0" controls="ControlPanel"></EMBED>
复制代码


转载内容:

以前经常有人会问我如何在页面中加入播放器?对于一些新手来说,可以在编辑时点击插入播放器而无需用到HTML代码。但是,千篇一律的款式是不是会让人久而生厌呢?其实,要想让你自己的网页变得生动,一款漂亮的,合乎页面整体设计的播放器就显得极其重要了。现在为你推荐一些漂亮的播放器,你只需复制代码放入你的文章里,就可以使用了。

一、几款最常用的播放器

代码如下:

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


代码如下:

  1. (EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true")
复制代码


代码如下:

  1. (EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0")
复制代码


代码如下:

  1. (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的表格,根据自己的图片素材,装饰美化自己的播放器啦。只要你有足够的创意,调整代码,就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。
首先我们可以为黑色播放器加上一个边缘(中间绿底的部分为原黑色播放器代码)

代码如下:
  1. <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>
  2. <TBODY>
  3. <TR>
  4. <TD>
  5. <TABLE borderColor=#000000 align=center border=1>
  6. <TBODY>
  7. <TR>
  8. <TD>< align=center><EMBED style="FILTER: Xray" src=http://www.wenliren.com/testmusic.mp3 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
复制代码


当然也可以为蓝色播放器加上粉色边缘
(中间粉底部分为原蓝色播放器代码)

代码如下:
  1. <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>
  2. <TBODY>
  3. <TR>
  4. <TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5 border=2>
  5. <TBODY>
  6. <TR>
  7. <TD style="FILTER: alpha(opacity=100,style=3)">
  8. <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>
复制代码

 
还可以将播放器置于一个单独的表格里,并加上表格的透明特效,播放器上的花纹就是表格的底图。(中间紫底部分的为原蓝色播放器代码) 

代码如下:
  1. <TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
  2. <TBODY>
  3. <TR>
  4. <TD style="FILTER: alpha (opacity=50,style=3)">
  5. <align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>
复制代码


还可以利用动态的GIF背景做成动态播放器
(中间蓝底部分为原来的灰色播放器代码

代码如下:
  1. <TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif border=2>
  2. <TBODY>
  3. <TR>
  4. <TD>
  5. <TABLE align=center border=0>
  6. <TBODY>
  7. <TR>
  8. <TD style="FILTER: alpha (opacity=60,style=3)">
  9. < 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>
复制代码


甚至还可以将动态背景只在播放器底部运行
中间棕底字体为原灰色播放器代码 
 
代码如下:
  1. <TABLE height=40 cellSpacing=0 cellPadding=0 width=300 background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif border=1>
  2. <TBODY>
  3. <TR>
  4. <TD>
  5. <TABLE style="FILTER: Chroma (Color='#000000')" height=40 cellSpacing=0 cellPadding=0 width=300 border=0>
  6. <TBODY>
  7. <TR>
  8. <TD>
  9. <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 表格做成两层或三层的播放器来,呈现你自己不同于他人的特色。这是一个崇尚个性的年代,模仿固然能让你找到捷径,但是创造性才是决定你是否能吸引人的关健。言归正传,如果这个贴能让你有所启发,就达到我们的本意了。也希望今后能看到更多独具特色的播放器出现!



往事流音 发表于 2010-10-26 14:48:32 | 显示全部楼层
开放HTML,在代码下做个演示。就都能看懂了。
回复

使用道具 举报

 楼主| 眼镜蛇 发表于 2010-10-26 14:50:07 | 显示全部楼层
回复 往事流音 的帖子


这个我知道

学习起见
还是贴源代码出来比较实用些
呵呵
回复

使用道具 举报

拉莫斯 发表于 2012-3-12 23:49:47 | 显示全部楼层
jquery里有个jplayer,挺好用的,兼容性也好。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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