在 HTML5 音频中隐藏控件

发布于 2024-11-16 19:41:13 字数 828 浏览 4 评论 0原文

好吧，这很奇怪。考虑以下事项：

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]-->

它可以执行我想要的所有操作（在 IE、FF、Chrome 和 Safari 中自动播放音频），但有一个小问题：在 Internet Explorer 8 及更低版本中，有两个“静音”按钮。 （如果你仔细查看代码，应该很清楚为什么。）

我的问题是：是否可以阻止这种情况发生？

原文

Ok, this is a weird one. Consider the following:

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]-->

It does everything I want it to (autoplay audio in IE, FF, Chrome and Safari) but there's one teeny issue: In Internet Explorer 8 and below there are two "mute sound" buttons. (If you look through the code it should be obvious as to why.)

My question is: Is it possible to stop this from happening?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

饭团 2024-11-23 19:41:13

更新：下面是更好的解决方案。

您可以使用页面底部的

静音控制：

<a href="#" id="normal_browser_control" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

JS代码来自MSDN：

<script><!--
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

var ie_ver = getInternetExplorerVersion();

if(ie_ver > 0 && ie_ver < 9) document.getElementById('normal_browser_control').style.display = 'none';
//--></script>

Update: Better solution below.

You can use a <script> tag at the bottom of the page, and add the ID "normal_browser_control" to your first audio mute control.

Mute control:

<a href="#" id="normal_browser_control" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

JS with code from MSDN:

<script><!--
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

var ie_ver = getInternetExplorerVersion();

if(ie_ver > 0 && ie_ver < 9) document.getElementById('normal_browser_control').style.display = 'none';
//--></script>

回复收藏 0 原文

故事与诗 2024-11-23 19:41:13

或者更简单...

您可以使用两个不同的标签：

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 

    <![if (!IE)|(gte IE 9)]>
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>
    <![endif]>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]-->

Or even easier...

You could use two different tags:

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 

    <![if (!IE)|(gte IE 9)]>
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>
    <![endif]>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]-->

More here: http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx

回复收藏 0 原文

~没有更多了~