Add section about permissions

voicegardens/static/styles.css

@@ -33,6 +33,11 @@ canvas {
   display: block;
 }
 
+img.perms {
+  width: 30%;
+  display: inline;
+}
+
 /* Button style */
 
 img.button {

voicegardens/templates/about.html

@@ -32,7 +32,26 @@
     <img class="button button-about" src="../static/images/ABOUT-BW.png">
     <h4>About</h4>
 
-    <h3>2. About the work</h3>
+    <h3>2. Note on Browser Permissions & Compatibility</h3>
+
+    <p>
+      The site has been successfully tested on Firefox version 72 and Google
+      Chrome version 79 and Safari 13. Due to browser permission policies, the
+      viewer must enable microphone and sound permissions in order for the site
+      function correctly (see images below). We have seen that some mobile browser applications
+      (such as Firefox) do not immediately request these permissions.
+      Furthermore, restrictive <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio">auto-play policies</a>
+      may require that the viewer first interact with the site (for example,
+      clicking/touching the "Leaf" button first) before enabling
+      microphone/sound permissions. Every effort has been made in the
+      development to account for the varied browser permissions ecosystem. For
+      best results, we recommend using a desktop computer or laptop where
+      permissions are more easily configured.
+    </p>
+    <img class="perms" src="../static/images/chromeperms.png">
+    <img class="perms" src="../static/images/ffoxperms.png">
+
+    <h3>3. About the work</h3>
     <p>Welcome to <i>Wet Signal Voice Gardens</i>, a growing online landscape and tool to explore the many facets of the human voice! <i>Wet Signal Voice Gardens</i> is a web-based artwork that invites broad participation to investigate the
       non-linguistic
       properties
@@ -45,23 +64,23 @@
 
     <p>Copyright © <i>Wet Signal Voice Gardens</i> by Kari Robertson is commissioned by UP Projects for This is Public Space and supported by Stimuleringfonds and Arts Council England.</p>
 
-    <h3>3. About Kari Robertson</h3>
+    <h3>4. About Kari Robertson</h3>
     <p>Kari Robertson b. 1988, Scotland, is a visual artist who lives and works in Rotterdam, The Netherlands. Robertson works with time-based media, primarily sound, analogue film and digital video. She received an M.A in Fine Art from The Piet
       Zwart Institute in 2016, and undertook a residency at Deltaworkers (New Orleans) through the Mondriaan Fund in 2019.</p>
     <p>In her work Kari takes a ‘sci-fi’ approach to subjectivity, using narrative as a tool to re/un-think the sovereignty of our bodies, identities or minds, and as a means to access forms of ‘radical empathy’.</p>
     <p>Kari also plays in the improvisational/experimental band Difficult with Eothan Stearn and Tracy Hanna.</p>
 
-    <h3>4. Contributors</h3>
+    <h3>5. Contributors</h3>
     <p>The work was designed and developed by <a href="https://randomiser.info/">Cristina Cochior</a> and <a href="https://decentral1.se/">Luke Murphy</a>.</p>
 
-    <h3>5. How the page works</h3>
+    <h3>6. How the page works</h3>
     <p>This website is made using mainly <a href="https://flask.palletsprojects.com/en/1.1.x/">Flask</a> and <a href="https://p5js.org/">P5js</a>.</p>
     <p>Users are invited to record their voices speaking or making non-verbal sounds into the site which the software will then translate into visual forms. Audio attributes such as amplitude and duration of sound recordings are translated into the
       visual properties of size, number of edges, and colour. Users can play with using the different qualities of their voice to create varied and dynamic visualisations. The recordings are then ‘planted’ in the voicegarden (or added to the
       archive). </p>
     <p>Using the small ‘plant’ button, archived recordings by previous users are placed on the site and made to interact with the active user. The recordings made by visitors are deleted from the server each day.</p>
 
-    <h3>6. About UP Projects and This is Public Space</h3>
+    <h3>7. About UP Projects and This is Public Space</h3>
     <p>UP Projects commissions contemporary art for public places. It supports artists to make work that has social relevance, encourages learning, transforms places and activates the public realm. UP Projects believe that public art has the
       greatest
       potential when the process is considered as important as the final project outcome.</p>
@@ -69,11 +88,13 @@
       TIPS
       creates
       space to explore how we navigate between the online and physical worlds, and to explore the impact of digital media on our relationships with people and places.</p>
-    <h3>7. About Stimuleringsfonds</h3>
+
+    <h3>8. About Stimuleringsfonds</h3>
     <p>The Fund strives to make a substantial contribution to the quality of professional design practice within and especially between the disciplines of architecture, design and digital culture. Part of this endeavour is the interdisciplinary
       interplay
       between the cultural, social and economic domains. The Fund supports exceptional and innovative projects and activities of designers, makers and cultural institutions in the creative industries.</p>
-    <h3>8. Licensing</h3>
+
+    <h3>9. Licensing</h3>
     <p>Wet signal Voice Garden is Licensed under the Creative Commons (CC) ‘Attribution – Non Commercial – NoDerivatives 4.0 International License’ (<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">CC BY-NC-ND 4.0</a>).</p>
     <p>The recordings contained on this website are submitted by the public as part of
       the
@@ -88,15 +109,9 @@
       <p>Please contact UP Projects at info@upprojects.com before using this material.</p>
     </p>
 
-    <h3>9. Licensing for the code</h3>
+    <h3>10. Licensing for the code</h3>
     The code for this website is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPL</a> and can be found <a href="https://git.vvvvvvaria.org/varia/voicegardens">here</a>.
 
-    <h3>10. Browser Compatibility</h3>
-
-    It is recommended to use either the Firefox or Google Chrome browser as they are the most commonly used
-    and easily supported browsers. The website has been tested on Firefox version 72 and Google Chrome version
-    79.
-
     <div class="footer">
       Supported by <img class="ac" src="../static/images/artscouncil.png"><img class="stimu" src="../static/images/stimu.en.gif"><img class="up" src="../static/images/up-projects.png">
     </div>