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）立即启动而不是可以阻止他们。

小问题是带有按钮的生成表不是＆＃34;打包＆＃34; （即：按钮之间有虚假的垂直空间，多年前不）。

有人可以建议轻松修复吗？如果没有这样的话：目前实现这种效果的最佳做法是什么（并防止进一步的腐烂）。

我想我一直在使用一些多年来发生变化的非标准财产;有人可以确认一下吗？

TIA 莫罗

Answer 1

并非所有浏览器都支持相同的音频文件格式。看看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

但是，您可以查看this，它可以非常轻松地解释如何使用CSS悬停播放音频。

将鼠标悬停在html按钮上播放音频（mp3）

1 个答案: