jQuery流媒体音乐播放器特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery流媒体音乐播放器特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery流媒体音乐播放器特效</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class='jAudio--player'>

<audio></audio>

<div class='jAudio--ui'>

  <div class='jAudio--thumb'></div>

  <div class='jAudio--status-bar'>

	<div class='jAudio--details'></div>
	<div class='jAudio--volume-bar'></div>

	<div class='jAudio--progress-bar'>
	  <div class='jAudio--progress-bar-wrapper'>
		<div class='jAudio--progress-bar-played'>
		  <span class='jAudio--progress-bar-pointer'></span>
		</div>
	  </div>
	</div>

	<div class='jAudio--time'>
	  <span class='jAudio--time-elapsed'>00:00</span>
	  <span class='jAudio--time-total'>00:00</span>
	</div>
  </div>
</div>
<div class='jAudio--playlist'>
</div>

<div class='jAudio--controls'>
  <ul>
	<li><button class='btn' data-action='prev' id='btn-prev'><span></span></button></li>
	<li><button class='btn' data-action='play' id='btn-play'><span></span></button></li>
	<li><button class='btn' data-action='next' id='btn-next'><span></span></button></li>
  </ul>
</div>
</div>
<script src='js/jquery-2.1.4.min.js'></script>
<script src='js/jaudio.js'></script>
<script>
var t = {
	playlist:[
		{
		  file: "tracks/01.mp3",
		  thumb: "thumbs/01.jpg",
		  trackName: "Dusk",
		  trackArtist: "Tobu & Syndec",
		  trackAlbum: "Single",
		},
		{
		  file: "tracks/02.mp3",
		  thumb: "thumbs/02.jpg",
		  trackName: "Blank",
		  trackArtist: "Disfigure",
		  trackAlbum: "Single",
		},
		{
		  file: "tracks/03.mp3",
		  thumb: "thumbs/03.jpg",
		  trackName: "Fade",
		  trackArtist: "Alan Walker",
		  trackAlbum: "Single",
		}
	],
	autoPlay:true
}
$(".jAudio--player").jAudio(t);
</script>
</body>
</html>

JS代码(jaudio.js):

// # ----- Script info:// - Author:Michael Mammoliti// - Name:jAudio.js// - Version:0.2// - js dipendencies:jQuery// - Release date:25 November 2015// - GitHub:https://github.com/MichaelMammoliti/jAudio.js// # ----- Contact info// - GitHub:https://github.com/MichaelMammoliti// - Mail:mammoliti.michael@gmail.com// - Twitter:@MichMammoliti// # ----- License Info// - Released under the GPL v3 license.(function($){
	var pluginName = "jAudio",defaults ={
	playlist:[],defaultAlbum:undefined,defaultArtist:undefined,defaultTrack:0,autoPlay:false,debug:false}
