Change web page layout. build-default-344
authorJim Hague <jim.hague@acm.org>
Mon, 05 Aug 2019 23:25:28 +0100
changeset 943 d6e2a281cceb
parent 942 a774b3b3cad7
child 944 c94522186f73
Change web page layout. Put tune contents under 'tunes/<name>' or 'tunes-<instrument>/<name>'. That way they won't move if the tune gets moved between Bookes. For now I have not attempted to redirect old URLs.
Session/htaccess
abcfield.py
dottes.html.learnertune
dottes.html.tune
dottes.html.tuneindex
makeAll.sh
makeWeb.sh
makeWebAudio.sh
makeWebGraphics.sh
--- a/Session/htaccess	Mon Aug 05 23:22:04 2019 +0100
+++ b/Session/htaccess	Mon Aug 05 23:25:28 2019 +0100
@@ -1,1 +1,1 @@
-RedirectMatch permanent "(.*)/MazurkaAvignon\.html$" "$1/MazurkaAuvergne.html"
+RedirectMatch permanent "(.*)/MazurkaAvignon\.html$" "tunes/MazurkaAuvergne/index.html"
--- a/abcfield.py	Mon Aug 05 23:22:04 2019 +0100
+++ b/abcfield.py	Mon Aug 05 23:25:28 2019 +0100
@@ -175,7 +175,7 @@
     if latex:
         res = re.sub(r'\\href{(.*?).abc}', r'\\hyperlink{\1}', res)
     else:
-        res = re.sub(r'href="(.*?).abc"', r'href="\1.html"', res)
+        res = re.sub(r'href="(.*?).abc"', r'href="../\1/index.html"', res)
     return res.strip()
 
 # Implement a custom Markdown shorthand for referencing ABC files.
--- a/dottes.html.learnertune	Mon Aug 05 23:22:04 2019 +0100
+++ b/dottes.html.learnertune	Mon Aug 05 23:25:28 2019 +0100
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Cry Havoc tunes - learning ${title}</title>
-  <link rel="stylesheet" href="../css/dottes.css" />
+  <link rel="stylesheet" href="../../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
@@ -13,13 +13,13 @@
   <div class="container">
     <a href="/">
       <div class="header-strip banner">
-        <img src="../img/banner.png" alt="Havoc banner image">
+        <img src="../../img/banner.png" alt="Havoc banner image">
       </div>
     </a>
 
     <div class="dottes-body">
       <div class="dottes-tune-display">
-        <img src="../img/learner.png" alt="Learner tune image">
+        <img src="../../img/learner.png" alt="Learner tune image">
         Work out the melody or play along
         with these audio players. They play the melody repeatedly. There's
         a variety of speeds to choose from. You can also download the
@@ -59,18 +59,18 @@
             </div>
             <div class="dottes-tune-learner-play">
               <audio controls loop>
-                <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
-                <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
+                <source src="../../${mastertunedir}/${name}/normal-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/normal-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-midi" download
-                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -80,18 +80,18 @@
             </div>
             <div class="dottes-tune-learner-play">
               <audio controls loop>
-                <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
-                <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
+                <source src="../../${mastertunedir}/${name}/littleslow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/littleslow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/littleslow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/littleslow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -101,18 +101,18 @@
             </div>
             <div class="dottes-tune-learner-play">
               <audio controls loop>
-                <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
-                <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
+                <source src="../../${mastertunedir}/${name}/slow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/slow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/slow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/slow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/slow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -122,18 +122,18 @@
             </div>
             <div class="dottes-tune-learner-play">
               <audio controls loop>
