automatically include audio files as clickable links

app/modules/filesinfolders.php

@@ -14,6 +14,7 @@ class FilesInFolders {
             'txt'=>array( 'txt', 'text', 'md' ),
             'pic'=>array( 'jpg', 'jpeg', 'png', 'svg' ),
             'tpl'=>array( 'html', 'htm', 'tpl' ),
+            'audio'=>array('mp3','wav','ogg'),
             'csv'=>array( 'csv' )
         );
     public $config = array();
@@ -157,6 +158,14 @@ class FilesInFolders {
                     );
                 }
             }
+            if (true) {
+                foreach ($this->structs[$domain_key]['audio'] as $key=>$file) {
+                    $this->content[$domain][$key] = sprintf(
+                        '<a href="%s" class="audio">%s</a><br>',
+                        $file, $key
+                    );
+                }
+            }
             foreach($this->structs[$domain_key]['csv'] as $key=>$file) {
                 $csv = new \Modules\Ography($file,TRUE);
                 $str="<table>";

app/views/tpl/index.html

@@ -22,6 +22,7 @@
         <link href="/{{ @RESOURCES }}featherlight.min.css" type="text/css" rel="stylesheet" />
         
         <script type="text/javascript" src="/{{ @RESOURCES }}jquery-3.3.1.min.js"></script>
+        <script type="text/javascript" src="/{{ @RESOURCES }}freaWebAudio.js"></script>
         <script type="text/javascript" src="/{{ @RESOURCES }}script.js"></script>
 
         <link type="text/css" href="/{{ @RESOURCES }}{{ @theme }}" rel="stylesheet" />
@@ -42,6 +43,6 @@
         </check>
         
         <script type="text/javascript" src="/{{ @RESOURCES }}featherlight.min.js"></script>
-        
+        <script type="text/javascript" src="/{{ @RESOURCES }}init_audio.js"></script>
     </body>
 </html>

rsc/freaWebAudio.js

@@ -0,0 +1,59 @@
+
+function AudioTagSample() {
+
+    // initialize audio player
+    this.audio = new Audio();
+    this.isPlaying = false;
+    
+    
+    window.addEventListener('load', this.onload.bind(this), false);
+}
+
+AudioTagSample.prototype.onload = function() {
+    // Create the audio nodes.
+    this.source = context.createMediaElementSource(this.audio);
+
+    this.source.connect(context.destination);
+};
+
+AudioTagSample.prototype.click = function(link) {
+
+    var was_inactive = this.audio.paused
+    var was_the_same = this.audio.src == link.href
+
+    var controls = document.querySelectorAll('.controls');
+    for (i=0;i<controls.length;i++){
+	controls[i].classList.toggle("playing");
+        controls[i].classList.remove("fresh");
+    };
+
+    if (was_the_same) {
+	if (this.audio.paused) {
+	    this.audio.play();
+	    link.classList.remove("paused")
+	    link.classList.add("playing")
+	} else {
+	    this.audio.pause();
+	    link.classList.remove("playing")
+	    link.classList.add("paused")
+	}
+	
+    } else {
+	if(this.link) {
+	    this.link.classList.remove("playing")
+	    this.link.classList.remove("paused")
+	}
+	this.audio.src = link.href;
+        this.link = link
+	this.audio.play();
+	link.classList.remove("paused")
+	link.classList.add("playing")
+    }
+
+    if (was_inactive) {
+	requestAnimFrame(this.draw.bind(this));
+    }
+    this.link = link;
+};
+
+

rsc/init_audio.js

@@ -0,0 +1,32 @@
+
+context = new (window.AudioContext || window.webkitAudioContext)();
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+    return  window.requestAnimationFrame      ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame    ||
+        window.oRequestAnimationFrame      ||
+        window.msRequestAnimationFrame     ||
+        function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+        };
+})();
+
+
+var sample = new AudioTagSample({orientation:'horizontal',axisScale:'lin'});
+var links = document.querySelectorAll('.audio');
+for (i=0;i<links.length;i++){
+    links[i].addEventListener("click", function(ev) {
+	ev.preventDefault();
+        context.resume();
+	sample.click(ev.target);
+    });
+}
+
+function play_pause(el) {
+    if (sample.audio.paused) {
+        sample.click(sample.link);
+    } else {
+        sample.click(sample.link);
+    }
+}