Googleカスタム検索

AudioControlsの使い方

<script type="text/javascript">
	$(document).ready(function(){
		
		var audioInitialVolume = 50;
		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/valerie-joyce-facebook.jpg",
			"assets/images/banner/1200x630bf.jpg",
			"assets/images/banner/valerie-joyce-background.jpg",
			"assets/images/banner/keiko_lee_blu_jacket.jpg",
			"assets/images/banner/E382B1E382A4E382B3E383BBE383AAE383BCE291A3.jpg",
			"assets/images/banner/keikolee_main-thumb-960x630-6978.jpg",
			"assets/images/banner/maxresdefault.jpg",
			"assets/images/banner/mv02mini.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-repeat": "repeat-y",
					});
				}
			},
			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");
	});
				
		SyntaxHighlighter.all();			
});
</script>
			
<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 class="activeAudio" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/01-It-Never-Entered-My-Mind.mp3">
		<a href="#">
			<img src="assets/images/thumbs/New_York_Blue_B000EYK4FS.jpg" />
			It Never Entered My Mind
		</a>
				</li>
				<li data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/06_Look_Of_Love.mp3">
		<a href="#">
			<img src="assets/images/thumbs/Look_of_Love_Music_of_Burt_Bacharach_B000UZ4FHE.jpg" />
			The Look Of Love
		</a>
				</li>
				<li data-src="songs/09 The Shadow Of Your Smile.mp3">
		<a href="#">
			<img src="assets/images/thumbs/Reverie_B000083DPN.jpg" />
			The Shadow Of Your Smile
		</a>
				</li>
				<li data-src="songs/The Look of Love.m4a">
		<a href="#">
			<img src="assets/images/thumbs/Love_XX_B014HZSOUG.jpg" />
			The Look of Love
		</a>
				</li>
				<li data-src="songs/Softly As In A Morning Sunrise.m4a">
		<a href="#">
			<img src="assets/images/thumbs/frajile.jpg" />
			Softly As In A Morning Sunrise
		</a>
				</li>
				<li data-src="songs/dareyorimo.m4a">
		<a href="#">
			<img src="assets/images/thumbs/281.jpg" />
			誰よりも
				</li>
				<li data-src="songs/You Dont Know What Love Is.m4a">
		<a href="#">
			<img src="assets/images/thumbs/default_320bd72dbd21404c022f3750aad9d059.jpg" />
			You Don't Know What Love Is
		</a>
				</li>
				<li data-src="songs/21805572.mp3">
		<a href="#">
			<img src="assets/images/thumbs/Everything_B00005HNN2.jpg" />
			Everything
		</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>
  			
ページトップへ戻る