From e049dc77a91837f1e17f419d8b2f7d2a541c2337 Mon Sep 17 00:00:00 2001
From: Jim Hague <jim.hague@acm.org>
Date: Wed, 28 Aug 2013 11:54:45 +0100
Subject: [PATCH] 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.
---
 dottes.html.tune   |  8 ++++++++
 makeWebAudio.sh    |  6 ++++++
 web/css/dottes.css | 11 +++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/dottes.html.tune b/dottes.html.tune
index 83c184e..2c8d82f 100644
--- a/dottes.html.tune
+++ b/dottes.html.tune
@@ -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 --git a/makeWebAudio.sh b/makeWebAudio.sh
index c6fd443..bc0effd 100755
--- a/makeWebAudio.sh
+++ b/makeWebAudio.sh
@@ -27,8 +27,14 @@ find $booke -name "*.abc" | sort |
         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 --git a/web/css/dottes.css b/web/css/dottes.css
index a64f0e4..0a91969 100644
--- a/web/css/dottes.css
+++ b/web/css/dottes.css
@@ -184,6 +184,13 @@ div.dottes-tune-footer-row
 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 @@ div.dottes-tune-footer-right
 {
     display: table-cell;
     text-align: right;
-    width: 50%;
+    width: 25%;
 }
 
 a.dottes-tune-link
@@ -230,7 +237,7 @@ ul.tune-data-list li
 {
     display: inline;
     margin-left: 0;
-    margin-right: 20px;
+    margin-right: 10px;
 }
 
 div.dottes-tune-list