CryHavoc
/
dottes
2
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Jim Hague 2013-08-28 11:54:45 +01:00
parent ecbe58dd21
commit e049dc77a9
3 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dottes.html.tune
View File

@ -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>

6
makeWebAudio.sh
View File

@ -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

11
web/css/dottes.css
View File

@ -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