逛博客发现一款简约的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里可以看得出来咯,代码还有很大的扩展性,先在这记录核心代码,日后慢慢研究其机理咯。