无插件纯代码实现网页、wordpress音乐播放器 – 看近行远
最新消息:

无插件纯代码实现网页、wordpress音乐播放器

教程资源 nullang 2001浏览 0评论

想找一些wordpress播放器,有些播放器其实挺好的,但有些我也还不知道那些代码是什么!然后,网络上百度了不少其他的,发现在测试的过程中,很多都用不了了!现在就分享一下网络上收集来的非插件纯代码播放器了!其实播放器主要有两个元素:播放的载体形式(比如是否需要添加swf音乐播放器等)和音乐链接地址。

第一类样例(纯audio元素):

代码:

<audio controls autoplay style=”margin: auto; top: 0; right: 0; bottom: 0; left: 0;” name=”media” src=”音乐链接地址”></audio>

如果不要自动播放则把代码中的autoplay删了。

附:audiotag

第二类样例(包含swf播放器):

代码:

<embed src=”http://www.imruxin.com/blog/wp-content/uploads/music_player.swf” flashvars=”mp3=音乐链接地址一|音乐链接地址二&autoplay=0″ height=”20″ width=”160″ wmode=”transparent” type=”application/x-shockwave-flash” /> 。
第二排mp3后面的地址就是音乐链接地址,多首歌用“|”链接。最后的autoplay=0为手动(1为自动),下面autoplay参数设置都是一样的! 在附几种播放器类型(当然,有些播放器也可以自己再加css修饰的):
播放器样例2:

代码:

<embed src=”http://www.imruxin.com/blog/wp-content/uploads/mp3player.swf?url=http://***.MP3&amp;autoplay=0″ type=”application/x-shockwave-flash” wmode=”transparent” allowscriptaccess=”always” width=”400″ height=”30″></embed>

播放器样例3:(好像不能设置自动播放)

代码:

<embed type=”application/x-shockwave-flash” src=”http://www.imruxin.com/blog/wp-content/uploads/audio_player.swf?audio_file=http://***.MP3&color=84cfe7″ height=”25″ width=”200″ quality=”best”></embed> 。播放器颜色在color那设置!

播放器样例4:

代码:

<embed src=”http://www.imruxin.com/blog/wp-content/uploads/dplayer.swf?soundFile=http://***.MP3&amp;bg=0xCDDFF3&amp;leftbg=0xDD4B39&amp;lefticon=0xF2F2F2&amp;rightbg=0xDD4B39&amp;rightbghover=0x4499EE&amp;righticon=0xF2F2F2&amp;righticonhover=0xFFFFFF&amp;text=0xDD4B39&amp;slider=0xDD4B39&amp;track=0xFFFFFF&amp;border=0xFFFFFF&amp;loader=0x8EC2F4&amp;autostart=no&amp;loop=no ” type=”application/x-shockwave-flash” wmode=”transparent” quality=”high” width=”290″ height=”24″>。说明:橙色部分是播放器颜色设置样例(红色),你们可以自己更改也可以删除,默认是灰色的(这里显示的是默认的)。autostart代表是否自动播放,有yes和no两个值;loop代表是否循环播放,有yes、no和具体的次数三个值。

最后,希望这篇日志能给你们带来些帮助!还有,欢迎提供更多的播放器代码或者技巧等等!!!

四个播放器打包下载:

http://pan.baidu.com/s/1kT1BLfp
播放器

转载请注明:看近行远 » 无插件纯代码实现网页、wordpress音乐播放器

演示下载 效果演示 下载列表
本文评分
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址