Aurora – The New Age

While the other five themes have provided a glimpse into the past, Aurora is offering an idea of what the future might offer. The concept behind Aurora is based on the common belief people would eventually stop reading. If one googles the provocative question "Will people stop reading?", the search engine offers 978.000.000 results which one could read. The most relevant being an article by The New Yorker which was discussing this question already in 2007 and once more in 2018. The articles question whether or not our society shifts to "secondary orality" – a term used in sociology to describe the concept of a society which once read but now gladly switches back to oral information transmission. According to the statistics, literature is evidently competing with other media like television and the motivation for Americans to read books keeps declining.

What are nearly a billion articles worth if nobody reads them? Well, nothing. Aurora, therefore, imagines a web in which the already existing articles are converted into the prefered audio and the only content displayed is the title, photos and tables. It's about turning information into an experience people care about.

Key Characteristics

The main characteristics of Aurora:

Trustable

The goal was to employ a speech to text service with a voice which people actually enjoy listening to. Talkify offered the desired result: a naturally sounding voice of a middle-aged woman with a slight British accent. Talkify is fully integrated. If an unknown text is provided to mxTXT, the JS script sends the data to Talkify and uses the response for the audio player. This being said, in order to enhance the user experience, the example documents are already preloaded onto the web server. The JS recognises if a preloaded file exists and retrieves it instead of sending the text to Talkify.

See the full implementation below: 
                    

                      
  var wave = new CircularAudioWave(document.getElementById("chart-container"));

  var audioDict = new Object()
  var audioDict = {
    "/docs/bloomberg/Bloomberg_final.html": "../../audio/aurora/bloomberg.mp3",
    "/docs/thecut/thecut.html": "../../audio/aurora/thecut.mp3",
    "/docs/harpers/Harpers_Final.html": "../../audio/aurora/harpers.mp3",
    "/docs/tls/TimesLiterarySupplement_Final.html": "../../audio/aurora/tls.mp3",
    "/docs/huffington/Huffington_Final.html": "../../audio/aurora/huffington.mp3",
    "/docs/EU_Directive/EU_Directive.html": "../../audio/aurora/eudirectiveEN.mp3",
  }

  function initiate(){
    block: {
      var doc = window.location.pathname;

      for (var key in audioDict) {
        if (key == doc){
          wave.loadAudio(audioDict[key]);
          break block;
        }
      }

      var documentText = document.body.textContent;
      var keyValuePair = {};
      keyValuePair["text"] = documentText;
      sendData(keyValuePair);
    }
  }

  function sendData(data) {
    var XHR = new XMLHttpRequest();
    var urlEncodedData = "";
    var urlEncodedDataPairs = [];
    var name;

    // Turn the data object into an array of URL-encoded key/value pairs.
    for(name in data) {
      urlEncodedDataPairs.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }

    // Combine the pairs into a single string and replace all %-encoded spaces to
    // the '+' character; matches the behaviour of browser form submissions.
    urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");

    XHR.onload = function(e) {
      var audioPath = URL.createObjectURL(XHR.response);
      wave.loadAudio(audioPath);
    }

    // Set up our request
    XHR.open("POST", "https://talkify.net/api/speech/v1/download");
    XHR.responseType = "blob";
    XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    XHR.setRequestHeader("X-API-Key", "493cbf85-63ea-4afb-9d0b-f04a87682761");

    XHR.send(urlEncodedData);
  }

Injection

Provided that the modification of the document HTML files was not allowed, a workaround was required for placing all Aurora components inside the files. A JS script was written which injects the Aurora <div> container, a <div> container for the credits, an URL to a jQuery distribution, an auroraBrain.js and an auroraWave.js file. All this happens dynamically and automatically as soon as the user selected a document in the menu.

