Play audio (mp3) on hovering over html button

Question

Several years ago I wrote some html pages to display Dante's Divina Commedia and to play audio files containing associated comment and actual reading.

This project seems to have undergone a severe case of bit-rot.

Audio is not working anymore and also formatting is not good.

Project is quite big (mostly due to audio files, but also the pages are not trivial).

Since I am NOT a web programmer (I'm mainly a C/C++/Java programmer) I would like some advice before I try to revamp this code.

Core part is the following javascript (trimmed for terseness, I can send the whole thing, if useful):

function writeTable() {
        document.write('<TABLE border="1" width="100%">',
                       '  <tr>',
                       '    <td rowspan="3" width="60%">');
        conditionalParagraph(true);
        document.write('      <form name=f1>',
                       '        <input disabled class="select" type="button" name="b1" value="Canto I" style="height:120; font-size:28pt">',
                       '      </form>');
        conditionalParagraph(false);
        document.write('    </td>',
                       '    <td>');
        conditionalParagraph(true);
        document.write('      <form name=f4>',
                       '        <input class="select" type="button" name="b4" value="Immagine" onclick="switchImmagine()">',
                       '      </form>');
        conditionalParagraph(false);
        document.write('    </td>',
                       '    <td rowspan="3" width="80" height="120">',
                       '       <img name="foto" src="../../img/sermonti_vittorio.jpg" onclick="setPlaying(0)">',
                       '    </td>',
                   '  </tr>',
                       '  <tr>',
                       '    <td>');
        conditionalParagraph(true);
        document.write('      <form name=f2>',
                       '        <input class="select" type="button" name="b2" value="Commento" onMouseOver="commentoOver()" onclick="setPlaying(1)" onMouseOut="commentoOut()">',
                       '      </form>');
        conditionalParagraph(false);
        document.write('    </td>',
                       '  </tr>',
                       '  <tr>',
                       '    <td>');
        conditionalParagraph(true);
        document.write('      <form name=f3>',
                       '        <input class="select" type="button" name="b3" value="Lettura" onMouseOver="letturaOver()" onclick="setPlaying(2)" onMouseOut="letturaOut()">',
                       '      </form>');
        conditionalParagraph(false);
        document.write('    </td>',
                       '  </tr>',
                       '</table>');
}


var playing = 0;

function playC(b) {
        if (b)
                if (navigator.family == "gecko")
                        document.audioCommento.Play(false);
                else
                        document.audioCommento.Play();
        else
                document.audioCommento.Stop();
}

function playL(b) {
        if (b)
                if (navigator.family == "gecko")
                    document.audioLettura.Play(false);
                else
                document.audioLettura.Play();
        else
                document.audioLettura.Stop();
}

function commentoOver() {
            if (playing == 0) {
                document.foto.src="../../img/sermonti_vittorio.jpg";
                top.frames["pagina"].playC(true);
        }
}

function letturaOver() {
        if (playing == 0) {
                document.foto.src="../../img/dante_alighieri.jpg";
                        top.frames["pagina"].playL(true);
        }
}

function commentoOut() {
        if (playing == 0) {
                top.frames["pagina"].playC(false);
        }
}

function letturaOut() {
        if (playing == 0) {
                top.frames["pagina"].playL(false);
        }
}

Main problem is with Firefox and Chrome I do not hear anything neither hovering over the generated buttons nor clicking on them, while with IE both audio files (commento and lettura) start immediately and it is not possible to stop them.

Minor problem is the generated table with buttons is not "packed" (i.e.: there is spurious vertical space between buttons which was not there years ago).

Can someone suggest an easy fix? In absence of such: what is the current best practice to achieve this effect (and prevent further bit-rot).

I think I've been using some non-standard property that changed in the years; can someone confirm this, please?

TiA Mauro

Answer 1

Not all the browsers support same audio file formats. Have a look here. Basicaly, :

Browser MP3 Wav Ogg
IE      YES NO  NO
Chrome  YES YES YES
Firefox NO  YES YES
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3 
Safari  YES YES NO
Opera   NO  YES YES

However, you can have a look at this, which explains very easily how you can play audios on hover using CSS.