1 files changed, 106 insertions, 0 deletions
diff --git a/webapp/app/static/music.html b/webapp/app/static/music.html
new file mode 100644
index 0000000..154e519
--- /dev/null
+++ b/webapp/app/static/music.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    </head>
+    <body>
+        <audio id="ocean_waves" controls loop>
+            <source src="/static/ocean_waves.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="seashore" controls loop>
+            <source src="/static/seashore.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="underwater" controls loop>
+            <source src="/static/underwater.mp3" type="audio/mpeg">
+        </audio>
+
+
+        <audio id="jellyfish" controls>
+            <source src="/static/jellyfish.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="dolphin" controls>
+            <source src="/static/dolphin.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="boat" controls>
+            <source src="/static/boat.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="nemo" controls>
+            <source src="/static/nemo.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="dory" controls>
+            <source src="/static/dory.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="whale" controls>
+            <source src="/static/whale.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="eel" controls>
+            <source src="/static/eel.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="stingray" controls>
+            <source src="/static/stingray.mp3" type="audio/mpeg">
+        </audio>
+
+        <audio id="shark" controls>
+            <source src="/static/shark.mp3" type="audio/mpeg">
+        </audio>
+
+    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
+
+        <script>
+        var currently_playing = undefined;
+        function playBackground(id) {
+            new_playing = document.getElementById(id)
+            if( !new_playing ) {
+                return;
+            }
+
+            if (currently_playing && currently_playing != new_playing) {
+                currently_playing.pause();
+            }
+            currently_playing = new_playing;
+            currently_playing.play();
+        }
+
+        function playEffect(id) {
+            document.getElementById(id).play();
+        }
+
+        $(document).ready(function() {
+            var namespace = '/music';
+            socket = io.connect('http://' + document.domain + ':' + location.port + namespace);
+            
+            socket.on('connect', function() {
+                console.log('connected!');
+            });
+
+            socket.on('disconnect', function() {
+                console.log('disconnected');
+            });
+
+
+            socket.on('background', function(msg) {
+                console.log('background', msg);
+                playBackground(msg.id);
+            });
+
+            socket.on('effect', function(msg) {
+                playEffect(msg.id);
+            });
+
+            socket.emit('ready');
+            setInterval(function() {
+                socket.emit('ready');
+            }, 5000);
+        });
+        </script>
+    </body>
+</html>