HTML5音乐播放器,简洁好看,自适应全终端支持!

HTML5音乐播放器,简洁好看,自适应全终端支持!

单页介绍

音乐播放器功能也不多,也是基础功能.带有播放/暂停/音量调节/鼠标点击快进等基础播放功能!配色方面是白色打底,粉色点缀的!

使用说明

你可以自定义图标按钮的大小,使用的是CSS伪类,所以直接用font-size来控制大小即可!可以自定义按钮的颜色以及控制条颜色,总之就是所有颜色和组件的大小都可以通过CSS来控制!

引入文件

<link rel="stylesheet" href="css/audio-player.css" />
<script>
    (function (doc{
        var addEvent = 'addEventListener',
            type = 'gesturestart',
            qsa = 'querySelectorAll',
            scales = [11],
            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 = [.251.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>

播放器展示

HTML5音乐播放器,简洁好看,自适应全终端支持!插图

分享到 :

发表评论

登录... 后才能评论