-                <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
-                <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
+                <source src="../../${mastertunedir}/${name}/veryslow-${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/veryslow-${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-learner-download">
               <ul class="tune-data-list">
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/veryslow-${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/veryslow-${name}.ogg">OGG</a></li>
               </ul>
             </div>
           </div>
@@ -144,20 +144,20 @@
           <div class="dottes-tune-footer-learner-next-column"></div>
           <div class="dottes-tune-footer-learner-row">
             <div class="dottes-tune-footer-learner-prev">
-              <a href="${prevpage}">${prevfulltitle}</a>
+              <a href="../${prevpage}/learner.html">${prevfulltitle}</a>
             </div>
             <div class="dottes-tune-footer-learner-booke">
-              <a class="dottes-tune-icon-link" href="${name}.html">
-                <img class="dottes-tune-header-image" src="../img/music.png"
+              <a class="dottes-tune-icon-link" href="index.html">
+                <img class="dottes-tune-header-image" src="../../img/music.png"
                      alt="Tune dottes page" title="Go to dottes page for ${fulltitle}">
               </a>
-              <a class="dottes-tune-icon-link" href="index.html">
-                <img class="dottes-tune-header-image" src="../img/book.png"
+              <a class="dottes-tune-icon-link" href="../../${booke}/index.html">
+                <img class="dottes-tune-header-image" src="../../img/book.png"
                      alt="Tune booke index" title="Go to tune booke index">
               </a>
             </div>
             <div class="dottes-tune-footer-learner-next">
-              <a href="${nextpage}">${nextfulltitle}</a>
+              <a href="../${nextpage}/learner.html">${nextfulltitle}</a>
             </div>
           </div>
         </div>
--- a/dottes.html.tune	Mon Aug 05 23:22:04 2019 +0100
+++ b/dottes.html.tune	Mon Aug 05 23:25:28 2019 +0100
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Cry Havoc tunes - ${title}</title>
-  <link rel="stylesheet" href="../css/dottes.css" />
+  <link rel="stylesheet" href="../../css/dottes.css" />
 
   <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
         rel='stylesheet' type='text/css'>
@@ -13,7 +13,7 @@
   <div class="container">
     <a href="/">
       <div class="header-strip banner">
-        <img src="../img/banner.png" alt="Havoc banner image">
+        <img src="../../img/banner.png" alt="Havoc banner image">
       </div>
     </a>
 
@@ -55,11 +55,11 @@
                 <li><a class="dottes-link-tune dottes-pdf" download
                        href="${name}.pdf">PDF</a></li>
                 <li><a class="dottes-link-tune dottes-midi" download
-                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
                 <li><a class="dottes-link-tune dottes-mp3" download
-                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
                 <li><a class="dottes-link-tune dottes-ogg" download
-                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
+                       href="../../${mastertunedir}/${name}/${name}.ogg">OGG</a></li>
                 <li><a class="dottes-link-tune dottes-abc" download
                        href="${name}.abc">ABC</a></li>
                 <li><a class="dottes-link-tune dottes-xml" download
@@ -68,8 +68,8 @@
             </div>
             <div class="dottes-tune-footer-play">
               <audio controls>
-                <source src="../${masterbooke}/${name}.mp3" type="audio/mpeg" />
-                <source src="../${masterbooke}/${name}.ogg" type="audio/ogg" />
+                <source src="../../${mastertunedir}/${name}/${name}.mp3" type="audio/mpeg" />
+                <source src="../../${mastertunedir}/${name}/${name}.ogg" type="audio/ogg" />
               </audio>
             </div>
             <div class="dottes-tune-footer-last">
@@ -78,20 +78,20 @@
           </div>
           <div class="dottes-tune-footer-row">
             <div class="dottes-tune-footer-prev">
-              <a href="${prevpage}">${prevfulltitle}</a>
+              <a href="../${prevpage}/index.html">${prevfulltitle}</a>
             </div>
             <div class="dottes-tune-footer-booke">
-                <a class="dottes-tune-icon-link" href="learner-${name}.html">
-                  <img class="dottes-tune-header-image" src="../img/learner.png"
+                <a class="dottes-tune-icon-link" href="learner.html">
+                  <img class="dottes-tune-header-image" src="../../img/learner.png"
                        alt="Learner tune page" title="Go to learner page for ${fulltitle}">
                 </a>
-                <a class="dottes-tune-icon-link" href="index.html">
-                  <img class="dottes-tune-header-image" src="../img/book.png"
+                <a class="dottes-tune-icon-link" href="../../${booke}/index.html">
+                  <img class="dottes-tune-header-image" src="../../img/book.png"
                        alt="Tune booke index" title="Go to tune booke index">
                 </a>
             </div>
             <div class="dottes-tune-footer-next">
-              <a href="${nextpage}">${nextfulltitle}</a>
+              <a href="../${nextpage}/index.html">${nextfulltitle}</a>
             </div>
           </div>
         </div>
--- a/dottes.html.tuneindex	Mon Aug 05 23:22:04 2019 +0100
+++ b/dottes.html.tuneindex	Mon Aug 05 23:25:28 2019 +0100
@@ -1,15 +1,15 @@
 <div class="dottes-tune-list-item">
   <div class="dottes-tune-list-item-link">
-    <a class="dottes-tune-link" href="${name}.html">${fulltitle}</a>
+    <a class="dottes-tune-link" href="../${tunedir}/index.html">${fulltitle}</a>
   </div>
   <div class="dottes-tune-list-item-learner-link">
-    <a class="dottes-tune-link" href="learner-${name}.html">
+    <a class="dottes-tune-link" href="../${tunedir}/learner.html">
       <img class="dottes-tune-table-image" src="../img/learner.png" alt="Learner page" title="Learner page for ${fulltitle}">
     </a>
   </div>
   <div class="dottes-tune-list-item-image">
-    <a href="${name}.html">
-      <img class="dottes-tune-table-image" src="firstline-${name}.png"
+    <a href="../${tunedir}/index.html">
+      <img class="dottes-tune-table-image" src="../${tunedir}/firstline-${name}.png"
            alt="${fulltitle} first line" title="${fulltitle} first line">
     </a>
   </div>
--- a/makeAll.sh	Mon Aug 05 23:22:04 2019 +0100
+++ b/makeAll.sh	Mon Aug 05 23:25:28 2019 +0100
@@ -48,7 +48,7 @@
     makeBookePrint "$1"
 
     # Web output. Uses audio from main booke.
-    ./makeWebGraphics.sh "$1"
+    ./makeWebGraphics.sh "$1" "$3"
     ./makeWeb.sh "$1" "$2" "$3"
 }
 
