当前位置:秋叶网络博客 网络技术 ◊ 使用JS改造的简单网页音乐播放器,仿QQ空间样式

使用JS改造的简单网页音乐播放器,仿QQ空间样式

作者:秋叶 发表时间:2014年3月30日

最近有好多东西要发表分享给大家,但由于时间问题,越多反而显得越乱,都不知道从何下手,该做的事情还有很多,最近整博客,又整得有点不兼容了,在想抽个时间修复它,可能时间要比较长,因为无从下手,必须一个一个代码分析,因为我碰到的问题貌似都不是简单的问题,博客放在服务器端好端端,访问并无兼容问题,但在本地调试却不兼容低版本ie,出现网页布局错乱的现象,很是纳闷。

还有就是那个免费空间网ccaeo.com,一直都想写个教程,因为这个网站刚开设不久,完全没有任何推广,我也只是挂在那儿,没时间去管它,但我发现几乎每天都有一些百度搜索来的流量,远远超过我经常走访和经营的现在这个博客的流量(百度搜索),而使用ccaeo.com的免费空间是有一定的诀窍和方法的,如果不懂细节操作,不懂点英文,将以失败告终。所以一直想写个教程。

还有就是计划博客采用全站ajax的,后来发现这东西不好整,尤其对于我的主题,网上的方法几乎实现不了,想装个插件扒效果下来也出错,无奈,先搁置一阵子再说,如果成功后将公布分享给大家。不太赞成那些把一点小技术都藏藏掩掩的人。

好了,前言到此结束。进入正题,为了从简单做起,给自己的博客首马当先加了个简洁网页mp3播放器,首先说一下它的优点:代码不多,仅仅几行调用代码外加一个16kb的独立js;简洁美观;占用空间小;模样类似qq空间,但没那么高级~;兼容性良好;自定义js文件。

1.首先下载一个js文件,同目录下也要放置一个控制加载动画图片"点此下载",上传到自己的服务器空间。

2.把QQ空间的那个音乐播放器旁白那个gif下载下来,或者另行网上找一个gif图片,改名为music.gif,上传到自己主题的images文件夹下。

3.调用方法,在网页中需要调用的地方加入以下代码:

<script src="http://www.mizuiren.com/...(换成你自己的js地址)"></script>
<script>audiojs.events.ready(function() {audiojs.createAll();});</script>
<audio src="http://cctv3/xiongdinandang.mp3(换成自己的mp3地址)" preload="auto"></audio>

<img alt="music" src="<?php bloginfo('template_directory'); ?>/images/music.gif" class="music" height="25" width="25">

位置请通过<div><span><li>等css样式控制。

很简单几乎就这样完成了,效果可以看看我博客上面的工具条,

播放器1

播放器2

播放器3

播放器外观可以自己设置,此外观是我自己设置的,如果不喜欢可以自定义自己的外观,通过js里面的css模块可以修改,如果要自动播放,请在js文件中搜索autoplay:然后把后面的false改成true就行了,我设成false是因为考虑到音乐这东西每个人爱好的风格都不一样,设成自动播放未免有点强制性,这样不太好,况且在音乐方面的争端永无休止,都是仁者见仁,智者见智,谁都不承认自己的幼稚,因为我也浏览过自动音乐播放的网站,况且是自己不喜欢的音乐,那种感觉啊~如果让别人选择来播放,性质就不一样了~鄙人拙见~

好了,“师傅”引进门,修行靠个人。希望大家开发更加简洁美观,兼容性更好的播放器,欢迎分享。