From dfaa831adfebbd4ab904636f1065bf2cff642f24 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Sun, 13 Oct 2024 18:00:14 +0300 Subject: Changed way of loading the audio, some improvements, some refactoring. --- client/index.html | 2 +- client/js/radio_emulator.js | 148 +++++++++++++++++++++++++++++--------------- 2 files changed, 98 insertions(+), 52 deletions(-) (limited to 'client') diff --git a/client/index.html b/client/index.html index bd31068..661f081 100644 --- a/client/index.html +++ b/client/index.html @@ -37,7 +37,7 @@
diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js index 27e8ba2..59e49ec 100644 --- a/client/js/radio_emulator.js +++ b/client/js/radio_emulator.js @@ -26,10 +26,22 @@ // - list // - show_info // -var debugMode = false; +var debugMode = true; +const apiURL = "http://z.kaotisk-hund.com:8010/"; +const version = "v0"; +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 sourceElement = document.querySelector('source'); var currentTimeP = document.querySelector('.current-time'); var listStartedP = document.querySelector('.started-on'); var currentShowHash = document.querySelector('.current-show-hash'); @@ -60,7 +72,9 @@ function increaseSeconds() { seconds_here = seconds_here+1; youAreHere.innerText = seconds_here; - ProgressBar.value = (parseInt(currentTimeP.innerText) === NaN) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here); + var progressbarValue = isNaN(parseInt(currentTimeP.innerText)) ? 0 : parseInt(currentTimeP.innerText) + parseInt(seconds_here); + debugLog(`${typeof(progressbarValue)} progressbarValue = ${progressbarValue}`) + ProgressBar.value = progressbarValue; relativeTime.innerText = parseInt(currentTimeP.innerText) + seconds_here; listeningAt.innerText = Math.floor(audioElement.currentTime); return seconds_here; @@ -82,14 +96,38 @@ function FetchJSON( url, callback, params ) if(request.status !== 404){ callback(json, params); } else { - if ( debugMode ) console.log(`ERROR ${request.status} while loading ${url}`); + debugLog(`ERROR ${request.status} while loading ${url}`); + } + }); + request.addEventListener("error", ()=>{ + debugLog("An error occured. While loading: "+url+" for "+callback+"."); + }); + request.addEventListener("abort", ()=>{ + debugLog("Request aborted: "+url+" for "+callback+"."); + }); + request.open("GET", url); + request.send(); +} + +function FetchAudio(url) +{ + const request = new XMLHttpRequest(); + request.responseType = 'blob'; + request.addEventListener("load", ()=>{ + if(request.status === 200){ + debugLog("Got it... trying!") + audioElement.src = URL.createObjectURL(request.response); + audioElement.play(); + debugLog("Tried... did it work?"); + } else { + debugLog(`ERROR ${request.status} while loading ${url}`); } }); request.addEventListener("error", ()=>{ - if ( debugMode ) console.log("An error occured. While loading: "+url+" for "+callback+"."); + debugLog("An error occured. While loading: "+url+" for "+callback+"."); }); request.addEventListener("abort", ()=>{ - if ( debugMode ) console.log("Request aborted: "+url+" for "+callback+"."); + debugLog("Request aborted: "+url+" for "+callback+"."); }); request.open("GET", url); request.send(); @@ -97,9 +135,9 @@ function FetchJSON( url, callback, params ) function genericCallback(json, params) { - if ( debugMode ) console.log('genericCallback'); - if ( debugMode ) console.log(json); - if ( debugMode ) console.log(params); + debugLog('genericCallback'); + debugLog(json); + debugLog(params); } var calledLoadShowCallback = 0; @@ -112,10 +150,10 @@ function stopHereAndReflect() function loadShowCallback(json, params) { const [ list, now_on_sequence, element, hash_of_list ] = params; - if ( debugMode ) console.log('loadShowCallback'); - if ( debugMode ) console.log(json); - if ( debugMode ) console.log(element); - if ( debugMode ) console.log(params); + debugLog('loadShowCallback'); + debugLog(json); + debugLog(element); + debugLog(params); listStartedP.innerText = list.started_on; listHash.innerText = hash_of_list; currentShowHash.innerText = json.hash; @@ -125,36 +163,40 @@ function loadShowCallback(json, params) 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); - sourceElement.type = json.mimetype; + // sourceElement.src = "http://z.kaotisk-hund.com:8010/v0/audio/ogg/" + json.hash + "#t=" + Math.floor((now_on_sequence - element.starts_on)/1000); audioElement.load(); - if ( debugMode ) console.log('plays here: '+(now_on_sequence - element.starts_on)/1000); - audioElement.addEventListener('canplaythrough', function(){ - if ( debugMode ) console.log('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(); - } - }); - audioElement.addEventListener('ended', function(){ - location.reload(); - }); - var synced_at = sync_radio(); - if ( debugMode ) console.log("Synced initially at : "+synced_at); - if ( synced_at === 0 ) - { - if ( synced_at > audioElement.currentTime ) - { - if ( debugMode ) console.log('Good sync!'); - } - else - { - setTimeout(sync_radio, 10000); - } - } + 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}); + // audioElement.addEventListener('ended', function(){ + // location.reload(); + // }); + // 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}); } function sync_radio() @@ -163,8 +205,12 @@ function sync_radio() if ( value !== "" ) { var new_now = parseFloat(value) + getSecondsHere(); - if ( debugMode ) console.log("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now); + debugLog("Trying to sync @ "+ value + " + " +getSecondsHere() + " = " + new_now); audioElement.currentTime = new_now; + audioElement.play(); + audioElement.muted = false; + for ( av = 0.1; av === 1; av = av+0.1 ) + audioElement.volume = 0.1; return new_now; } return 0; @@ -172,23 +218,23 @@ function sync_radio() function listCallback(json, params) { - if ( debugMode ) console.log('listCallback'); + debugLog('listCallback'); 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; - if ( debugMode ) console.log(`now_on_sequence: ${now_on_sequence}, Dt: ${Dt}`) + 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 { now_on_sequence = now_on_sequence - previous.starts_on; - if ( debugMode ) console.log(now_on_sequence); + debugLog(now_on_sequence); previous = element; - if ( debugMode ) console.log(element); - FetchJSON("http://z.kaotisk-hund.com:8010/v0/application/json/" + element.hash, loadShowCallback, [json, now_on_sequence, element, hash_of_list]); + debugLog(element); + FetchJSON(`${jsonRequest}${element.hash}`, loadShowCallback, [json, now_on_sequence, element, hash_of_list]); } }); } @@ -196,9 +242,9 @@ function listCallback(json, params) function hashCallback(json, params) { var [ now ] = params; - if ( debugMode ) console.log('hashCallback'); - FetchJSON('http://z.kaotisk-hund.com:8010/v0/application/json/' + json.latest_list, listCallback, [now, json.latest_list]); + debugLog('hashCallback'); + FetchJSON(`${jsonRequest}${json.latest_list}`, listCallback, [now, json.latest_list]); } -FetchJSON('http://z.kaotisk-hund.com:8010/v0/list', hashCallback, [ new Date().getTime() ]); +FetchJSON(`${listRequest}`, hashCallback, [ new Date().getTime() ]); -- cgit v1.2.3