01月31日, 2014 21,977次
标题刚写出来,感觉有点吹牛了啊。。。小新也不能把全部可用的音乐播放器找出来^-^,小新只是分享几款常用的,或者是简洁方便的。或者大家都知道了。。。那小新就自个当个备份吧。有时候要用的时候光凭想还真没办法打出来。
OK,先来说说第一款,也是小新博客之前常用的这款:HTML5 audio(mediaelementjs)
这个是可以直接在博客里面调用的,也是使用最新的HTML5超文本标记语言,可以做音乐播放器,也可以做为视频播放器。
因为大部分的网站都支持HTML5了,所以实用性毋庸置疑了,当然最方便的是可以直接右键下载视频或者音乐(可能也是不被一些视频网站所使用的原因。)这里先不表。但是实测安卓uc浏览器打开小新的博客是可以听音乐的(可能点击播放的话他不显示,但是是会播放的!)。可是虾米的网页音乐播放器小新手机是放不了的。
使用的话代码也简单:<audio src="地址.mp3" controls="controls" name="media"/></audio>
播放器展示:
如果对视频播放器感兴趣,可以点击直达,到一个英文的网站了解一下!
第二款是来自法国的一款很简洁的Flash音乐播放器,有点小清新,外观还是不错的。目前拥有七款不同的样式,比如“迷你”、“经典”、“带歌曲列表”等。你可以直接调用,但是小新是不推荐的,因为需要远程调用它的swf样式,这样对于博客速度不好。所以小新推荐下载它的样式文件,本地调用更好点。注意这款播放器只支持mp3(估计别的也不常用)
1、Mini代码(dewplayer-mini.swf替换成成自己的地址):
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=MP3地址" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-mini.swf?mp3=MP3地址"/></object>
Mini样式展示:
2、Classic代码(dewplayer-mini.swf替换成成自己的地址):
<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=MP3地址" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer.swf?mp3=MP3地址"/></object>
Classic样式展示:
3、Multi代码(dewplayer-multi.swf替换成成自己的地址):
<object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3地址" width="240" height="20" id="dewplayer-multi"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-multi.swf?mp3=mp3地址"/></object>
Multi样式展示:
4、Multi Rect代码(dewplayer-rect.swf替换成成自己的地址):
<object type="application/x-shockwave-flash" data="dewplayer-rect.swf?mp3=mp3地址" width="240" height="20" id="dewplayer-rect"><param name="wmode" value="transparent"/><param name="movie" value="dewplayer-rect.swf?mp3=mp3地址"/></object>
Multi Rect样式展示:
至于余下的三款样式就不一一展示了,因为带播放列表的还要再编辑playlist.xml文件,比较繁琐,实际上如果真要带播放列表可以直接使用虾米播放器,也就不需要自己制作的了!
如果需要更详细的信息或者使用方法,可以做传送阵到它的官网查看,它里面可以自助选择各种样式生成代码。因为是法文,看不懂请自备翻译。
如果需要更详细的信息或者使用方法,可以做传送阵到它的官网查看,它里面可以自助选择各种样式生成代码。因为是法文,看不懂请自备翻译。
这一款播放器我挺喜欢的,不占地方是一个,点击播放才拉出进度条,停止又缩回去。它有一个插件版:
不喜欢插件,可以直接使用代码。但是需要下载player.swf文件(点击下载),然后上传到 wp-content/theme/主题目录下,再到主题的 functions.php 中间位置 添加如下函数:
/**添加 flash player */ function myplayer($atts, $content=null){ extract(shortcode_atts(array("auto"=>'no',"loop"=>'no'),$atts)); return '<embed src="'.get_bloginfo("template_url").'/player.swf?soundFile='.$content.'&bg=0xeeeeee&leftbg=0x357dce&lefticon=0xFFFFFF&rightbg=0xf06a51&rightbghover=0xaf2910&righticon=0xFFFFFF&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop='.$loop.'&autostart='.$auto.'" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" width="290" height="30">'; } add_shortcode('music','myplayer'); /**
然后需要播放器时,可以直接编辑代码:[mu sic]MP3地址[/mu sic] 调用去掉空格!
Audio Player样式展示:[music]http://sc.111ttt.com/up/mp3/322714/6CD51207A9438E018AA7FF50494FA9E2.mp3[/music]
当然,这个代码的使用是转自Dream Catcher,它的颜色是可以修改的,上面说的只是插件的代码版,实际上它还有一种直接使用代码调用是需要7行代码,需要调用两个样式,不过并不需要修改主题文件。代码如下:
<script language="JavaScript" src="https://img.xkfree.com/wp-content/files/audio-player.js"></script>
<object type="application/x-shockwave-flash" data="https://www.xkfree.com/wp-content/files/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="https://www.xkfree.com/wp-content/files/player.swf">
<param name="FlashVars" value="playerid=audioplayer1&soundFile=mp3地址">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
<object type="application/x-shockwave-flash" data="https://www.xkfree.com/wp-content/files/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="https://www.xkfree.com/wp-content/files/player.swf">
<param name="FlashVars" value="playerid=audioplayer1&soundFile=mp3地址">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>
外观展示:
不知不觉就写了这样,可能大家会觉得眼花吧。。。从晚上八点多写到现在,半夜12点半了。小新基本是个代码盲,所以大家可以从上面的代码中简化一下也许也可以。咱们插个音乐也不过是为了方便嘛。呵呵,不说了。有时间再补个图。睡觉去,晚安!
不错的文章
很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。
不错
很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。
正好在寻觅合适的播放器,非常感谢。马克互联网祝你新年快乐,马年行大运,马上有财,马上有喜,马上啥都有。。。
有用就好!呵呵 你也新年发财!
来个酷炫的。。
很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。
不说出来还没事,说出来就有事了。
这几个回复还是进去了。。。无语 多说看中你了?
应该是,没办法。长得特么没有RP
不错,支持一下~
很不好意思 今天才看到多说的垃圾评论里有评论 还是正常的评论被权限了。。多说的拦截真是好没有道理。。抱歉。。
呵呵,多说经常抽风,我都想抛弃她了。
这回复还是进去了。。。无语 多说看中你了?
话说我经常去多说那个论坛发牢骚贴,估计是怕了我了。哈哈~
收藏了!很漂亮。
呵呵 第二个有点小清新 第三个很简洁 第一个可以直接下载mp3
很不错,正需要
发现跳转页面可以使用的播放器不是很多。新手很苦恼哈。
第一个还是很简单的
收藏备用!我现在用的是 沐风写的插件,也挺不错~
看个人喜好了 想用插件就插件 想添代码就代码。。
对于小白不晓得该选哪一个呢?博主觉得哪个更实用长久一些呢?
微软的onedrive不错,挺坚挺的。它以前叫skydrive
错了 我以为你是说外链呢 播放器没有什么长久的 都一样 只不过上面的第一个是html5的 未来的主流 下面两个是flash的 现在的主流..
遇到个问题 因为我改固定链接 今天想起来改改 就网站启用伪静态 然后其他都好 发现音乐都不行了 不能播放 那些音乐播放器插件也不管用了 不晓得是怎么回事呢?
HTML5的不错,就是播放器的颜色不知道能不能定义?
这就不知道了 我一般直接用 而且还比较契合我的主题,所以就没研究 。你看我的右上角的视频播放器 也是html5 还可以.
嗯,我就用了默认的黑色,跟我主题也还行。顺便我看不到你右上角的视频,可能是我浏览器的问题,显示视频格式或mime类型不支持
额 不会吧?现在手机都能看的 你的不能?什么浏览器呀?IE?
火狐
我擦 那我就不懂了 我是谷歌。。
请问您博客的那个放音乐播放器的侧边栏模块怎么加的?
额 这个是我主题的模块 你需要的话 可以搜索侧边栏教程
我知道 我用的也是这个主题 zanblog 可我从小工具里加文本框没有显示像您这样的标题和边框 您是怎么加的 我在网上搜索了很多教程可没有一个能解决此主题问题
哦 这样啊 我是从主题代码里修改的 也就是侧边栏sidebar里面,我也不怎么懂,所以只是调用了下面的样式,然后加入了视频播放器代码。
哦 是这样 知道了 谢谢
不客气