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

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

internet-explorer html javascript

Blues Clues · 技术社区 · 6 年前

<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 回复 | 直到 6 年前

Kaiido 6 年前

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

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

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

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

});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前