<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>