1. audio

各大浏览器对音乐格式的支持情况

属性

常用的事件

注意事项：

fn();
function fn(){var w = window.innerWidth / 30;var html = document.querySelector('html');html.style.fontSize = w + 'px';
};
window.onresize = fn;
$("#footer").load("footer.html");
//轮播图
var mySwiper = new Swiper('.swiper-container', {// 环路loop : true,//分页器pagination : '.swiper-pagination',paginationClickable :true,
})
// 当前播放的歌曲编号
var num=0;var audio=document.querySelector("audio");
$(".songMenu").on('click',function(){$("#songMenu").slideDown("fast");
})
$(".off").on('click',function(){$("#songMenu").slideUp("fast");
});
$("main").add("header").on('click',function(){$("#songMenu").slideUp("fast");
})var musicArr=["mp3/袖手旁观.mp3","mp3/莫文蔚 (Karen Mok) - 当你老了.mp3","mp3/阿肆 - 我在人民广场吃炸鸡.mp3"]
//音播放开关乐
$(".stop").on('click',function(){if(audio.paused){Index(num);$("#dog").attr("class","dog");$(".stop").html("");}else{audio.pause();$("#dog").removeAttr("class","dog");$(".stop").html("");}
})
// 上一曲
$(".MovePrevious").on('click',function(){num=(3+--num)%3;Index(num);
});
//下一曲
$(".MoveNext").on('click',next);function next(){num=(++num)%3;Index(num);}
//点击主页歌单
$(".songMenu li").on('click',function(){num=$(this).index();Index(num);
})
//点击右侧歌单
$(".page2 li").on('click',function(){num=$(this).index();Index(num);
})
//重播
$(".playback").on('click',function(){audio.currentTime=0;audio.play();
})
$(".soundOff").on('click',function(){audio.muted ? $(".soundOff").html("") : $(".soundOff").html("");audio.muted=!audio.muted;})function Index(num){//开始播放歌曲audio.src=musicArr[num];        $(".stop").html("");audioPlay(musicArr[num],next);playingStyle();
}
function playingStyle(){// 主页歌单$(".Mname").css("color","#fff");$(".Msonger").css("color","#bbbab9");$(".songMenu li").eq(num).find("span").css("color","#955ebe");// 右侧歌单$(".Pname").css("color","#fff");$(".Psonger").css("color","#bbbab9");$("#page2 li").eq(num).find("span").css("color","#955ebe");//顶部信息$(".name").html($(".Pname").eq(num).html());$(".author").html($(".Psonger").eq(num).html());
}function audioPlay(soundPath,callback){ /*判断声音是否播放完成，播放完成之后执行回调函数*/audio.src=soundPath;   audio.play();if(callback != undefined){var  is_playFinish = setInterval(function(){if(audio.ended){callback();window.clearInterval(is_playFinish);}if (!isNaN(audio.duration)) {var timeValue = audio.duration; //音乐时间var m=parseInt(timeValue/60);var s=parseInt(timeValue%60);s<10 ? s="0"+s : s=s;$(".startTime").html(m+":"+s);//当前播放时间var NowtimeValue = audio.currentTime;var nowM=parseInt(NowtimeValue/60);var nowS=parseInt(NowtimeValue%60);nowS<10 ? nowS="0"+nowS : nowS=nowS;$(".endTime").html(nowM+":"+nowS);// 用时间比来获取进度条的值var progressValue =100*(audio.currentTime/audio.duration); //$("progress").val(progressValue);};}, 10);}
}

（我吃酸萝卜 新浪微博http://www.weibo.com/wcslb          ---李帅醒著）