javascript - 将鼠标悬停在html按钮上时播放音频(mp3)

Question

几年前，我写了一些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)都立即启动，无法停止。

较小的问题是生成的带有按钮的表未“打包”(即:按钮之间存在虚假的垂直空间，而这是几年前没有的)。

有人可以建议一个简单的解决方法吗？
在没有这种情况的情况下:目前达到该效果的最佳做法是什么(并防止进一步的位腐烂)。

我认为我多年来一直在使用一些非标准属性，这些属性已经发生了变化。有人可以确认吗？

钛
毛罗

Answer 1

并非所有浏览器都支持相同的音频文件格式。看看here。
基本上，:

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

但是，您可以看看 this，它很容易地解释了如何使用CSS在悬停时播放音频。