;
	function Plugin( $context,options ){
	this.settings = $.extend( true,defaults,options );
	this.$context = $context;
	this.domAudio = this.$context.find("audio")[0];
	this.$domPlaylist = this.$context.find(".jAudio--playlist");
	this.$domControls = this.$context.find(".jAudio--controls");
	this.$domVolumeBar = this.$context.find(".jAudio--volume");
	this.$domDetails = this.$context.find(".jAudio--details");
	this.$domStatusBar = this.$context.find(".jAudio--status-bar");
	this.$domProgressBar = this.$context.find(".jAudio--progress-bar-wrapper");
	this.$domTime = this.$context.find(".jAudio--time");
	this.$domElapsedTime = this.$context.find(".jAudio--time-elapsed");
	this.$domTotalTime = this.$context.find(".jAudio--time-total");
	this.$domThumb = this.$context.find(".jAudio--thumb");
	this.currentState = "pause";
	this.currentTrack = this.settings.defaultTrack;
	this.currentElapsedTime = undefined;
	this.timer = undefined;
	this.init();
}
Plugin.prototype ={
	init:function(){
	var self = this;
	self.renderPlaylist();
	self.preLoadTrack();
	self.highlightTrack();
	self.updateTotalTime();
	self.events();
	self.debug();
	self.domAudio.volume = 0.05}
,play:function(){
	var self = this,playButton = self.$domControls.find("#btn-play");
	self.domAudio.play();
	if(self.currentState === "play") return;
	clearInterval(self.timer);
	self.timer = setInterval( self.run.bind(self),50 );
	self.currentState = "play";
	// change id playButton.data("action","pause");
	playButton.attr("id","btn-pause");
	// activate playButton.toggleClass('active');
}
,pause:function(){
	var self = this,playButton = self.$domControls.find("#btn-pause");
	self.domAudio.pause();
	clearInterval(self.timer);
	self.currentState = "pause";
	// change id playButton.data("action","play");
	playButton.attr("id","btn-play");
	// activate playButton.toggleClass('active');
}
,stop:function(){
	var self = this;
	self.domAudio.pause();
	self.domAudio.currentTime = 0;
	self.animateProgressBarPosition();
	clearInterval(self.timer);
	self.updateElapsedTime();
	self.currentState = "stop";
}
,prev:function(){
	var self = this,track;
	(self.currentTrack === 0) ? track = self.settings.playlist.length - 1:track = self.currentTrack - 1;
	self.changeTrack(track);
}
,next:function(){
	var self = this,track;
	(self.currentTrack === self.settings.playlist.length - 1) ? track = 0:track = self.currentTrack + 1;
	self.changeTrack(track);
}
,preLoadTrack:function(){
	var self = this,defTrack = self.settings.defaultTrack;
	self.changeTrack( defTrack );
	self.stop();
}
,changeTrack:function(index){
	var self = this;
	self.currentTrack = index;
	self.domAudio.src = self.settings.playlist[index].file;
	if(self.currentState === "play" || self.settings.autoPlay) self.play();
	self.highlightTrack();
	self.updateThumb();
	self.renderDetails();
}
,events:function(){
	var self = this;
	// - controls events self.$domControls.on("click","button",function(){
	var action = $(this).data("action");
	switch( action ){
	case "prev":self.prev.call(self);
	break;
	case "next":self.next.call(self);
	break;
	case "pause":self.pause.call(self);
	break;
	case "stop":self.stop.call(self);
	break;
	case "play":self.play.call(self);
	break;
}
;
}
);
	// - playlist events self.$domPlaylist.on("click",".jAudio--playlist-item",function(e){
	var item = $(this),track = item.data("track"),index = item.index();
	if(self.currentTrack === index) return;
	self.changeTrack(index);
}
);
	// - volume's bar events // to do // - progress bar events self.$domProgressBar.on("click",function(e){
	self.updateProgressBar(e);
	self.updateElapsedTime();
}
);
	$(self.domAudio).on("loadedmetadata",function(){
	self.animateProgressBarPosition.call(self);
	self.updateElapsedTime.call(self);
	self.updateTotalTime.call(self);
}
);
}
,getAudioSeconds:function(string){
	var self = this,string = string % 60;
	string = self.addZero( Math.floor(string),2 );
	(string < 60) ? string = string:string = "00";
	return string;
}
,getAudioMinutes:function(string){
	var self = this,string = string / 60;
	string = self.addZero( Math.floor(string),2 );
	(string < 60) ? string = string:string = "00";
	return string;
}
,addZero:function(word,howManyZero){
	var word = String(word);
	while(word.length < howManyZero) word = "0" + word;
	return word;
}
,removeZero:function(word,howManyZero){
	var word = String(word),i = 0;
	while(i < howManyZero){
	if(word[0] === "0"){
	word = word.substr(1,word.length);
}
else{
	break;
}
i++;
}
return word;
}
,highlightTrack:function(){
	var self = this,tracks = self.$domPlaylist.children(),className = "active";
	tracks.removeClass(className);
	tracks.eq(self.currentTrack).addClass(className);
}
,renderDetails:function(){
	var self = this,track = self.settings.playlist[self.currentTrack],file = track.file,thumb = track.thumb,trackName = track.trackName,trackArtist = track.trackArtist,trackAlbum = track.trackAlbum,template = "";
	template += "<p>";
	template += "<span>" + trackName + "</span>";
	// template += " - ";
	template += "<span>" + trackArtist + "</span>";
	// template += "<span>" + trackAlbum + "</span>";
	template += "</p>";
	$(".jAudio--details").html(template);
}
,renderPlaylist:function(){
	var self = this,template = "";
	$.each(self.settings.playlist,function(i,a){
	var file = a["file"],thumb = a["thumb"],trackName = a["trackName"],trackArtist = a["trackArtist"],trackAlbum = a["trackAlbum"];
	trackDuration = "00:00";
	template += "<div class='jAudio--playlist-item' data-track='" + file + "'>";
	template += "<div class='jAudio--playlist-thumb'><img src='"+ thumb +"'></div>";
	template += "<div class='jAudio--playlist-meta-text'>";
	template += "<h4>" + trackName + "</h4>";
	template += "<p>" + trackArtist + "</p>";
	template += "</div>";
	// template += "<div class='jAudio--playlist-track-duration'>" + trackDuration + "</div>";
	template += "</div>";
	//}
);
}
);
	self.$domPlaylist.html(template);
}
,run:function(){
	var self = this;
	self.animateProgressBarPosition();
	self.updateElapsedTime();
	if(self.domAudio.ended) self.next();
}
,animateProgressBarPosition:function(){
	var self = this,percentage = (self.domAudio.currentTime * 100 / self.domAudio.duration) + "%",styles ={
	"width":percentage}
;
	self.$domProgressBar.children().eq(0).css(styles);
}
,updateProgressBar:function(e){
	var self = this,mouseX,percentage,newTime;
	if(e.offsetX) mouseX = e.offsetX;
	if(mouseX === undefined && e.layerX) mouseX = e.layerX;
	percentage = mouseX / self.$domProgressBar.width();
	newTime = self.domAudio.duration * percentage;
	self.domAudio.currentTime = newTime;
	self.animateProgressBarPosition();
}
,updateElapsedTime:function(){
	var self = this,time = self.domAudio.currentTime,minutes = self.getAudioMinutes(time),seconds = self.getAudioSeconds(time),audioTime = minutes + ":" + seconds;
	self.$domElapsedTime.text( audioTime );
}
,updateTotalTime:function(){
	var self = this,time = self.domAudio.duration,minutes = self.getAudioMinutes(time),seconds = self.getAudioSeconds(time),audioTime = minutes + ":" + seconds;
	self.$domTotalTime.text( audioTime );
}
,updateThumb:function(){
	var self = this,thumb = self.settings.playlist[self.currentTrack].thumb,styles ={
	"background-image":"url(" + thumb + ")"}
;
	self.$domThumb.css(styles);
}
,debug:function(){
	var self = this;
	if(self.settings.debug) console.log(self.settings);
}
}
$.fn[pluginName] = function( options ){
	var instantiate = function(){
	return new Plugin( $(this),options );
}
$(this).each(instantiate);
}
}
)(jQuery)

