算是折腾了一晚上,终于给网站加上了音乐播放功能,先秀一个效果:
我一开始是尝试了很多的插件,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
如果还有疑问请向我留言。