/* * Youtube MusicBox 1.0 * By appman, AppsArea.com * --- * Plays videos from youtube as a music player on your site. * USAGE : . */ var YoutubeMusicPlayer = { start: function(){ YoutubeMusicPlayer.current_item = 0; YoutubeMusicPlayer.ytplayer; YoutubeMusicPlayer.playlist = [{"youtube_id":"ysupz4NBSh0","title":"Wonderful - Angel"},{"youtube_id":"tjgLbv3uPbI","title":"One Thing by One Direction"},{"youtube_id":"RgbKKZWZuQo","title":"Black Heart - Stooshe"},{"youtube_id":"-vb2do4EGSs","title":"Earth Song - Michael Jackson"},{"youtube_id":"Sflf6gGJn50","title":"Stairway To Heaven - Led Zeppelin"},{"youtube_id":"tF7SuTZbt7s","title":"Rule The World - Take That"},{"youtube_id":"K2HSQNc2r_Q","title":"What About Now - Daughtry"},{"youtube_id":"Coy8Hoa1DNw","title":"La Bamba - Richie Valens "}]; YoutubeMusicPlayer.time_dragging = false; YoutubeMusicPlayer.loadPlaylist(); YoutubeMusicPlayer.loadPlayer(); }, loadPlayer: function(){ /*var params = { allowScriptAccess: "always", bgcolor: "#cccccc" }; var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "1", "1", "8", null, null, params, atts);*/ var tag = document.createElement('script'); tag.src = "//www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }, loadPlaylist: function(){ jQuery.each(YoutubeMusicPlayer.playlist, function(k, v) { YoutubeMusicPlayer.playlist[k]['playing'] = 0; YoutubeMusicPlayer.playlist[k]['time'] = 0; $("#playlist").append('
  • '+v.title+'
  • '); }); }, loadControls: function(){ $("#next").click(function() { YoutubeMusicPlayer.goToNextItem(); }); $("#previous").click(function() { YoutubeMusicPlayer.goToPrevItem(); }); return false; $('#slider').slider({ range: false, value: 100, min: 0, max: 100 }); $('#time_slider').slider({ range: false, value: 100, min: 0, max: 100 }); var min =(($("#playlist li").height()+parseFloat($("#playlist li").css("margin-top"))+parseFloat($("#playlist li").css("margin-bottom"))+parseFloat($("#playlist li").css("padding-top"))+parseFloat($("#playlist li").css("padding-bottom"))) * $("#playlist li").size()); if( min > $("#playlist").height()) { $("#slider-vertical").slider({ orientation: "vertical", range: "min", min: -min+10, max: 0, value: 0, slide: function(event, ui) { $("#playlist").css('margin-top', ui.value); } }); } else { $("#playlist").css('width', '100%'); $("#slider-vertical").css('display', 'none'); } //set click events $("#play").click(function() { YoutubeMusicPlayer.play(); }); $("#seek-next").click(function() { YoutubeMusicPlayer.ytplayer.seekTo(YoutubeMusicPlayer.ytplayer.getCurrentTime()+10, true); }); $("#seek-prev").click(function() { YoutubeMusicPlayer.ytplayer.seekTo(YoutubeMusicPlayer.ytplayer.getCurrentTime()-10, true); }); $("#next").click(function() { YoutubeMusicPlayer.goToNextItem(); }); $("#previous").click(function() { YoutubeMusicPlayer.goToPrevItem(); }); $("#pause").click(function() { YoutubeMusicPlayer.ytplayer.pauseVideo(); }); $("#stop").click(function() { YoutubeMusicPlayer.ytplayer.stopVideo(); }); $("#volume").click(function() { $('#volume').addClass('ui-state-hover'); if($('#volume span').hasClass('ui-icon-volume-on')) { YoutubeMusicPlayer.ytplayer.mute(); $('#volume span').removeClass('ui-icon-volume-on'); $('#volume span').addClass('ui-icon-volume-off'); } else { YoutubeMusicPlayer.ytplayer.unMute(); $('#volume span').removeClass('ui-icon-volume-off'); $('#volume span').addClass('ui-icon-volume-on'); } }); $('#slider').bind('slide', function(event, ui) { var newVolume = $('#slider').slider('option', 'value'); YoutubeMusicPlayer.ytplayer.setVolume(newVolume); }); $('#icons li').hover( function(){ $(YoutubeMusicPlayer).addClass("ui-state-hover"); }, function(){ $(YoutubeMusicPlayer).removeClass("ui-state-hover"); } ); $("#playlist li").click(function() { YoutubeMusicPlayer.current_item = parseInt(this.id.split('_')[1]); YoutubeMusicPlayer.loadNewTrack(YoutubeMusicPlayer.current_item); }); $('#time_slider').bind('slidestart', function(event, ui) { YoutubeMusicPlayer.time_dragging = true; }); $('#time_slider').bind('slidestop', function(event, ui) { YoutubeMusicPlayer.time_dragging = false; var newTime = $('#time_slider').slider('option', 'value'); YoutubeMusicPlayer.ytplayer.seekTo(YoutubeMusicPlayer.getDuration()*(newTime/100), true); }); }, play: function(){ if(YoutubeMusicPlayer.ytplayer.getPlayerState() >= 1 && YoutubeMusicPlayer.ytplayer.getPlayerState() <= 3) { YoutubeMusicPlayer.ytplayer.playVideo(); } else { YoutubeMusicPlayer.loadNewTrack(YoutubeMusicPlayer.current_item); } //YoutubeMusicPlayer.ytplayer.playVideo(); $('#slider').slider('option', 'value', YoutubeMusicPlayer.ytplayer.getVolume()); $('#play').addClass('ui-state-hover'); }, setPlayer: function(){ YoutubeMusicPlayer.ytplayer = new YT.Player('ytapiplayer', { height: '390', width: '640', videoId: 'u1zgFlCw8Aw', events: { 'onReady': onYouTubePlayerReady, 'onStateChange': onPlayerStateChange, 'onError': YoutubeMusicPlayer.onPlayerError } }); YoutubeMusicPlayer.loadControls(); YoutubeMusicPlayer.updateytplayerInfo(); /* YoutubeMusicPlayer.ytplayer = $('#myytplayer')[0]; YoutubeMusicPlayer.updateytplayerInfo(); YoutubeMusicPlayer.loadControls(); setInterval(YoutubeMusicPlayer.updateytplayerInfo, 250); YoutubeMusicPlayer.ytplayer.addEventListener("onStateChange", "YoutubeMusicPlayer.onytplayerStateChange"); YoutubeMusicPlayer.ytplayer.addEventListener("onError", "YoutubeMusicPlayer.onPlayerError");*/ }, updateytplayerInfo: function(){ $('#now_playing').html('Currently Playing : ' + YoutubeMusicPlayer.playlist[YoutubeMusicPlayer.current_item].title); $('#elapsed_time').html('Time elapsed : '+YoutubeMusicPlayer.sec2hms(YoutubeMusicPlayer.getCurrentTime())+'/'+YoutubeMusicPlayer.sec2hms(YoutubeMusicPlayer.getDuration())+''); if(!YoutubeMusicPlayer.time_dragging || YoutubeMusicPlayer.ytplayer.getPlayerState() == 2 || YoutubeMusicPlayer.ytplayer.getPlayerState() == 3) { var progress = YoutubeMusicPlayer.getCurrentTime()/YoutubeMusicPlayer.getDuration()*100; if(!isNaN(progress)) { $('#time_slider').slider('option', 'value', parseFloat(YoutubeMusicPlayer.getCurrentTime()/YoutubeMusicPlayer.getDuration()*100)); } } if(YoutubeMusicPlayer.getDuration() == YoutubeMusicPlayer.getCurrentTime() && YoutubeMusicPlayer.getCurrentTime() > 1) { YoutubeMusicPlayer.ytplayer.stopVideo(); YoutubeMusicPlayer.goToNextItem(); } }, onPlayerError: function(error){ if(error > 0) YoutubeMusicPlayer.ytplayer.stopVideo(); console.log(error); $('#now_playing').html('Error ' + error); }, onytplayerStateChange: function(newState){ var status = ''; $('#icons li').removeClass('ui-state-hover'); switch(newState) { case -1: status = ''; break; case 0: status = 'ended'; break; case 1: status = ''; $('#play').addClass('ui-state-hover'); break; case 2: status = 'paused'; $('#pause').addClass('ui-state-hover'); break; case 3: status = 'buffering...'; break; case 5: status = 'stopped'; $('#stop').addClass('ui-state-hover'); break; default: status = ''; break; } $('#player_state').html(status); }, loadNewTrack: function(id){ YoutubeMusicPlayer.current_item = id; YoutubeMusicPlayer.ytplayer.loadVideoById(YoutubeMusicPlayer.playlist[YoutubeMusicPlayer.current_item].youtube_id, 0); $('#playlist li').removeClass('ui-state-hover'); $('#track_'+id).addClass('ui-state-hover'); }, goToNextItem: function(){ var next_item = YoutubeMusicPlayer.current_item + 1; next_item = (next_item >= YoutubeMusicPlayer.playlist.length)?0:next_item; YoutubeMusicPlayer.loadNewTrack(next_item); }, goToPrevItem: function(){ var prev_item = YoutubeMusicPlayer.current_item - 1; prev_item = (prev_item < 0)?(YoutubeMusicPlayer.playlist.length-1):prev_item; YoutubeMusicPlayer.loadNewTrack(prev_item); }, getCurrentTime: function(){ return YoutubeMusicPlayer.ytplayer.getCurrentTime(); }, getDuration: function(){ return YoutubeMusicPlayer.ytplayer.getDuration(); }, sec2hms: function(seconds){ if(seconds < 0) { return '--:--'; } var mins = Math.floor(seconds / 60); var secs = seconds % 60; return mins + ':' + YoutubeMusicPlayer.AddZero(Math.round(secs)); }, AddZero: function(num){ return ((num >= 0)&&(num < 10))?"0"+num:num+""; } }; $(document).ready(function () { YoutubeMusicPlayer.start(); }); function onYouTubeIframeAPIReady() { YoutubeMusicPlayer.setPlayer(); //YoutubeMusicPlayer.play(); } function onYouTubePlayerReady() { //YoutubeMusicPlayer.setPlayer(); //YoutubeMusicPlayer.start(); YoutubeMusicPlayer.play(); } function onPlayerStateChange(event) { console.log(event.data); console.log(YT.PlayerState); }