diff --git a/typescript/waveform.ts b/typescript/waveform.ts
index 8947d2e890..a223cbdd16 100644
--- a/typescript/waveform.ts
+++ b/typescript/waveform.ts
@@ -1,17 +1,26 @@
-
 // FIXME: no type declarations exist.
+declare var $: any;
 declare var WaveSurfer: any;
 
 type WaveSurfer = any;
 
-export class WaveformPlayer {
+export default class WaveformPlayer {
   wavesurfer: WaveSurfer;
 
-  constructor(css_selector: string) {
+  constructor(css_selector: string, waveColor?: string,
+              progressColor?: string) {
+    waveColor = waveColor
+        || $('meta[name=wave_color]').attr('content')
+        || 'teal';
+
+    progressColor = progressColor
+        || $('meta[name=progress_color]').attr('content')
+        || 'purple';
+
     this.wavesurfer = WaveSurfer.create({
         container: css_selector,
-        waveColor: 'teal',
-        progressColor: 'purple'
+        waveColor: waveColor,
+        progressColor: progressColor,
     });
   }
 
diff --git a/web/index.html b/web/index.html
index 269a67eb41..ec0737e288 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,9 @@
     <link rel="stylesheet" href="/assets/style.css" type="text/css">
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <!-- Variables -->
+    <meta name="wave_color" content="#777">
+    <meta name="progress_color" content="#222">
   </head>
   <body>
     <div id="main">
@@ -81,7 +84,14 @@
     </div>
     <audio id="sound"></audio>
     <script src="/assets/libraries.js"/></script>
-    <script src="/assets/script.js"/></script>
     <script src="/assets/output/waveform.built.js"/></script>
+    <script type="text/javascript">
+      /*window.waveform_player = new WaveformPlayer(
+        '#waveform',
+        '#f00',
+        '#0ff'
+      );*/
+    </script>
+    <script src="/assets/script.js"/></script>
   </body>
 </html>