• 父はアメリカ人で母は日本人

  • 横浜インターナショナル・スクールで学び

  • バークリー音楽院のJazz Vocalの奨学生となる

  • ビッグバンドでピアニストとして演奏している

Valerie Joyce Home

  1. It Never Entered My Mind
  2. Oasis
  3. Walk On By
  4. Alfie
  5. A House Is Not A Home
  6. The Look Of Love
  7. Raindrops Keep Falling On My Head
  8. Silent Sky
  9. East Of The Sun
  10. April In Paris
  11. Whisper not
  12. Blue in Green
  13. Daahoud
  14. Joy Spring
  15. Jordu
  16. Tenderly
  17. Easy living
  18. Minor Mood
  19. Dionne Warwick The Look Of Love
  20. Decoy
  21. Adele - Skyfall
  22. Alicia Keys - Quantum Of Solace
  23. Gladys Knight - Licence To Kill
  24. Shirley Bassey - Goldfinger
  25. Shirley Bassey - Diamonds Are Forever
  26. Tina Turner - Golden Eye
  27. Tom Jones - Thunderball
<script src="js/audioplayer.js"></script>
<script type='text/javascript'>

$( function() {
	$('.flexslider').flexslider({ animation:"fade", slideshow:true, animationLoop:true,	slideshowSpeed: 4000, animationSpeed: 4000, pauseOnHover:true });
	$("#album .img-responsive").hide();
	$( 'audio' ).audioPlayer();
	$("#pause").hide();
	
	$("#play, #prev, #next, #playlists li").click(function(){
	    $("#album .img-responsive").show();
		$(".flexslider").hide();
	});
	SyntaxHighlighter.all();
});

</script>
			
<audio preload="auto" controls src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/01-It-Never-Entered-My-Mind.mp3"></audio>
<div id="large-player-controls">
	<div class="amplitude-prev" id="prev"></div>
	<div class="amplitude-play-pause" id="play"></div><div class="amplitude-play-pause" id="pause"></div>
	<div class="amplitude-next" id="next"></div>
</div>

<ol id="playlists">
	<li class="current"><a href="#" data-album= "New York Blue" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/01-It-Never-Entered-My-Mind.mp3">It Never Entered My Mind</a></li>
	<li><a href="" data-album="New York Blue" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/05-Oasis.mp3">Oasis</a></li>
	<li><a href="" data-album="The Look of Love" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/01_Walk_On_By.mp3">Walk_On_By</a></li>
	<li><a href="" data-album="The Look of Love" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/03_Alfie.mp3">Alfie</a></li>
	<li><a href="" data-album="The Look of Love" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/05_A_House.mp3">A House Is Not A Home</a></li>
	<li><a href="" data-album="The Look of Love" data-src="http://valeriejoyce.com/wp/wp-content/uploads/2015/01/06_Look_Of_Love.mp3">The Look Of Love</a></li>
	<li><a href="" data-album="The Look of Love" data-src='http://valeriejoyce.com/wp/wp-content/uploads/2015/01/07_Raindrops.mp3'>Raindrops Keep Falling On My Head</a></li>
	<li><a href="" data-album="Reverie" data-src='http://valeriejoyce.com/wp/wp-content/uploads/2015/01/Silent-Sky.mp3'>Silent Sky</a></li>
	<li><a href="" data-album="Reverie" data-src='http://valeriejoyce.com/wp/wp-content/uploads/2015/01/East-Of-The-Sun.mp3'>East Of The Sun</a></li>
	<li><a href="" data-album="Reverie" data-src='http://valeriejoyce.com/wp/wp-content/uploads/2015/01/April-In-Paris.mp3'>April In Paris</a></li>
    <li><a href="" data-album="Romantic" data-src='http://www.bensound.org/bensound-music/bensound-romantic.mp3'>Romantic</a></li>
	<li><a href="" data-album="The Jazz Piano" data-src='http://www.bensound.org/bensound-music/bensound-thejazzpiano.mp3'>The Jazz Piano</a></li>
	
</ol>
			

audioplayer.jsの変更前

