diff options
| -rw-r--r-- | client/js/radio_emulator.js | 194 |
1 files changed, 111 insertions, 83 deletions
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js index 4e0a885..ed6c58d 100644 --- a/client/js/radio_emulator.js +++ b/client/js/radio_emulator.js @@ -33,29 +33,37 @@ const listRequest = `${apiURL}${version}/list` const jsonRequest = `${apiURL}${version}/application/json/` const audioRequest = `${apiURL}${version}/audio/ogg/` - - function debugLog(message) { if ( debugMode ) console.log(message); } var audioElement = document.querySelector('audio'); -// var sourceElement = document.querySelector('source'); -var currentTimeP = document.querySelector('.current-time'); -var listStartedP = document.querySelector('.started-on'); -var currentShowHash = document.querySelector('.current-show-hash'); -var listHash = document.querySelector('.list-hash'); -var artistP = document.querySelector('.artist'); -var titleP = document.querySelector('.title'); -var radioPlayerDiv = document.querySelector('.radio-player'); -var youAreHere = document.querySelector('.you-are-here'); -var ProgressBar = document.querySelector('.play-progress'); -var startsOnP = document.querySelector('.starts-on'); -var showDurationP = document.querySelector('.show-duration'); -var relativeTime = document.querySelector('.relative-time'); -var listeningAt = document.querySelector('.listening-at'); -var dlProgressBar = document.querySelector('.dl-progress'); + +var placeholders = { + currentTime: document.querySelector('.current-time'), + listStarted: document.querySelector('.started-on'), + currentShowHash : document.querySelector('.current-show-hash'), + listHash : document.querySelector('.list-hash'), + artist: document.querySelector('.artist'), + title: document.querySelector('.title'), + radioPlayer: document.querySelector('.radio-player'), + youAreHere : document.querySelector('.you-are-here'), + playProgress: document.querySelector('.play-progress'), + startsOn: document.querySelector('.starts-on'), + showDuration: document.querySelectorAll('.show-duration'), + relativeTime: document.querySelector('.relative-time'), + listeningAt: document.querySelector('.listening-at'), + dlProgress: document.querySelector('.dl-progress'), + minTimesPlayed: document.querySelector('.min-played'), + maxTimesPlayed: document.querySelector('.max-played'), + listDuration: document.querySelector('.list-duration'), + previouslyPlayed: document.querySelector('.previously-played'), + showInfo: document.querySelector('.show-info'), + listInfo: document.querySelector('.list-info'), + dt: document.querySelector('.d-t'), + deltaTime: document.querySelector('.delta-time'), +} const documentTitle = "Radio Station Emulator"; const separator = " :: "; @@ -72,12 +80,11 @@ var seconds_here = 0; function increaseSeconds() { seconds_here = seconds_here+1; - youAreHere.innerText = seconds_here; - var progressbarValue = isNaN(parseInt(currentTimeP.innerText)) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here); + placeholders.youAreHere.innerText = seconds_here; // debugLog(`${typeof(progressbarValue)} progressbarValue = ${progressbarValue}`) - ProgressBar.value = progressbarValue; - relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here; - listeningAt.innerText = Math.floor(audioElement.currentTime); + placeholders.playProgress.value = isNaN(parseInt(placeholders.currentTime.innerText)) ? 0 : parseInt(placeholders.currentTime.innerText) + parseInt(seconds_here); + placeholders.relativeTime.innerText = parseInt(placeholders.currentTime.innerText) + seconds_here; + placeholders.listeningAt.innerText = Math.floor(audioElement.currentTime); return seconds_here; } function getSecondsHere() @@ -117,7 +124,7 @@ function FetchAudio(url) request.addEventListener("load", ()=>{ if(request.status === 200){ debugLog("Got it... trying!") - dlProgressBar.value = 100; + placeholders.dlProgress.value = 100; audioElement.src = URL.createObjectURL(request.response); audioElement.play(); debugLog("Tried... did it work?"); @@ -132,10 +139,10 @@ function FetchAudio(url) } }); request.addEventListener("error", ()=>{ - debugLog("An error occured. While loading: "+url+" for "+callback+"."); + debugLog("An error occured. While loading: "+url); }); request.addEventListener("abort", ()=>{ - debugLog("Request aborted: "+url+" for "+callback+"."); + debugLog("Request aborted: "+url); }); request.open("GET", url); request.send(); @@ -161,74 +168,65 @@ function loadShowCallback(json, params) debugLog('loadShowCallback'); debugLog(json); debugLog(element); - debugLog(params); - listStartedP.innerText = list.started_on; - listHash.innerText = hash_of_list; - currentShowHash.innerText = json.hash; - artistP.innerText = json.artist; - titleP.innerText = json.title; + //debugLog(params); + placeholders.currentShowHash.innerText = element.hash; + placeholders.artist.innerText = json.artist; + placeholders.title.innerText = json.title; setTitleMessage ( "▶️ " + json.artist + " - " + json.title ); - showDurationP.innerText = Math.floor(element.duration/1000); - startsOnP.innerText = element.starts_on; - ProgressBar.max = Math.floor(element.duration/1000); - // sourceElement.src = "http://z.kaotisk-hund.com:8010/v0/audio/ogg/" + json.hash + "#t=" + Math.floor((now_on_sequence - element.starts_on)/1000); + debugLog('----------'); + placeholders.showDuration.forEach((elem)=>{elem.innerText = Math.floor(element.duration/1000)}); + placeholders.startsOn.innerText = element.starts_on; + placeholders.playProgress.max = Math.floor(element.duration/1000); + placeholders.showInfo.innerText = JSON.stringify(json, null, 2); audioElement.load(); FetchAudio(`${audioRequest}${json.hash}`); audioElement.type = json.mimetype; - // debugLog('plays here: '+(now_on_sequence - element.starts_on)/1000); - // audioElement.addEventListener('canplaythrough', function(){ - // debugLog('CAN PLAY THROUGH'); - // if ( calledLoadShowCallback < 100 ) - // { - // calledLoadShowCallback++; - currentTimeP.innerText = ((now_on_sequence - element.starts_on)/1000); - // audioElement.currentTime = ((now_on_sequence - element.starts_on)/1000); - // audioElement.play(); - // } - // }, {passive: true}); + placeholders.currentTime.innerText = Math.floor((now_on_sequence - element.starts_on)/1000); audioElement.addEventListener('ended', function(){ FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]); - // location.reload(); + setTimeout(sync_radio, 10000); }); - // audioElement.addEventListener('complete', ()=>{ - // debugLog("Download completed!") - // var synced_at = sync_radio(); - // debugLog("Synced initially at : "+synced_at); - // if ( synced_at === 0 ) - // { - // if ( synced_at > audioElement.currentTime ) - // { - // debugLog('Good sync!'); - // } - // else - // { - setTimeout(sync_radio, 10000); - // } - // } - // }, {passive: true}); + setTimeout(sync_radio, 10000); +} + +function slowIncreaseVolume() +{ + if (audioElement.volume < 0.91) + { + audioElement.volume += 0.05; + } + else + { + audioElement.volume = 1; + } +} + +function fadeInAudio() +{ + setTimeout( slowIncreaseVolume, 250); + setTimeout( slowIncreaseVolume, 500); + setTimeout( slowIncreaseVolume, 750); + setTimeout( slowIncreaseVolume, 1000); + setTimeout( slowIncreaseVolume, 1250); + setTimeout( slowIncreaseVolume, 1500); + setTimeout( slowIncreaseVolume, 1750); + setTimeout( slowIncreaseVolume, 2050); + setTimeout( slowIncreaseVolume, 2350); + setTimeout( slowIncreaseVolume, 2700); } function sync_radio() { - var value = currentTimeP.innerText; + var value = placeholders.currentTime.innerText; if ( value !== "" ) { var new_now = parseFloat(value) + getSecondsHere(); - debugLog("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now); + debugLog("Trying to sync @ "+ value + " + " + getSecondsHere() + " = " + new_now); audioElement.currentTime = new_now; audioElement.play(); audioElement.muted = false; audioElement.volume = 0; - debugLog(Date.now()) - debugLog(Date.now()) - debugLog(Date.now()) - debugLog(Date.now()) - debugLog(Date.now()) - setTimeout( audioElement.volume += 0.2, 500); - setTimeout( audioElement.volume += 0.2, 1000); - setTimeout( audioElement.volume += 0.2, 1500); - setTimeout( audioElement.volume += 0.2, 2000); - setTimeout( audioElement.volume += 0.2, 2500); + fadeInAudio(); return new_now; } return 0; @@ -237,24 +235,54 @@ function sync_radio() function listCallback(json, params) { debugLog('listCallback'); + debugLog(json); + debugLog(params); var [ now, hash_of_list ] = params; var delta_time = now - json.started_on; var min_times_played = Math.floor( delta_time / json.duration ); var max_times_to_be_played = delta_time / json.duration; var Dt = max_times_to_be_played - min_times_played; var now_on_sequence = Dt * json.duration; + placeholders.listStarted.innerText = json.started_on; + placeholders.listHash.innerText = hash_of_list; + placeholders.deltaTime.innerText = delta_time; + placeholders.dt.innerText = Dt; + placeholders.currentTime.innerText = now_on_sequence; + placeholders.listDuration.innerText = json.duration; + placeholders.minTimesPlayed.innerText = min_times_played; + placeholders.maxTimesPlayed.innerText = max_times_to_be_played; + placeholders.listInfo.innerText = JSON.stringify(json, null, 2); debugLog(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`) - previous = { starts_on: 0 }; - json.list.forEach((element)=>{ - if ( now_on_sequence < element.starts_on && now_on_sequence > previous.starts_on){ - } else { + previous = { starts_on: -1 }; + if ( json.list.length === 1 ) + { + FetchJSON(`${jsonRequest}${previous.hash}`, loadShowCallback, [json, now_on_sequence, json.list[0], hash_of_list]); + } + for ( var i = 1; i < json.list.length; i++) + { + debugLog("getting there") + if ( now_on_sequence < json.list[i].starts_on && now_on_sequence > json.list[i-1].starts_on){ + + var tmp = document.createElement('pre'); + tmp.innerText = JSON.stringify(json.list[i-1], null, 2); + placeholders.previouslyPlayed.append(tmp); now_on_sequence = now_on_sequence - previous.starts_on; + debugLog(`now_on_sequence (1updated): ${now_on_sequence}`); + previous = json.list[i-1]; + FetchJSON(`${jsonRequest}${previous.hash}`, loadShowCallback, [json, now_on_sequence, previous, hash_of_list]); + break; + } + else + { + var tmp = document.createElement('pre'); + tmp.innerText = JSON.stringify(json.list[i-1], null, 2); + placeholders.previouslyPlayed.append(tmp); debugLog(now_on_sequence); - previous = element; - debugLog(element); - FetchJSON(`${jsonRequest}${element.hash}`, loadShowCallback, [json, now_on_sequence, element, hash_of_list]); + debugLog(json.list[i].starts_on); + FetchJSON(`${jsonRequest}${json.list[i].hash}`, loadShowCallback, [json, now_on_sequence, json.list[i], hash_of_list]); + debugLog(json.list[i-1].starts_on); } - }); + } } function hashCallback(json, params) |