html5 音乐播放器

逛博客发现一款简约的html5音乐播放器,很简约,只有播放和暂停按钮还有进度条,看了代码很简单,于是就mark下来日后做参考。

实现代码
CSS样式


.simple-player-container {width:450px;display: inline-block;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.simple-player-container > div > ul {margin: 0;padding-left: 0;}
.simpleplayer-play-control {background:url(images/icon.png);display: block;width: 16px;height: 16px;bottom: -5px;position: relative;}
.simpleplayer-play-control:hover {background:url(images/icon.png);}
.simpleplayer-stop-control {background:url(images/icon.png);background-position: -16px 0;display: block;width: 16px;height: 16px;bottom: -5px;position: relative;}
.simpleplayer-stop-control:hover {background:url(images/icon.png);background-position: -16px 0;}

js代码


(function($) {
$.fn.player = function(settings) {
        var config = {
            progressbarWidth: '200px',
            progressbarHeight: '3px',
            progressbarColor: '#22ccff',
            progressbarBGColor: '#eeeeee',
            defaultVolume: 0.8
        };
        if (settings) {
            $.extend(config, settings);
        }

        var playControl = '<span class="simpleplayer-play-control"></span>';
        var stopControl = '<span class="simpleplayer-stop-control"></span>';

        this.each(function() {
            $(this).before('<center><div class="simple-player-container" style="padding: 0 10px 5px 5px;">');
            $(this).after('</div>');
            $(this).parent().find('.simple-player-container').prepend(
                '<div><ul>' + 
                    '<li style="display: inline-block; padding: 0 5px; "><i style="text-decoration: none;"' +
                    ' class="start-button" href="javascript:void(0)">' + playControl + '</i></li>' + 
                    '<li class="progressbar-wrapper" style="padding: 0; background-color: ' + config.progressbarBGColor + ';display: inline-block; cursor: pointer; width:' + config.progressbarWidth + ';">' + 
                        '<span style="display: block; background-color: ' + config.progressbarBGColor + '; width: 100%; ">' + 
                        '<span class="progressbar" style="display: block;float: left; background-color: ' + config.progressbarColor +
                                                         '; height: ' + config.progressbarHeight + '; width: 0%; ">' +
                        '</span></span>' + 
                    '</li>' + 
                '</ul></div></center>'
            );

            var simplePlayer = $(this).get(0);
            var button = $(this).parent().find('.start-button');
            var progressbarWrapper = $(this).parent().find('.progressbar-wrapper');
            var progressbar = $(this).parent().find('.progressbar');

            simplePlayer.volume = config.defaultVolume;

            button.click(function() {
                if (simplePlayer.paused) {
                    /*stop all playing songs*/
                    $.each($('audio'), function () {
                        this.pause();
                        $(this).parent().find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
                    });
                    simplePlayer.play();
                    $(this).find('.simpleplayer-play-control').addClass('simpleplayer-stop-control').removeClass('simpleplayer-play-control');
                } else {
                    simplePlayer.pause();

                    $(this).find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
                }
            });

            progressbarWrapper.click(function(e) {
                if (simplePlayer.duration != 0) {
                    left = $(this).offset().left;
                    offset = e.pageX - left;
                    percent = offset / progressbarWrapper.width();
                    duration_seek = percent * simplePlayer.duration;
                    simplePlayer.currentTime = duration_seek;
                }
            });

            $(simplePlayer).bind('ended', function(evt) {
                simplePlayer.pause();
                button.find('.simpleplayer-stop-control').addClass('simpleplayer-play-control').removeClass('simpleplayer-stop-control');
                progressbar.css('width', '0%');
            });

            $(simplePlayer).bind('timeupdate', function(e) {
                duration = this.duration;
                time = this.currentTime;
                fraction = time / duration;
                percent = fraction * 100;
                if (percent) progressbar.css('width', percent + '%');
            });

            if (simplePlayer.duration > 0) {
                $(this).parent().css('display', 'block');
            }

            if ($(this).attr('autoplay') == 'autoplay') {
                button.click();
            }
        });

        return this;
    };
})(jQuery);
//可以修改参数
$(document).ready(function() {
    var settings = {//mp3
        progressbarWidth: '80%',
        progressbarHeight: '4px',
        progressbarColor: '#f2626f',
        progressbarBGColor: '#eeeeee',
        defaultVolume: 0.8
    };
    $(".player").player(settings);
});

文章中调用播放器方法

<audio class="player" src="http://abc.com/abc.mp3" > </audio>

CSS中图片不上传了,就一个播放和暂停图标,CSS里可以看得出来咯,代码还有很大的扩展性,先在这记录核心代码,日后慢慢研究其机理咯。

0 thoughts on “html5 音乐播放器
添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。