CSS代码(main.css):

*{padding:0;margin:0;font-weight:300;box-sizing:border-box;font-family:"Open Sans";font-weight:300;color:#888;outline:none;}
li{float:left;list-style:none;}
html{font-size:100%;font-size:14px;}
body{font-size:1rem;}
html{background:#383B44;}
.jAudio--player{display:table;overflow:hidden;background:#fff;box-shadow:0 0 5px rgba(0,0,0,0.8);margin:30px auto;width:352px;}
.jAudio--player:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--ui{position:relative;width:100%;}
.jAudio--player .jAudio--status-bar{width:100%;z-index:1;position:relative;padding:100px 2rem 2rem 2rem;display:table;}
.jAudio--player .jAudio--status-bar:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--controls{width:100%;display:table;background:#fafafa;}
.jAudio--player .jAudio--controls:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--controls ul{display:table;overflow:hidden;width:100%;}
.jAudio--player .jAudio--controls ul:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--controls li{position:relative;width:33.3333%;height:5rem;line-height:5rem;}
.jAudio--player .jAudio--thumb{position:absolute;top:0;left:0;height:100%;width:100%;background-size:cover;background-position:center center;}
.jAudio--player .jAudio--time{display:table;width:100%;}
.jAudio--player .jAudio--time:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--time *{width:50%;display:block;float:left;color:#fff;text-shadow:0 1px 1px #000;font-size:0.9rem;}
.jAudio--player .jAudio--time .jAudio--time-elapsed{text-align:left;}
.jAudio--player .jAudio--time .jAudio--time-total{text-align:right;}
.jAudio--player .jAudio--details *{color:#fff;text-shadow:0 1px 1px #000;font-size:1.2rem;}
.jAudio--player .jAudio--details *:first-of-type{font-weight:bold;}
.jAudio--player .jAudio--details p{width:100%;}
.jAudio--player .jAudio--details p span{display:block;}
.jAudio--player .jAudio--progress-bar{margin:1.33333rem 0;}
.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-wrapper{width:100%;position:relative;background:rgba(255,255,255,0.3);cursor:pointer;border-radius:10px;overflow:hidden;}
.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-played{height:10px;background:#FF6666;position:relative;border-radius:10px;}
.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-pointer{height:10px;width:10px;border-radius:50%;position:absolute;right:0;background:#fff;}
.jAudio--player .jAudio--playlist{background:#fff;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item{display:block;width:100%;padding:1.33333rem 2rem;display:table;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item.active{background:#f55c5c;border-bottom-color:#f55c5c;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item.active *{color:#fff;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item:not(.active):hover{background:#fafafa;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item:last-of-type{border:0;margin-bottom:0;}
.jAudio--player .jAudio--playlist .jAudio--playlist-thumb{float:left;margin-right:0.66667rem;display:table;}
.jAudio--player .jAudio--playlist .jAudio--playlist-thumb:after{content:" ";display:block;width:100%;clear:both;}
.jAudio--player .jAudio--playlist .jAudio--playlist-thumb img{height:2.4rem;width:2.4rem;border-radius:50%;float:left;margin-right:0.5rem;}
.jAudio--player .jAudio--playlist .jAudio--playlist-meta-text h4{font-size:1rem;color:#000;}
.jAudio--player .jAudio--playlist .jAudio--playlist-meta-text p{font-size:0.8rem;}
.btn{position:relative;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:0;}
.btn span{position:absolute;display:table;height:15px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);overflow:hidden;}
.btn span:before,.btn span:after{display:block;content:" ";height:0;float:left;border-color:transparent;border-style:solid;}
.btn:active{background:#f5f5f5;}
#btn-prev span:before,#btn-prev span:after,#btn-next span:before,#btn-next span:after,#btn-play span:before,#btn-play span:after{border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;}
#btn-prev span:before,#btn-prev span:after{border-right:15px solid #ddd;border-left:0;}
#btn-prev:active span:before,#btn-prev:active span:after{border-right-color:#FF6666 !important;}
#btn-next span:before,#btn-next span:after{border-left:15px solid #ddd;border-right:0;}
#btn-next:active span:before,#btn-next:active span:after{border-left-color:#FF6666 !important;}
#btn-play span:before{border-left:15px solid #ddd;border-right:0;}
#btn-play span:after{display:none;}
#btn-play:active span:before,#btn-play.active span:before{border-left-color:#FF6666 !important;}
#btn-pause span:before,#btn-pause span:after{width:5px;height:15px;background:#FF6666;border:0;}
#btn-pause span:before{margin-right:5px;}
#btn-pause span:active:before,#btn-pause span:active:after,#btn-pause span.active:before,#btn-pause span.active:after{background:#fff;margin-right:5px;}
.jAudio--player .jAudio--controls li button span:before,.jAudio--player .jAudio--controls li button span:after{-webkit-transition:border-color 0.3s ease 0s;transition:border-color 0.3s ease 0s;}
.jAudio--player .jAudio--thumb{-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}
.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-played{-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item{-webkit-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}
.jAudio--player .jAudio--playlist .jAudio--playlist-item *{-webkit-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;}

附件:下载该文件资源,减少时间成本(增值服务)