See the full auroraInjection.js below:

                      
  function injectAurora(){
    var frameContent = document.getElementById("frameDocument");
    var injected = frameContent.contentWindow.document.getElementsByName("auroraWave")[0];

    if (!injected) {
      frameContent.addEventListener("load", function() {
        bodyArea = frameContent.contentWindow.document.getElementsByTagName("body")[0];
        bodyArea.insertAdjacentHTML('afterbegin','<div id="auroraWrapper" style="display:none;"><div id="chart-container" onclick="wave.play()"></div><div id="text-container"><p>Hi,<br>I am <b>Aurora</b>.</p><p>I am powered by <a href="https://talkify.net/" target="_blank">Talkify</a>.</p><p>My face was designed by <a href="https://medium.com/@kelvinau4413/circular-audio-wave-js-library-for-audio-visualization-in-circular-waveform-49afe0aa87a" target="_blank">Kelvin Au</a>.</p></div></div>');

        var jquery   = frameContent.contentWindow.document.createElement("script");
        jquery.type  = "text/javascript";
        jquery.src   = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
        frameContent.contentWindow.document.head.appendChild(jquery);

        var auroraWave   = frameContent.contentWindow.document.createElement("script");
        auroraWave.type  = "text/javascript";
        auroraWave.src   = "../../js/auroraWave.min.js";
        auroraWave.setAttribute("name","auroraWave");
        if(auroraWave.addEventListener) {
          auroraWave.addEventListener("load",injectAuroraScript,false);
        } else if(auroraWave.readyState) {
          auroraWave.onreadystatechange = injectAuroraScript;
        }
        frameContent.contentWindow.document.head.appendChild(auroraWave);
      });
    };
  };

  function injectAuroraScript(){
    var frameContent = document.getElementById("frameDocument");
    var auroraBrain = frameContent.contentWindow.document.createElement("script");
    auroraBrain.type  = "text/javascript";
    auroraBrain.src   = "../../js/auroraBrain.js";
    if(auroraBrain.addEventListener) {
      auroraBrain.addEventListener("load",loadAurora,false);
    } else if(auroraBrain.readyState) {
      auroraBrain.onreadystatechange = loadAurora;
    }
    frameContent.contentWindow.document.body.appendChild(auroraBrain);
  }

  function loadAurora(){
    if (document.getElementById("currentTheme").innerHTML == "themes/aurora"){
      var frameContent = document.getElementById("frameDocument");
      frameContent.contentWindow.initiate();
    };
  };

No Boring Text

Most of the original content, i.e. the text, is hidden. The remaining elements are the title and visual organisation of information like images and tables. This result is achieved only with CSS styling. Consequently, the method does not require to modify the HTML files. The look could be achieved for any pre-existing webpage without actually removing content from the webpage. In the end, the CSS file just includes the value 'display: none;' for all hidden HTML tags. However, if a tag is a parent, all children would be irreversibly affected by the value 'none', which is why some elements are dropped by setting the height and width to zero.

See the actual CSS: 

                      
  section, article, footer {
    padding: 0;
    margin: 0;
    height: 0;
    width: 0;
  }
  h1, h2, h3, h4, h5, h6, p, q, ul, ol {
    display: none;
  }

Colours

While choosing the colour palette for Aurora, the intention was to create an optimistic vision of the future: clean, healthy, and dynamic. This is why the colours are mainly shades of blue with some having a tendency towards green. The overall feeling of a modern flow is fostered by the animated background which constantly mixes a predefined set of colours.

See how the background is created in CSS: 

                      
  body {
    padding: 2.5vw;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(60deg, #8bbbcc 0%, #86b9ca 49%, #4051b5 82%);
    background-size: 200%;
    animation: aurora 15s infinite;
    box-sizing: border-box;
  }
  body:before {
    margin: -2.5vw;
    background: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
    background-size: 200%;
    content: " ";
    position: fixed;
    animation: aurora 15s infinite;
    width: 100%;
    height: 100%;
  }
  @keyframes aurora {
    0% {
      background-position: left top;
    }
    25% {
      background-position: right top;
    }
    50% {
      background-position: right bottom;
    }
    75% {
      background-position: left bottom;
    }
    100% {
      background-position: left top;
    }
  }

SOURCES

Why We Don’t Read, Revisited by Caleb Crain (2018) www.newyorker.com

Twilight of the Books by Caleb Crain (2007) www.newyorker.com

Talkify – Text to Speech by Andreas Hagsten www.talkify.net

Circular Audio Wave by Kelvin Au www.medium.com

Previous Theme