前两天不是无聊做了个视频播放器嘛 ( 点这里查看文章链接 )，然后今天又做了一个音乐播放器！配色方面都是差不多的，都是白色打底，粉色点缀的！另外就是音乐播放器功能也不多，也是基础功能。带有播放/暂停/音量调节/鼠标点击快进等基础播放功能！

播放器展示

使用说明

你可以自定义图标按钮的大小，使用的是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>

下载地址

高速下载【 CDN加速 】