Я создаю страницы для небольшой сетевой игры, в которой должно быть немного фоновой музыки. Эти страницы должны быть совместимы с большинством браузеров для настольных компьютеров, включая IE8 (но мы можем игнорировать мобильные браузеры).

Конечно, я бы хотел, чтобы пользователь мог остановить музыку. И это где это становится сложным.

Вот что я использую в настоящее время (с jQuery):

<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop">
    <source src="sounds/bgmusic.mp3" type="audio/mpeg" />
    <source src="sounds/bgmusic.ogg" type="audio/ogg" />
    <embed hidden="true" autostart="true" loop="true" src="sounds/bgmusic.mp3" />
</audio>
<div id="controls" class="controls">
    <a id="playpause" class="play">Play/Pause</a>
</div>
<script>
    function isPlaying(audio) {return !audio.paused;}
    var a = document.getElementById('main_audio');
    $('#playpause').on('click', function() {
        if (isPlaying(a)) {
            a.pause();
        } else {
            a.play();
        }
    });
</script>

Это прекрасно работает во всех браузерах, кроме IE. (Я нахожусь на Windows XP, поэтому в настоящее время тестирую на IE8.) На IE8 звук начинает воспроизводиться (что хорошо), но элементы управления ничего не делают, поэтому невозможно остановить музыку (и перезапустить ее).

Как я могу заставить этот скрипт работать для IE тоже? Другими словами, взаимодействовать с тегом встраивания (но только в IE)?