--- a/makeWeb.sh	Mon Aug 05 23:22:04 2019 +0100
+++ b/makeWeb.sh	Mon Aug 05 23:25:28 2019 +0100
@@ -18,7 +18,10 @@
 masterbooke=$2
 bookedir=$dir/$1
 masterbookedir=$dir/$2
-webdir=$dir/web/$1
+basewebdir=$dir/web
+mastertunedir=tunes
+basetunedir=$mastertunedir
+bookewebdir=$dir/web/$1
 graphicsdir=$dir/graphics/$1
 output=index.html
 tunelist=tunelist.html
@@ -38,34 +41,35 @@
 if [ -n "$instrument" ]; then
     title="${title} ($instrument)"
     subtitle="${subtitle} ($instrument)"
+    basetunedir="${basetunedir}-${instrument}"
 fi
 
-mkdir -p $webdir
+mkdir -p $bookewebdir
 
 sed -e "s/@BUILD@/$buildno/" -e "s/@SUBTITLE@/$subtitle/" \
-    -e "s/@TITLE@/$title/" -e "s/@BOOK@/$booke/" dottes.html > $webdir/$output
+    -e "s/@TITLE@/$title/" -e "s/@BOOK@/$booke/" dottes.html > $bookewebdir/$output
 
 for item in intro
 do
-    rm -f $webdir/$item.html
+    rm -f $bookewebdir/$item.html
     if [ -r $bookedir/$item.md ]; then
-        pandoc --from=markdown --to=html --output=$webdir/$item.html $bookedir/$item.md
+        pandoc --from=markdown --to=html --output=$bookewebdir/$item.html $bookedir/$item.md
     else
