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

问题描述

我正在为一个基于网络的小型游戏创建页面，该游戏必须播放一些背景音乐.这些页面应该兼容大多数桌面浏览器，包括 IE8(但我们可以忽略移动浏览器).

当然，我希望允许用户停止播放音乐.这就是它变得棘手的地方.

这是我目前使用的(使用 jQuery):

<脚本>function isPlaying(audio) {return !audio.paused;}var a = document.getElementById('main_audio');$('#playpause').on('click', function() {如果(正在播放(a)){a.暂停()；} 别的 {a.play();}});

这适用于所有浏览器，但 IE.(我使用的是 Windows XP，因此目前正在 IE8 上进行测试.)在 IE8 上，音频开始播放(这很好)但控件不执行任何操作，因此无法停止音乐(并重新启动).

我怎样才能让这个脚本也适用于 IE?换句话说，与 embed 标签交互(但仅限于 IE)?

解决方案

尝试下一个代码:

<脚本>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() {如果(正在播放(a)){a.暂停()；} 别的 {a.play();}});

另一个变体(如果系统上存在 WMPlayer.OCX，代码必须工作；在 Win2K+IE6SP1+WMP7、WinXP+IE6SP1+WMP9、WinXP+IE8+WMP11 上检查):

<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;};别的{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() {如果(正在播放(a)){a.暂停()；} 别的 {a.play();}};};

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.

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>

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).

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

解决方案

Try next 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>

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屋！