Javascript 在嵌入标签中开始/暂停音频？(IE8+)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11953656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Start/pause audio in an embed tag ? (IE8+)
提问by s427
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).
我正在为一个基于网络的小型游戏创建页面，该游戏必须播放一些背景音乐。这些页面应该与大多数桌面浏览器兼容，包括 IE8（但我们可以忽略移动浏览器）。
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) :
这是我目前使用的（使用 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).
这适用于所有浏览器，但 IE。（我使用的是 Windows XP，因此目前正在 IE8 上进行测试。）在 IE8 上，音频开始播放（这很好）但控件不执行任何操作，因此无法停止音乐（并重新启动）。
How can I make this script work for IE too? In other word, interact with the embed tag (but only in IE)?
我怎样才能让这个脚本也适用于 IE？换句话说，与 embed 标签交互（但仅在 IE 中）？
回答by Andrew D.
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):
另一个变体（如果系统上存在 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>
