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(

'

\

'

);

/*为播放列表添加歌曲信息*/

for (var i = 0; i < $sourceList.length; i++) {

$(".music_list").append("

" + $sourceList[i].title + "");

};

/*调控音量方法*/

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)css