前两天不是无聊做了个视频播放器嘛 ( 点这里查看文章链接 ),然后今天又做了一个音乐播放器!配色方面都是差不多的,都是白色打底,粉色点缀的!另外就是音乐播放器功能也不多,也是基础功能。带有播放/暂停/音量调节/鼠标点击快进等基础播放功能!
播放器展示
使用说明
你可以自定义图标按钮的大小,使用的是CSS伪类,所以直接用font-size来控制大小即可!可以自定义按钮的颜色以及控制条颜色,总之就是所有颜色和组件的大小都可以通过CSS来控制!
引入文件
<link rel="stylesheet" href="css/audio-player.css" /> <script> (function (doc) { var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [1, 1], meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; function fix() { meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; doc.removeEventListener(type, fix, true); } if ((meta = meta[meta.length - 1]) && addEvent in doc) { fix(); scales = [.25, 1.6]; doc[addEvent](type, fix, true); } }(document)); </script> <!-- 以上内容需要引入在网站顶部 head 部分内即可 --> <script src="js/jquery.min.js"></script> <script src="js/audio-player.js"></script> <script> $(function () { $('audio').audioPlayer(); }); </script> <!-- 以上内容需要引入在网站底部,不能放在播放器代码前面,否则不生效 -->
添加播放器
<!-- 三个格式是兼容不同的浏览器和平台,一般只写一个MP3就行了 --> <audio src="music.mp3" preload="auto" controls autoplay loop></audio> <audio src="music.ogg" preload="auto" controls autoplay loop></audio> <audio src="music.wav" preload="auto" controls autoplay loop></audio>
下载地址
还没有评论呢~快来一鸣惊人吧!
发表评论
检测到您还未登录,需要登录后才能发表评论!
注册 or 登录