html5+css3酷炫音频播放器代码
1. [代码][JavaScript]代码
(function($){
jQuery.fn.extend({
"initAudio" : function(){
var myAudio = $("audio",this)[0];
var $sourceList = $("source",this);
var currentSrcIndex = 0;
var currentSr = "";
/*添加播放器UI组件*/
this.append(
'<div class="music_info clearfix">\
<div class="cd_holder"><span class="stick"></span><div class="cd"></div></div>\
<div class="meta_data">\
<span class="title"></span>\
<div class="rating">\
<div class="starbar">\
<ul class="current-rating" data-score="85">\
<li class="star5"></li>\
<li class="star4"></li>\
<li class="star3"></li>\
<li class="star2"></li>\
<li class="star1"></li>\
</ul>\
</div>\
</div>\
<div class="volume_control">\
<a class="decrease">a</a>\
<span class="base_bar">\
<span class="progress_bar"></span>\
<a class="slider"></a>\
</span>\
<a class="increase">b</a>\
</div>\
</div>\
</div>\
<ul class="music_list"></ul>\
<div class="controls">\
<div class="play_controls">\
<a class="btn_previous">e</a>\
<a class="btn_play">c</a>\
<a class="btn_next">d</a>\
</div>\
<div class="time_line">\
<span class="passed_time">0:00</span>\
<span class="base_bar">\
<span class="progress_bar"></span>\
</span>\
<span class="total_time">0:00</span>\
</div>\
</div>'
);
/*为播放列表添加歌曲信息*/
for (var i = 0; i < $sourceList.length; i++) {
$(".music_list").append("<li>" + $sourceList[i].title + "</li>");
};
/*调控音量方法*/
HTMLAudioElement.prototype.changeVolumeTo = function(volume){
this.volume = volume;
$(".volume_control .progress_bar").css("width",volume*100 + "%");
$(".volume_control .slider").css("left",volume*100 - 7 + "px");
}
/*为播放器添加事件监听*/
/*播放、暂停、上一首、下一首功能实现*/
$(".btn_play").click(function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
});
$(".btn_next").click(function(){
++currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click(function(){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
/*音量调控功能实现*/
$(".volume_control .decrease").click(function() {
var volume = myAudio.volume - 0.1;
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .increase").click(function() {
var volume = myAudio.volume + 0.1;
volume > 1 && (volume = 1);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume < 0 && (volume = 0);
myAudio.changeVolumeTo(volume);
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this).position().left; /*滑块初始位置*/
var origX = ev.clientX; /*鼠标初始位置*/
var target = this;
var progress_bar = $(".volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*计算鼠标移动的距离*/
var curLeft = origLeft + moveX; /*用鼠标移动的距离表示滑块的移动距离*/
(curLeft < -7) && (curLeft = -7);
(curLeft > 93) && (curLeft = 93);
target.style.left = curLeft + "px";
progress_bar.style.width = curLeft + 7 + "%";
myAudio.changeVolumeTo((curLeft + 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$(document).unbind("mouseup",stopDrag);
});
});
/*音频进度条调控功能实现*/
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
});
$(".music_info .cd").click(function(){
$(".music_list").slideToggle(600);
});
$(".music_list").click(function(ev){
var index = $(ev.target).index();
currentSrcIndex = index;
currentSrc = $("#myAudio source:eq(" + currentSrcIndex + ")").prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
/*audio元素事件绑定*/
$(myAudio).bind("loadedmetadata",function(){
var totalTime = formatTime(myAudio.duration);
var title = $("#myAudio source:eq(" + currentSrcIndex + ")").attr("title");
$(".time_line .total_time").text(totalTime);
$(".meta_data .title").text(title);
});
$(myAudio).bind("timeupdate",function(){
var duration = this.duration;
var curTime = this.currentTime;
var percentage = curTime/duration * 100;
$(".time_line .progress_bar").css("width",percentage + "%");
var passedTime = formatTime(curTime);
$(".time_line .passed_time").text(passedTime);
});http://www.huiyi8.com/hunsha/chuangyi/
$(myAudio).bind("play",function(){
$(".btn_play").text("h");
$(".music_list li").eq(currentSrcIndex).addClass("active")
.siblings().removeClass("active");
$(".music_info .cd").addClass("rotate");
$(".cd_holder .stick").addClass("play");
});创意婚纱照片
$(myAudio).bind("pause",function(){
$(".btn_play").text("c");
$(".music_info .cd").removeClass("rotate");
$(".cd_holder .stick").removeClass("play");
});
$(myAudio).bind("ended",function(){
$(".btn_next").triggerHandler("click");
});
$(myAudio).bind("progress",function(){
if (myAudio.buffered.length == 1) {
// only one range
if (myAudio.buffered.start(0) == 0) {
// The one range starts at the beginning and ends at
// the end of the video, so the whole thing is loaded
var buffered = myAudio.buffered.end(0);
var percentage = buffered/myAudio.duration * 100;
$(".time_line .base_bar").css("background-size",percentage + "% 100%");
}
}
});
$(myAudio).trigger("loadedmetadata");
/*歌曲播放时间的格式化，将秒数格式化为“分:秒”的形式*/
function formatTime(time) {
var minutes = parseInt(time/60);
var seconds = parseInt(time%60);
seconds<10 && (seconds = "0" + seconds);
return minutes + ":" + seconds;
};
}
});
})(jQuery)