在嵌入标记开始/暂停音频？ （IE8 +） [英] Start/pause audio in an embed tag ? (IE8+)

问题描述

我创建了一个小型的基于Web的游戏，必须有一些背景音乐播放页面。这些页面应该与大多数桌面浏览器，包括IE8（但我们可以忽略的移动浏览器）不兼容。

I'm creating pages for a small web-based game which must have some background music playing. Those pages should be compatible with most desktop browsers, including IE8 (but we can ignore the mobile browsers).

当然，我想允许用户停止音乐。而这正是它变得非常棘手。

Of course I'd like to allow the user to stop the music. And this is where it gets tricky.

下面是我目前使用（使用jQuery）：

Here's what I use currently (with 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，音频开始播放（这是好的），但因此不可能停止音乐的控制不会做任何事情（并重新启动）。

This works fine in all browsers, but IE. (I'm on Windows XP so testing on IE8 currently.) On IE8, the audio starts playing (which is good) but the controls don't do anything so it's impossible to stop the music (and restart it).

我怎样才能让IE浏览器也是这个脚本的工作？换句话说，与嵌入标签交互（但只能在IE浏览器）？

How can I make this script work for IE too? In other word, interact with the embed tag (but only in IE)?

推荐答案

尝试下一个code：

<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系统存在code必须工作;检查在Win2k + IE6SP1 + WMP7，WINXP + IE6SP1 + WMP9，WINXP + IE8 + WMP11）：

Another variant (code must work if WMPlayer.OCX exist on system; checked on 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>

这篇关于在嵌入标记开始/暂停音频？ （IE8 +）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！