代码之家 › 专栏 › 技术社区 › Blues Clues

如何使用<audio>标签在IE中自动播放

internet-explorer html javascript

Blues Clues · 技术社区 · 5 年前

<audio> 元素,但仍不能在IE中工作,但可以在其他浏览器中工作。请看下面的代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
  <audio id="effectTada">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.mp3" type="audio/mpeg">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.wav" type="audio/mpeg">
    <source src="https://www.soundeffectsplus.com/uploads/prod_audio/39472249_footsteps-running-on-road-03.ogg" type="audio/ogg">
  </audio>
  
  
  <button type="button" class="play">Play</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  
    $(function(){
      
      $(document).on('click', '.play', function(){
        
        $('#effectTada').attr('autoplay', true);
        
      });
      
    });
    
  </script>
</body>
</html>

注:我知道 wav 和 ogg 不在这里工作,但我有这两个工作。我也试过很多关于这个话题的研究。

更新 :

$(document).on('click', '#completed', function(){
    var urls = "some url";

    $.ajax({
        url: urls,
        type: 'GET',
        success: function(data){
            $("#effectTada")
                .attr('autoplay', true)
                .get(0).play();
        }
    });
});

0 回复 | 直到 5 年前

Kaiido NickSlash 5 年前

设置 autoplay the load algorithm 在MediaElement上。所以如果媒体网络状态已经设置为 HAVE_ENOUGH_DATA ,检查autoplay标志是否设置为true的步骤将已经执行,此时设置此属性将不起任何作用。

换句话说,如果设置得太晚,仅设置此属性不应使媒体播放。你需要启动再次调用算法,或者简单地调用medialElement的 play() 方法:

$(document).on('click', '.play', function(){

  $('#effectTada')
    .attr('autoplay', true)
    .get(0).play();

});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前