mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery个人音乐专辑播放特效

jQuery个人音乐专辑播放特效

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery个人音乐专辑播放特效 jQuery个人音乐专辑播放特效是一款基于jQuery+HTML5实现的音乐播放专辑页面特效。
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery个人音乐专辑播放特效 - mgtv素材</title>

<link href="assets/css/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/theme-1.css" />

<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/jquery.audioControls.min.js"></script>

<script>
	$(document).ready(function(){
		
		var audioInitialVolume = 30;
		var $sliderObj = $("#volumeSlider");
		var $toolTipObj = $(".tooltip");
		var volRange = $("input[type='range']");
		
		volRange.attr("value",(audioInitialVolume / 100));
		
		var getBGImage = function(index){
			var backgroundBanners = ["assets/images/banner/Backstreet-Boys.jpg","assets/images/banner/linkin_park.jpg","assets/images/banner/eminem.jpg","assets/images/banner/adele-face.jpg","assets/images/banner/bruno_mars.jpg"];
			return backgroundBanners[index];
		}
		
		$sliderObj.slider({
			range: "min",
			min: 10,
			max : 100,
			value: audioInitialVolume,
			start: function (event, ui) {
				$toolTipObj.fadeIn('fast');
			},
			stop: function (event, ui) {
				$toolTipObj.fadeOut('fast');
			},
			slide: function(eve, ui){
				var value = $sliderObj.slider('value');
				$toolTipObj.css('left', value).text(ui.value);
			},
			change: function(eve, ui){
				volRange.attr("value",(ui.value / 100));
				volRange.trigger("change");
			}
		});
		
		$("#playlist").audioControls({
			audioVolume: (audioInitialVolume / 100),
			shuffled: true,
			onAudioChange: function(response){
				if(response.title.length > 0){
					$(".titleContainer p").text(response.title);
					$("body").css({
						"background-image": "url(" + getBGImage(response.index) + ")",
						"background-size": "cover",
						"background-repeat": "no-repeat",
						"background-attachment": "fixed",
						"background-position": "center center"
					});
				}
			},
			onPlay: function(){
				$("p.title").addClass("animated pulse");
			},
			onPause: function(){
				$("p.title").removeClass("animated pulse");
			},
			onVolumeChange: function(value){
				volume = $('.volume');
				if (value <= 5) {
					volume.css('background-position', '0 0');
				} else if (value <= 25) {
					volume.css('background-position', '0 -25px');
				} else if (value <= 75) {
					volume.css('background-position', '0 -50px');
				} else {
					volume.css('background-position', '0 -75px');
				}
			}
		});
		$("span.playlist").on("click", function(eve){
			eve.preventDefault();
			$(".playlistContainer").slideToggle("fast");
		});
	});
</script>
</head>
<body>
<div class="mainContainer">
	<div class="twoColumn">
		<div class="col-1 toolsPane">
			<a href="#" title="Show/Hide Playlist" alt="Show/Hide Playlist"><span class="ctrls playlist"></span></a>
			<a href="#" title="Previous Song" alt="Previous Song"><span data-attr="prevAudio" class="ctrls previous"></span></a>
			<a href="#" title="Play/Pause" alt="Play/Pause"><span data-attr="playPauseAudio" class="ctrls playAudio"></span></a>
			<a href="#" title="Next Song" alt="Next Song"><span data-attr="nextAudio" class="ctrls next"></span></a>
			<a href="#" title="Repeat Song" alt="Repeat Song"><span data-attr="repeatSong" class="ctrls replay"></span></a>
		</div>
		<div id="audioPlayer" class="col-2 container">
			<div class="playlistContainer">
				<ul id="playlist">
					<li data-src="songs/Everything But Mine.mp3">
						<a href="#">
							<img src="assets/images/thumbs/bsb.jpg" />
							BSB - Everything But Mine
						</a>
					</li>
					<li data-src="songs/Linkin Park - Numb.mp3">
						<a href="#">
							<img src="assets/images/thumbs/linkin-park.jpg" />
							Linkin Park - Numb
						</a>
					</li>
					<li data-src="songs/love-the-way-you-lie-rihanna-feat-eminem.mp3">
						<a href="#">
							<img src="assets/images/thumbs/eminem.jpg" />
							Eminem - Love The Way You Lie(Rihanna Ft)
						</a>
					</li>
					<li data-src="songs/rolling-in-the-deep-adele.mp3">
						<a href="#">
							<img src="assets/images/thumbs/adele.jpg" />
							Adele - Rolling In The Deep
						</a>
					</li>
					<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
						<a href="#">
							<img src="assets/images/thumbs/bruno-mars.jpg" />
							Bruno - When I Was Your Man
						</a>
					</li>
				</ul>
			</div>
			<div class="progress">
				<div data-attr="seekableTrack" class="seekableTrack"></div>
				<div class="updateProgress"></div>
			</div>
			<div class="volumeControlContainer">
				<span class="tooltip"></span>
				<div id="volumeSlider"></div>
				<span class="volume"></span>
			</div>
			<div class="titleContainer">
				<p class="title"></p>
			</div>
			<input style="display:none;" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" />
		</div>
	</div>
</div>


</body>