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