WordPress免插件实现音乐播放

算是折腾了一晚上,终于给网站加上了音乐播放功能,先秀一个效果:

TM截图20140112214814

 

我一开始是尝试了很多的插件,Flash的就不考虑了。有几个插件用的HTML5+jquery,样式好看,功能强大。可以显示播放列表、专辑图片、歌曲信息等。

不过用起来都却很不顺手,一个是外国人开发的,显示的歌曲信息都不支持中文-,-。另一个是一个中国高三技术宅写的,不知道为什么运行后会加载各种js库,包括cnzz之类的就有好几个。。。

于是我就自己写了音乐播放器,简单爆了,非常好用!其实也是,何必什么都去找插件。

 

我是用的是HTML5中自带的音乐播放器,只需一句html即可搞定!同时,音乐播放器还支持ios安卓等浏览器。

在你需要加入播放器的任何地方(比如侧边栏、文章等),加入下面一句:

<audio src="https://hzy.pw/song.ogg"></audio>

其中,src属性为歌曲的链接,歌曲支持mp3、ogg、wav格式

效果预览:

 

可以添加control属性,使播放器显示 播放暂停、进度条、音量 这几个设置。如果在<audio>间加入文字,就可以在不支持HTML5的浏览器中显示这些文字。

<audio controls="controls" preload="none" loop="loop" autoplay="autoplay" src="http://www.gqqa.com/www.gqqa.com/5/ulWpCNzORuruO.mp3" >
  <b>播放器不兼容你的浏览器</b>
</audio>

 

效果预览:

 

【自动播放】加入属性 autoplay 即可实现自动开始播放,不用手动点击开始。

【循环播放】加入属性Loop即可。

【自动加载】加入属性 preload=”none”。如果不加这句,html5默认定义是加载页面时就会缓冲音乐,而不是开始播放后,才开始缓冲!

==================================

就是这样~!over

如果还有疑问请向我留言。

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注