# HG changeset patch
# User Jim Hague <jim.hague@acm.org>
# Date 1377687285 -3600
# Node ID e5f59f0e7dd5470b788fbf9d3ecfd1f30f3d2c9c
# Parent  78afd8761dace3674e64bbe5a52662e7efa3055c
Add audio player to tune web page.

Add an <audio> tag to the bottom centre of the tune web page. Give it options for MP3 and
OGG files. Most browsers will play MP3, and the ones that won't (Firefox) will play OGG.

Since we now have to generate OGGs, add a download link as well.

diff -r 78afd8761dac -r e5f59f0e7dd5 dottes.html.tune
--- a/dottes.html.tune	Wed Aug 21 14:21:38 2013 +0100
+++ b/dottes.html.tune	Wed Aug 28 11:54:45 2013 +0100
@@ -51,10 +51,18 @@
                        href="../@MASTERBOOKE@/@TUNE@.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3"
                        href="../@MASTERBOOKE@/@TUNE@.mp3">MP3</a></li>
+                <li><a class="dottes-link-tune dottes-ogg"
+                       href="../@MASTERBOOKE@/@TUNE@.ogg">OGG</a></li>
                 <li><a class="dottes-link-tune dottes-abc"
                        href="@TUNE@.abc">ABC</a></li>
               </ul>
             </div>
+            <div class="dottes-tune-footer-centre">
+              <audio controls>
+                <source src="@TUNE@.mp3" type="audio/mpeg" />
+                <source src="@TUNE@.ogg" type="audio/ogg" />
+              </audio>
+            </div>
             <div class="dottes-tune-footer-right">
               Last changed @LASTCHANGED@
             </div>
diff -r 78afd8761dac -r e5f59f0e7dd5 makeWebAudio.sh
--- a/makeWebAudio.sh	Wed Aug 21 14:21:38 2013 +0100
+++ b/makeWebAudio.sh	Wed Aug 28 11:54:45 2013 +0100
@@ -27,8 +27,14 @@
         abc2midi $filename -o $builddir/${tmpname}.mid
         timidity -Ow -o $builddir/${tmpname}.wav $builddir/${tmpname}.mid
         lame --quiet $builddir/${tmpname}.wav $builddir/${tmpname}.mp3
+        # Timidity can generate OGG directly. But we need to generate WAV
+        # for lame, and oggenc produces smaller output. OGG is needed for
+        # Firefox's audio tag. FF doesn't support MP3, some others support
+        # MP3 but not OGG.
+        oggenc -Q -o $builddir/${tmpname}.ogg $builddir/${tmpname}.wav
 
         mv $builddir/${tmpname}.mid $builddir/${name}.mid
         mv $builddir/${tmpname}.mp3 $builddir/${name}.mp3
+        mv $builddir/${tmpname}.ogg $builddir/${name}.ogg
         rm $builddir/${tmpname}.wav
     done
diff -r 78afd8761dac -r e5f59f0e7dd5 web/css/dottes.css
--- a/web/css/dottes.css	Wed Aug 21 14:21:38 2013 +0100
+++ b/web/css/dottes.css	Wed Aug 28 11:54:45 2013 +0100
@@ -184,6 +184,13 @@
 div.dottes-tune-footer-left
 {
     display: table-cell;
+    width: 25%;
+}
+
+div.dottes-tune-footer-centre
+{
+    display: table-cell;
+    text-align: center;
     width: 50%;
 }
 
@@ -191,7 +198,7 @@
 {
     display: table-cell;
     text-align: right;
-    width: 50%;
+    width: 25%;
 }
 
 a.dottes-tune-link
@@ -230,7 +237,7 @@
 {
     display: inline;
     margin-left: 0;
-    margin-right: 20px;
+    margin-right: 10px;
 }
 
 div.dottes-tune-list