-        touch $webdir/$item.html
+        touch $bookewebdir/$item.html
     fi
 done
 
 # Copy in any htaccess.
 if [ -r $masterbookedir/htaccess ]; then
-    cp $masterbookedir/htaccess $webdir/.htaccess
+    cp $masterbookedir/htaccess $bookewebdir/.htaccess
 fi
 
 # Copy in the book PDFs. Like the graphics, Midi etc. these are assumed
 # to be already generated.
-cp $1-*.pdf $webdir
+cp $1-*.pdf $bookewebdir
 
 # Now, for each tune, make the tune page.
-rm -f $webdir/$tunelist
+rm -f $bookewebdir/$tunelist
 declare -a filenames
 filenames=(`find $bookedir -maxdepth 1 -name "*.abc" | sort`)
 nofiles=${#filenames[@]}
@@ -73,22 +77,15 @@
 do
     filename=${filenames[$i]}
     name=`basename $filename .abc`
+    tunedir=$basetunedir/$name
+    tunewebdir=$basewebdir/$tunedir
+    mkdir -p $tunewebdir
 
     # Copy the ABC into the web.
-    cp $filename $webdir
+    cp $filename $tunewebdir
 
     # Generate MusicXML into the web.
-    python $abc2xml $filename > ${webdir}/${name}.xml
-
-    # If we are not the master booke, link the mp3s in from the
-    # master page in a desperate attempt to make IE8 work.
-    # The Jenkins archive will dereference the soft link, it seems,
-    # but I guess I can live with copies of the MP3 for now.
-    if [ "$booke" != "$masterbooke" ]; then
-        pushd ${webdir} > /dev/null
-        ln -f -s ../${masterbooke}/*${name}.mp3 .
-        popd > /dev/null
-    fi
+    python $abc2xml $filename > ${tunewebdir}/${name}.xml
 
     # Get date and time of last change to tune.
     lastchanged=`hg log --limit 1 --template "{date|shortdate}" $masterbookedir/${name}.abc`
@@ -101,34 +98,35 @@
 
     if [ $i -gt 0 ]; then
         prev=${filenames[$((i - 1))]}
-        prevpage=`basename $prev .abc`.html
+        prevpage=`basename $prev .abc`
         prevarg="--prev $prev"
     fi
     if [ $i -lt $((nofiles - 1)) ]; then
         next=${filenames[$((i + 1))]}
-        nextpage=`basename $next .abc`.html
+        nextpage=`basename $next .abc`
         nextarg="--next $next"
     fi
 
     # Generate the tune web page.
-    tunepage=${name}.html
-    learnerpage=learner-${name}.html
-
     $dir/abctemplate.py \
-        --value "masterbooke=${masterbooke}" \
+        --value "booke=${booke}" \
+        --value "mastertunedir=${mastertunedir}" \
         --value "lastchanged=${lastchanged}" \
         --value "prevpage=${prevpage}" \
         --value "nextpage=${nextpage}" \
         ${prevarg} ${nextarg} \
         --template dottes.html.tune \
-        $filename > $webdir/$tunepage
+        $filename > $tunewebdir/index.html
     $dir/abctemplate.py \
-        --value "masterbooke=${masterbooke}" \
+        --value "booke=${booke}" \
+        --value "mastertunedir=${mastertunedir}" \
         --value "lastchanged=${lastchanged}" \
         --value "prevpage=${prevpage}" \
         --value "nextpage=${nextpage}" \
         ${prevarg} ${nextarg} \
         --template dottes.html.learnertune \
-        $filename > $webdir/$learnerpage
-    $dir/abctemplate.py --template dottes.html.tuneindex $filename >> $webdir/$tunelist
+        $filename > $tunewebdir/learner.html
+    $dir/abctemplate.py \
+        --value "tunedir=${tunedir}" \
+        --template dottes.html.tuneindex $filename >> $bookewebdir/$tunelist
 done
--- a/makeWebAudio.sh	Mon Aug 05 23:22:04 2019 +0100
+++ b/makeWebAudio.sh	Mon Aug 05 23:25:28 2019 +0100
@@ -12,39 +12,46 @@
 dir=`pwd`
 
 booke=$dir/$1
-builddir=$dir/web/$1
-
-mkdir -p $builddir
+basewebdir=$dir/web
+basetunedir=$basewebdir/tunes
 
 # Make MP3 and OGG files for the input .abc. Since we're listening to
 # a doorbell playing the tunes, go for lowest quality (and hence smallest)
-# MP3 and OGG. $1 is the input filename, $2 is optional args for timidity.
+# MP3 and OGG. $1 is the input filename, $2 is the output directory,
+# $3 is optional args for timidity.
 makeaudiofiles()
 {
     name=`basename $1 .abc`
+    tunedir="$2"
 
-    abc2midi $1 -o $builddir/${name}.mid
-    timidity -OwM $2 -o $builddir/${name}.wav $builddir/${name}.mid
-    lame -m m -V 9 --quiet $builddir/${name}.wav $builddir/${name}.mp3
+    abc2midi $1 -o $tunedir/${name}.tmp.mid
+    mv $tunedir/${name}.tmp.mid $tunedir/${name}.mid
+    timidity -OwM $3 -o $tunedir/${name}.wav $tunedir/${name}.mid
+    lame -m m -V 9 --quiet $tunedir/${name}.wav $tunedir/${name}.tmp.mp3
+    mv $tunedir/${name}.tmp.mp3 $tunedir/${name}.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 -q 0 -o $builddir/${name}.ogg $builddir/${name}.wav
+    oggenc -Q -q 0 -o $tunedir/${name}.tmp.ogg $tunedir/${name}.wav
+    mv $tunedir/${name}.tmp.ogg $tunedir/${name}.ogg
 
-    rm $builddir/${name}.wav
+    rm $tunedir/${name}.wav
 }
 
-# Make audio for a new tempo for the abc file $1, giving the output files
-# the same name with a prefix $2. The new tempo is the original tempo
-# (120 used if not specified), multiplied by $3 and divided by $4.
-# These audio files are for Learner use; I've found that having the
-# chords thumping away can make it hard to distinguish the melody, so
-# arrange for timidity to mute everything except the melody track.
+# Make audio for a new tempo for the abc file $1, giving the output
+# files the same name with a prefix $3 in output directory $2. The new
+# tempo is the original tempo (120 used if not specified), multiplied
+# by $4 and divided by $5.  These audio files are for Learner use;
+# I've found that having the chords thumping away can make it hard to
+# distinguish the melody, so arrange for timidity to mute everything
+# except the melody track.
 makeaudiofortempo()
 {
-    name=`basename $filename .abc`
-    newspeedfilename="$2-${name}.abc"
+    name=`basename $1 .abc`
+    tunedir="$2"
+    newspeedfilename="$3-${name}.abc"
+    mkdir -p $tunedir
 
     # Prepare new speed audio files.
     # The tempo is either a plain number, or <notelen>=<number>.
@@ -57,23 +64,27 @@
     numtempo=${tempo:pos}
     notelenprefix=${tempo:0:pos}
     # Calculate new tempo.
-    newtempo=$(( ( $numtempo * $3 ) / $4 ))
+    newtempo=$(( ( $numtempo * $4 ) / $5 ))
     # Insert new tempo and delete old. Old may not exist,
     # so do this rather than overwrite.
-    sed -e "/^Q:/d" -e "/^K:/aQ: ${notelenprefix}${newtempo}" $1 > $builddir/$newspeedfilename
-    makeaudiofiles $builddir/$newspeedfilename --mute=0,-1
-    rm $builddir/$newspeedfilename
+    sed -e "/^Q:/d" -e "/^K:/aQ: ${notelenprefix}${newtempo}" $1 > $tunedir/$newspeedfilename
+    makeaudiofiles $tunedir/$newspeedfilename $tunedir --mute=0,-1
+    rm $tunedir/$newspeedfilename
 }
 
 # Generate audio files and slow speed (currently half speed) audio files.
 find $booke -maxdepth 1 -name "*.abc" | sort |
     while read filename
     do
-        makeaudiofiles $filename
+        name=`basename $filename .abc`
+        tunedir=$basetunedir/$name
+        mkdir -p $tunedir
+
+        makeaudiofiles $filename $tunedir
 
         # Now make 1/4, 1/2 and 3/4 speed audio.
-        makeaudiofortempo $filename "veryslow" 1 4
-        makeaudiofortempo $filename "slow" 2 4
-        makeaudiofortempo $filename "littleslow" 3 4
-        makeaudiofortempo $filename "normal" 4 4
+        makeaudiofortempo $filename $tunedir "veryslow" 1 4
+        makeaudiofortempo $filename $tunedir "slow" 2 4
+        makeaudiofortempo $filename $tunedir "littleslow" 3 4
+        makeaudiofortempo $filename $tunedir "normal" 4 4
     done
--- a/makeWebGraphics.sh	Mon Aug 05 23:22:04 2019 +0100
+++ b/makeWebGraphics.sh	Mon Aug 05 23:25:28 2019 +0100
@@ -1,21 +1,25 @@
 #!/bin/bash
 #
 # Make graphics required for the website but not for the book.
-# They go into web/<book>.
+# They go into web/tunes/<tunename>, or web/tunes-<instrument>/<tunename>.
 #
 
-if [ $# != 1 ]; then
-    echo "Usage: makeWebGraphics.sh <book dir name>"
+if [[ $# -lt 1 ]]; then
+    echo "Usage: makeWebGraphics.sh <book dir name> [<instrument name>]"
     exit 1
 fi
 
 dir=`pwd`
 
 booke=$dir/$1
-builddir=$dir/web/$1
+basewebdir=$dir/web
+basetunedir=$basewebdir/tunes
 graphicsdir=$dir/graphics/$1
+instrument=$2
 
-mkdir -p $builddir
+if [ -n "$instrument" ]; then
+    basetunedir="${basetunedir}-${instrument}"
+fi
 
 # Now, for each tune, make the main tune and tune first line bitmaps.
 # Do this to temp files and rename into place to make updates as
@@ -24,16 +28,19 @@
     while read filename
     do
         name=`basename $filename .abc`
+        tunedir=$basetunedir/$name
+        mkdir -p $tunedir
+
         tmpname=${name}.tmp
-        convert -colors 256 -quality 90 -density 200 $graphicsdir/${name}.pdf $builddir/${tmpname}.png
-        convert -colors 256 -quality 90 -density 200 $graphicsdir/firstline-${name}.pdf $builddir/firstline-${tmpname}.png
+        convert -colors 256 -quality 90 -density 200 $graphicsdir/${name}.pdf $tunedir/${tmpname}.png
+        convert -colors 256 -quality 90 -density 200 $graphicsdir/firstline-${name}.pdf $tunedir/firstline-${tmpname}.png
 
-        mv $builddir/${tmpname}.png $builddir/${name}.png
-        mv $builddir/firstline-${tmpname}.png $builddir/firstline-${name}.png
+        mv $tunedir/${tmpname}.png $tunedir/${name}.png
+        mv $tunedir/firstline-${tmpname}.png $tunedir/firstline-${name}.png
 
         # Make the web downloadable PDF with the tune title.
-        abcm2ps -E -F singletuneweb -O $builddir/$name.eps $filename
+        abcm2ps -E -F singletuneweb -O $tunedir/$name.eps $filename
         # And make the corresponding PDF.
-        epstopdf --outfile=$builddir/$name.pdf $builddir/${name}001.eps
-        rm $builddir/${name}001.eps
+        epstopdf --outfile=$tunedir/$name.pdf $tunedir/${name}001.eps
+        rm $tunedir/${name}001.eps
     done