Воспроизведение аудио (mp3) при наведении курсора на кнопку HTML

Несколько лет назад я написал несколько html-страниц для отображения Dante Divina Commedia и воспроизведения аудиофайлов, содержащих связанные комментарии и фактическое чтение.

Похоже, что этот проект претерпел серьезный случай бит-гниения.

Аудио больше не работает, а также форматирование не очень хорошо.

Проект довольно большой (в основном из-за аудиофайлов, но и страницы не тривиальны).

Поскольку я НЕ программист (я в основном программист C/C++/Java), я хотел бы получить несколько советов, прежде чем попытаться обновить этот код.

Основной частью является следующий javascript (подрезанный для терпения, я могу отправить все это, если это полезно):

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);
        }
}

Основная проблема заключается в том, что Firefox и Chrome я ничего не слышу, не нависая над сгенерированными кнопками и не нажимая на них, в то время как IE одновременно запускаются как аудиофайлы (commento, так и lettura), и их невозможно остановить.

Незначительная проблема - сгенерированная таблица с кнопками не "упакована" (т.е. Есть ложное вертикальное пространство между кнопками, которых не было много лет назад).

Может ли кто-нибудь предложить легкое исправление? В отсутствие такового: какова нынешняя лучшая практика для достижения этого эффекта (и предотвращения дальнейшей бит-гниль).

Я думаю, что я использовал нестандартное свойство, которое изменилось за эти годы; может кто-нибудь подтвердить это, пожалуйста?

TiA Mauro