;(function( $, window, document, undefined )
	var isTouch		  = 'ontouchstart' in window,
		eStart		  = isTouch ? 'touchstart'	: 'mousedown',
		eMove		  = isTouch ? 'touchmove'	: 'mousemove',
		eEnd		  = isTouch ? 'touchend'	: 'mouseup',
		eCancel		  = isTouch ? 'touchcancel'	: 'mouseup',
		secondsToTime = function( secs )
		{
			var hours = Math.floor( secs / 3600 ), minutes = Math.floor( secs % 3600 / 60 ), seconds = Math.ceil( secs % 3600 % 60 );
			return ( hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0'+hours+':' : hours+':' ) + ( minutes.toString().length < 2 ? '0'+minutes : minutes ) + ':' + ( seconds.toString().length < 2 ? '0'+seconds : seconds );
		},
		canPlayType	  = function( file )
		{
			var audioElement = document.createElement( 'audio' );
			return !!( audioElement.canPlayType && audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) );
		};

	$.fn.audioPlayer = function( params )
	{
		var params		= $.extend( { classPrefix: 'audioplayer', strPlay: 'Play', strPause: 'Pause', strVolume: 'Volume' }, params ),
			cssClass	= {},
			cssClassSub =
			{
				playPause:	 	'playpause',
				playing:		'playing',
				time:		 	'time',
				timeCurrent:	'time-current',
				timeDuration: 	'time-duration',
				bar: 			'bar',
				barLoaded:		'bar-loaded',
				barPlayed:		'bar-played',
				volume:		 	'volume',
				volumeButton: 	'volume-button',
				volumeAdjust: 	'volume-adjust',
				noVolume: 		'novolume',
				mute: 			'mute',
				mini: 			'mini'
			};
		for( var subName in cssClassSub )
			cssClass[ subName ] = params.classPrefix + '-' + cssClassSub[ subName ];

		this.each( function()
		{
			if( $( this ).prop( 'tagName' ).toLowerCase() != 'audio' )
				return false;

			var $this	   = $( this ),
				audioFile  = $this.attr( 'src' ),
				isAutoPlay = $this.get( 0 ).getAttribute( 'autoplay' ), isAutoPlay = isAutoPlay === '' || isAutoPlay === 'autoplay' ? true : false,
				isLoop	   = $this.get( 0 ).getAttribute( 'loop' ),		isLoop	   = isLoop		=== '' || isLoop	 === 'loop'		? true : false,
				isSupport  = false;

			if( typeof audioFile === 'undefined' )
			{
				$this.find( 'source' ).each( function()
				{
					audioFile = $( this ).attr( 'src' );
					if( typeof audioFile !== 'undefined' && canPlayType( audioFile ) )
					{
						isSupport = true;
						return false;
					}
				});
			}
			else if( canPlayType( audioFile ) ) isSupport = true;
 			var thePlayer = $( '<div class="' + params.classPrefix + '">' + ( isSupport ? $( '<div>' ).append( $this.eq( 0 ).clone() ).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />' ) + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ), 
				theAudio  = isSupport ? thePlayer.find( 'audio' ) : thePlayer.find( 'embed' ), theAudio = theAudio.get( 0 );

			if( isSupport )
			{
				thePlayer.find( 'audio' ).css( { 'width': 0, 'height': 0, 'visibility': 'hidden' } );
				thePlayer.append( '
' ); var theBar = thePlayer.find( '.' + cssClass.bar ), barPlayed = thePlayer.find( '.' + cssClass.barPlayed ), barLoaded = thePlayer.find( '.' + cssClass.barLoaded ), timeCurrent = thePlayer.find( '.' + cssClass.timeCurrent ), timeDuration = thePlayer.find( '.' + cssClass.timeDuration ), volumeButton = thePlayer.find( '.' + cssClass.volumeButton ), volumeAdjuster = thePlayer.find( '.' + cssClass.volumeAdjust + ' > div' ), volumeDefault = 0, adjustCurrentTime = function( e ) { theRealEvent = isTouch ? e.originalEvent.touches[ 0 ] : e; theAudio.currentTime = Math.round( ( theAudio.duration * ( theRealEvent.pageX - theBar.offset().left ) ) / theBar.width() ); }, adjustVolume = function( e ) { theRealEvent = isTouch ? e.originalEvent.touches[ 0 ] : e; theAudio.volume = Math.abs( ( theRealEvent.pageY - ( volumeAdjuster.offset().top + volumeAdjuster.height() ) ) / volumeAdjuster.height() ); }, updateLoadBar = setInterval( function() { barLoaded.width( ( theAudio.buffered.end( 0 ) / theAudio.duration ) * 100 + '%' ); if( theAudio.buffered.end( 0 ) >= theAudio.duration ) clearInterval( updateLoadBar ); }, 100 ); var volumeTestDefault = theAudio.volume, volumeTestValue = theAudio.volume = 0.111; if( Math.round( theAudio.volume * 1000 ) / 1000 == volumeTestValue ) theAudio.volume = volumeTestDefault; else thePlayer.addClass( cssClass.noVolume ); timeDuration.html( '…' ); timeCurrent.text( secondsToTime( 0 ) ); theAudio.addEventListener( 'loadeddata', function() { timeDuration.text( secondsToTime( theAudio.duration ) ); volumeAdjuster.find( 'div' ).height( theAudio.volume * 100 + '%' ); volumeDefault = theAudio.volume; }); theAudio.addEventListener( 'timeupdate', function() { timeCurrent.text( secondsToTime( theAudio.currentTime ) ); barPlayed.width( ( theAudio.currentTime / theAudio.duration ) * 100 + '%' ); }); theAudio.addEventListener( 'volumechange', function() { volumeAdjuster.find( 'div' ).height( theAudio.volume * 100 + '%' ); if( theAudio.volume > 0 && thePlayer.hasClass( cssClass.mute ) ) thePlayer.removeClass( cssClass.mute ); if( theAudio.volume <= 0 && !thePlayer.hasClass( cssClass.mute ) ) thePlayer.addClass( cssClass.mute ); }); theAudio.addEventListener( 'ended', function() { thePlayer.removeClass( cssClass.playing ); }); theBar.on( eStart, function( e ) { adjustCurrentTime( e ); theBar.on( eMove, function( e ) { adjustCurrentTime( e ); } ); }) .on( eCancel, function() { theBar.unbind( eMove ); }); volumeButton.on( 'click', function() { if( thePlayer.hasClass( cssClass.mute ) ) { thePlayer.removeClass( cssClass.mute ); theAudio.volume = volumeDefault; } else { thePlayer.addClass( cssClass.mute ); volumeDefault = theAudio.volume; theAudio.volume = 0; } return false; }); volumeAdjuster.on( eStart, function( e ) { adjustVolume( e ); volumeAdjuster.on( eMove, function( e ) { adjustVolume( e ); } ); }) .on( eCancel, function() { volumeAdjuster.unbind( eMove ); }); } else thePlayer.addClass( cssClass.mini ); if( isAutoPlay ) thePlayer.addClass( cssClass.playing ); thePlayer.find( '.' + cssClass.playPause ).on( 'click', function() { if( thePlayer.hasClass( cssClass.playing ) ) { $( this ).attr( 'title', params.strPlay ).find( 'a' ).html( params.strPlay ); thePlayer.removeClass( cssClass.playing ); isSupport ? theAudio.pause() : theAudio.Stop(); } else { $( this ).attr( 'title', params.strPause ).find( 'a' ).html( params.strPause ); thePlayer.addClass( cssClass.playing ); isSupport ? theAudio.play() : theAudio.Play(); } return false; }); $this.replaceWith( thePlayer ); }); return this; }; })( jQuery, window, document );

audioplayer.jsの変更後

	
;(function( $, window, document, undefined )
{
	var isTouch		  = 'ontouchstart' in window,
		eStart		  = isTouch ? 'touchstart'	: 'mousedown',
		eMove		  = isTouch ? 'touchmove'	: 'mousemove',
		eEnd		  = isTouch ? 'touchend'	: 'mouseup',
		eCancel		  = isTouch ? 'touchcancel'	: 'mouseup',
		secondsToTime = function( secs )
		{
			var hours = Math.floor( secs / 3600 ), minutes = Math.floor( secs % 3600 / 60 ), seconds = Math.ceil( secs % 3600 % 60 );
			return ( hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0'+hours+':' : hours+':' ) + ( minutes.toString().length < 2 ? '0'+minutes : minutes ) + ':' + ( seconds.toString().length < 2 ? '0'+seconds : seconds );
		},
		canPlayType	  = function( file )
		{
			var audioElement = document.createElement( 'audio' );
			return !!( audioElement.canPlayType && audioElement.canPlayType( 'audio/' + file.split( '.' ).pop().toLowerCase() + ';' ).replace( /no/, '' ) );
		};

	$.fn.audioPlayer = function( params )
	{
		var params		= $.extend( { classPrefix: 'audioplayer', strPlay: 'Play', strPause: 'Pause', strVolume: 'Volume' }, params ),
			cssClass	= {},
			cssClassSub =
			{
				playPause:	 	'playpause',
				playing:		'playing',
				time:		 	'time',
				timeCurrent:	'time-current',
				timeDuration: 	'time-duration',
				bar: 			'bar',
				barLoaded:		'bar-loaded',
				barPlayed:		'bar-played',
				volume:		 	'volume',
				volumeButton: 	'volume-button',
				volumeAdjust: 	'volume-adjust',
				noVolume: 		'novolume',
				mute: 			'mute',
				mini: 			'mini'
			};

		for( var subName in cssClassSub )
			cssClass[ subName ] = params.classPrefix + '-' + cssClassSub[ subName ];

		this.each( function()
		{
			if( $( this ).prop( 'tagName' ).toLowerCase() != 'audio' )
				return false;

			var $this	   = $( this ),
				audioFile  = $this.attr( 'src' ),
				isAutoPlay = $this.get( 0 ).getAttribute( 'autoplay' ), isAutoPlay = isAutoPlay === '' || isAutoPlay === 'autoplay' ? true : false,
				isLoop	   = $this.get( 0 ).getAttribute( 'loop' ),		isLoop	   = isLoop		=== '' || isLoop	 === 'loop'		? true : false,
				isSupport  = false;

			if( typeof audioFile === 'undefined' )
			{
				$this.find( 'source' ).each( function()
				{
					audioFile = $( this ).attr( 'src' );
					if( typeof audioFile !== 'undefined' && canPlayType( audioFile ) )
					{
						isSupport = true;
						return false;
					}
				});
			}
			else if( canPlayType( audioFile ) ) isSupport = true;

			var thePlayer = $( '<div class="' + params.classPrefix + '">' + ( isSupport ? $( '<div>' ).append( $this.eq( 0 ).clone() ).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() +'" loop="' + isLoop.toString() + '" />' ) + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>' ),
				theAudio  = isSupport ? thePlayer.find( 'audio' ) : thePlayer.find( 'embed' ), theAudio = theAudio.get( 0 );

			var playlist = $('#playlists');
			$('#playlists li:first a').prepend('');
			$('#playlists li:first a').prepend('');
			$('#playlists li:first a').append('');
			playlist.find('li').click(function(e){
				$("#play").hide();
				$("#pause").show();
        			e.preventDefault();
       				theAudio.src = $('>a',this).attr('data-src');
				$(this).addClass('current').siblings().removeClass('current');
				$('#playlists li i').remove();
                $('>a',this).prepend('');
				$('>a',this).prepend(''); 
				$('>a',this).append('');
				$('#album p').text($('>a', this).text());
				$('#album h3').text($('>a', this).data('album'));
				$('#album img').attr('src', 'css/images/' + $('>a', this).data('album') + '.jpg');
        			theAudio.load();
        			theAudio.play();
			});
                $('#play').click(function () {
            		theAudio.play();
					$(this).hide();
					$("#pause").show();
					var next = $('#playlists li.current');
					$('#playlists li i').remove();
					$('>a',next).prepend('');
					$('>a',next).prepend(''); 
					$('>a',next).append('');
					$('#album p').text($('>a', next).text());
					$('#album h3').text($('>a', next).data('album'));
					$('#album img').attr('src', 'css/images/' + $('>a', next).data('album') + '.jpg');
    			});
    			$('#pause').click(function () {
            		theAudio.pause();
					$(this).hide();
					$("#play").show();
    			});
                $('#prev').click(function () {
					var prev = $('li.current').prev();
            		if (!prev.length) prev = $('#playlists li').last();
            		prev.click();
				});
    			$('#next').click(function () {
            			var next = $('li.current').next();
            			if (!next.length) next = $('#playlists li').first();
            			next.click();
    			});

			
			if( isSupport )
			{
				thePlayer.find( 'audio' ).css( { 'width': 0, 'height': 0, 'visibility': 'hidden' } );
				thePlayer.append( '
' ); var theBar = thePlayer.find( '.' + cssClass.bar ), barPlayed = thePlayer.find( '.' + cssClass.barPlayed ), barLoaded = thePlayer.find( '.' + cssClass.barLoaded ), timeCurrent = thePlayer.find( '.' + cssClass.timeCurrent ), timeDuration = thePlayer.find( '.' + cssClass.timeDuration ), volumeButton = thePlayer.find( '.' + cssClass.volumeButton ), volumeAdjuster = thePlayer.find( '.' + cssClass.volumeAdjust + ' > div' ), volumeDefault = 0, adjustCurrentTime = function( e ) { theRealEvent = isTouch ? e.originalEvent.touches[ 0 ] : e; theAudio.currentTime = Math.round( ( theAudio.duration * ( theRealEvent.pageX - theBar.offset().left ) ) / theBar.width() ); }, adjustVolume = function( e ) { theRealEvent = isTouch ? e.originalEvent.touches[ 0 ] : e; theAudio.volume = Math.abs( ( theRealEvent.pageY - ( volumeAdjuster.offset().top + volumeAdjuster.height() ) ) / volumeAdjuster.height() ); }, updateLoadBar = setInterval( function() { barLoaded.width( ( theAudio.buffered.end( 0 ) / theAudio.duration ) * 100 + '%' ); if( theAudio.buffered.end( 0 ) >= theAudio.duration ) clearInterval( updateLoadBar ); }, 100 ); var volumeTestDefault = theAudio.volume, volumeTestValue = theAudio.volume = 0.111; if( Math.round( theAudio.volume * 1000 ) / 1000 == volumeTestValue ) theAudio.volume = volumeTestDefault; else thePlayer.addClass( cssClass.noVolume ); timeDuration.html( '…' ); timeCurrent.text( secondsToTime( 0 ) ); theAudio.addEventListener( 'loadeddata', function() { timeDuration.text( secondsToTime( theAudio.duration ) ); volumeAdjuster.find( 'div' ).height( theAudio.volume * 100 + '%' ); volumeDefault = theAudio.volume; }); theAudio.addEventListener( 'timeupdate', function() { timeCurrent.text( secondsToTime( theAudio.currentTime ) ); barPlayed.width( ( theAudio.currentTime / theAudio.duration ) * 100 + '%' ); }); theAudio.addEventListener( 'volumechange', function() { volumeAdjuster.find( 'div' ).height( theAudio.volume * 100 + '%' ); if( theAudio.volume > 0 && thePlayer.hasClass( cssClass.mute ) ) thePlayer.removeClass( cssClass.mute ); if( theAudio.volume <= 0 && !thePlayer.hasClass( cssClass.mute ) ) thePlayer.addClass( cssClass.mute ); }); theAudio.addEventListener( 'ended', function() { thePlayer.removeClass( cssClass.playing ); var next = $('#playlists li.current').next(); if (!next.length) next = $('#playlists li').first(); next.addClass('current').siblings().removeClass('current'); $('#playlists li i').remove(); $('>a',next).prepend(''); $('>a',next).prepend(''); $('>a',next).append('') $('#album p').text($('>a', next).text()); $('#album h3').text($('>a', next).data('album')); $('#album img').attr('src', 'css/images/' + $('>a', next).data('album') + '.jpg'); theAudio.src = $('>a',next).attr('data-src'); theAudio.load(); theAudio.play(); }); theBar.on( eStart, function( e ) { adjustCurrentTime( e ); theBar.on( eMove, function( e ) { adjustCurrentTime( e ); } ); }) .on( eCancel, function() { theBar.unbind( eMove ); }); volumeButton.on( 'click', function() { if( thePlayer.hasClass( cssClass.mute ) ) { thePlayer.removeClass( cssClass.mute ); theAudio.volume = volumeDefault; } else { thePlayer.addClass( cssClass.mute ); volumeDefault = theAudio.volume; theAudio.volume = 0; } return false; }); volumeAdjuster.on( eStart, function( e ) { adjustVolume( e ); volumeAdjuster.on( eMove, function( e ) { adjustVolume( e ); } ); }) .on( eCancel, function() { volumeAdjuster.unbind( eMove ); }); } else thePlayer.addClass( cssClass.mini ); if( isAutoPlay ) thePlayer.addClass( cssClass.playing ); thePlayer.find( '.' + cssClass.playPause ).on( 'click', function() { if( thePlayer.hasClass( cssClass.playing ) ) { $( this ).attr( 'title', params.strPlay ).find( 'a' ).html( params.strPlay ); thePlayer.removeClass( cssClass.playing ); isSupport ? theAudio.pause() : theAudio.Stop(); } else { $( this ).attr( 'title', params.strPause ).find( 'a' ).html( params.strPause ); thePlayer.addClass( cssClass.playing ); isSupport ? theAudio.play() : theAudio.Play(); } return false; }); $this.replaceWith( thePlayer ); }); return this; }; })( jQuery, window, document );
ページトップへ戻る