在嵌入标签中开始/暂停音频?(IE8+)

Question

我正在为一个小型的基于Web的游戏创建页面，该游戏必须播放一些背景音乐。这些页面应该与大多数桌面浏览器兼容，包括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中）？

Answer 1

尝试下一个代码：

<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 id="main_audio_ie8" 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>
    var isPlaying = function(audio) {return !audio.paused;}
    var a = document.getElementById('main_audio');
    if(!(a.play instanceof Function)){
        a = document.getElementById('main_audio_ie8');
        isPlaying = function(audio) {return audio.playState==2;}
    }
    $('#playpause').on('click', function() {
        if (isPlaying(a)) {
            a.pause();
        } else {
            a.play();
        }
    });
</script>

另一种变体（如果系统上存在WMPlayer.OCX，则代码必须有效;在Win2K+IE6SP1+WMP7、WinXP+IE6SP1+WMP9、WinXP+IE8+WMP11上选中）：

<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop" volume="1.0">
    <source src="sounds/bgmusic.mp3" type="audio/mpeg" />
    <source src="sounds/bgmusic.ogg" type="audio/ogg" />
    <object id="main_audio_ie8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;"> 
        <param name="URL" value="sounds/bgmusic.mp3" />
        <param name="uiMode" value="invisible" /> 
        <param name="autoStart" value="true" />
        <param name="volume" value="100" />
        <param name="playCount" value="2147483647" /> <!-- (Int32) 2^31-1==2147483647 - maximum allowed count (for 1 second length audio is equals to 68+ years) -->
    </object> 
</audio>
<div id="controls" class="controls">
    <a id="playpause" class="play">Play/Pause</a>
</div>
<script type='text/javascript'>
window.onload=function(){
    var isPlaying,a=document.getElementById('main_audio');
    if(a.play instanceof Function)isPlaying=function(audio){return !audio.paused;};
    else{
        a=document.getElementById('main_audio_ie8');
        isPlaying=function(audio){return audio.playState==3;};
        a.play=function(){this.controls.play();}
        a.pause=function(){this.controls.pause();}
    }
    document.getElementById('playpause').onclick=function() {
        if (isPlaying(a)) {
            a.pause();
        } else {
            a.play();
        }
    };
};
</script>